ヘッダー 左側にロゴ・右側にメニューを配置したヘッダーを作る方法【HTML/CSS・サンプルコード付き】
左側にロゴ・右側にメニューを配置したヘッダーを作る方法 左側にロゴ・右側にメニューを配置したヘッダーを作る方法を紹介します。このレイアウトは、Webサイトで広く採用されている定番のヘッダーデザインです。左側へサイト名やロゴを配置し、右側へナ...
ゆきのふ
ヘッダー 
ヘッダー スクロールすると表示される固定ヘッダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
スクロールすると表示される固定ヘッダーを作る方法 スクロールすると表示される固定ヘッダーを作る方法を紹介します。ページを開いた直後はヘッダーを非表示にし、少しスクロールすると画面上部へ固定ヘッダーを表示するデザインです。画面を広く見せながら...
ヘッダー スクロールすると背景色が変わる固定ヘッダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
スクロールすると背景色が変わる固定ヘッダーを作る方法 スクロールすると背景色が変わる固定ヘッダーを作る方法を紹介します。ページ上部へ固定したヘッダーは、スクロールを開始すると背景色が切り替わり、コンテンツとの境界が分かりやすくなります。スク...
ヘッダー スクロールすると小さくなる固定ヘッダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
スクロールすると小さくなる固定ヘッダーを作る方法 スクロールすると小さくなる固定ヘッダーを作る方法を紹介します。ページ上部に固定されたヘッダーは、スクロール量が増えると高さや余白が小さくなり、画面を広く使えるようになります。ナビゲーションは...
ヘッダー スクロールすると固定ヘッダーが浮き上がるデザインを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
スクロールすると固定ヘッダーが浮き上がるデザインを作る方法 スクロールすると固定ヘッダーが浮き上がるデザインを作る方法を紹介します。ページ上部に固定したヘッダーへスクロール時だけ影を付けることで、本文エリアより手前にあるような立体感を出せま...
ヘッダー スクロールしても上部に固定されるヘッダーを作る方法【HTML/CSS・サンプルコード付き】
スクロールしても上部に固定されるヘッダーを作る方法 スクロールしても上部に固定されるヘッダーを作る方法を紹介します。Webページを下へスクロールしてもヘッダーが画面上部に残るため、サイト名やナビゲーションメニューへすぐにアクセスできるレイア...
ヘッダー 基本のヘッダーを作る方法【HTML/CSS・サンプルコード付き】
基本のヘッダーを作る方法 基本のヘッダーを作る方法を紹介します。Webサイトの上部に配置するヘッダーは、ロゴやナビゲーションメニュー、検索アイコン、ユーザーアイコン、ボタンなどをまとめて表示する重要なパーツです。サイト全体の入口になる部分な...
ボタン 波紋アニメーション付きボタンを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
波紋アニメーション付きボタンを作る方法 波紋アニメーション付きボタンを作る方法を紹介します。ボタンをクリックしたときに、クリック位置から円形の波紋が広がるように表示することで、押した反応を分かりやすく伝えられます。シンプルなボタンに動きを加...
ボタン 影付きボタンを作る方法【HTML/CSS・サンプルコード付き】
影付きボタンを作る方法 影付きボタンを作る方法を紹介します。CSSの box-shadow を使うことで、ボタンの下に自然な影を付け、画面から少し浮いているような見た目を作成できます。平面的なボタンよりも存在感を出しやすく、クリックできる要...
ボタン 立体ボタンを作る方法【HTML/CSS・サンプルコード付き】
立体ボタンを作る方法 立体ボタンを作る方法を紹介します。CSSの影や位置調整を使うことで、ボタンが少し浮き上がっているような立体的な見た目を作成できます。通常の平面的なボタンよりも押せる要素であることが分かりやすく、WebサイトやWebアプ...