HTML CSS 特定商取引法に基づく表示をHTML・CSSで書いてみた。tableタグ・listタグ・dlタグ各タイプで作成。【サンプルコードあり】
特定商取引法に基づく表示のページどうしてますか？HTMLで書いたり、画像にしてアップしてる場合もみかけます。今回HTMLでコーディングしてみました。完成はこんな感じです。サンプルコードもこの記事の中で掲載しております。今回HTMLでコーディ...
HTML CSS
HTML CSS 
HTML CSS 画像を中心に文字が周囲を回転（スライド）する設定やってみた【サンプルコードあり】
今回は、画像を中心に配置してその周りをテキストが回転してるデザインを実装してみました。この方法は、JavaScriptを使って行う方法とSVGを使って行う方法があります。この記事ではJavaScriptを使って下記の実装を行った方法を書いて...
HTML CSS 画像とテキストコンテンツを横並び 1枚の画像を少し上にズラして配置。親要素の幅越えて画面いっぱい表示。positionとz-index 疑似要素使用 【サンプルコードあり】
画像とテキストボックスを横並びにして重ね１枚の画像を少し上にずらした感じで配置。後ろにラインを入れたデザインをコーディングしてみました。後半では、親要素の幅を超えて画面いっぱいに表示させる方法も書いてます。今回は、positionとz-in...
HTML CSS Scroll設定 矢印が下向きに流れる設定 HTML・CSS・animationで設定する方法でコード書いてみた。【サンプルコードあり】
よく見るページのトップ画像にある、下にスクロールする画像の設定を、HTML・CSSで設定してみた。下向き矢印が下にスクロールする設定です。background-imageで画像を設定してスクロール矢印の動きは、animationで動きをつけ...
HTML CSS ボタン作成 HTML・CSS ボタン作成１サイトに数種類のbuttonをコーディングする時の簡単なやり方。コンポーネント【サンプルコードあり】
button作成 HTML・CSSコーディングの時。いろんなボタンがあるが多くのサイトは、１サイトで数パターンのボタンが必要になる場合が多い。そんな場合は、まず基本のボタンを１つ作成して、そのボタンを基本にして作っていくようにしてます。例え...
HTML CSS bodyのbackground-colorにbackgroundを重ねてその上に画像や文字の実装をやってみました。【サンプルコードあり】
今回は、background-colorでページ全体にカラー設定さらにページの真ん中のセクションのbackgroundに違うパターンのデザインを重ねて表示してみました。この実装にはいろんな方法がありますが今回はbackground-imag...
HTML CSS 画像に色の幕をあててその上に文字を重ねて表示する方法。【サンプルコードあり】
画像に薄い色をあてて。その上に文字を表示させる方法。よく使うパターン２つ書いてみました。文字が少ないパターンこの場合、よく使うのが画像の疑似要素にカラーをあてて、position使って文字を浮かせて最前面に表示させる。HTMLＣＳＳ文字が多...
HTML CSS 【サンプルコードあり】ヘッダーのナビゲーションメニュー 3パターン作ってみた
サイトのナビゲーションメニューでよく見る３タイプのコードを記録してみました。HTML・CSSのサンプルコードありよかったら参考にしてください。今回作成したナビゲーションメニューリセットCSSパターン1 文字inline使用li に inli...
HTML CSS 【サンプルコードあり】テキスト(文字) を枠線だけで表示する方法。文字の中透過して枠線で文字
文字の中が透明で、文字の外枠だけが表示される方法。CSSでテキスト文字の縁取りをする方法を書いてます。サンプルコードも記述してますので初心者の人必見。CSSで装飾してると後で色の変更やサイズ変更などのカスタマイズも簡単になり文字の表現が豊かで綺麗になる。
HTML CSS Googleフォームと連携してサイトのお問い合わせフォームの作成やってみた。IDの取得がちょっとわかりにくかった【サンプルコードあり】
サイトのお問い合わせフォームとGoogleフォームと連携すると見た目を自由にカスタマイズすることが出来る。その連携が今回出来たんで、忘れないように記事にしました。よかったら参考にして下さい。今回行った手順（作り方）HTMLで表示したいレイア...