ヘッダー 選択中のメニューに下線が付くヘッダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
選択中のメニューに下線が付くヘッダーを作る方法 選択中のメニューに下線が付くヘッダーを作る方法を紹介します。ナビゲーションメニューをクリックしたときに、選択された項目だけ文字色を変えて下線を表示することで、現在どのメニューが選ばれているのか...
ゆきのふ
ヘッダー 
ヘッダー 下へスクロールすると隠れる固定ヘッダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
下へスクロールすると隠れる固定ヘッダーを作る方法 下へスクロールすると隠れる固定ヘッダーを作る方法を紹介します。通常は画面上部に固定されているヘッダーを、ページを下へスクロールしたときだけ上方向へ隠し、上へスクロールしたときに再表示するレイ...
ヘッダー ヘッダー下にパンくずリストを表示する方法【HTML/CSS・サンプルコード付き】
ヘッダー下にパンくずリストを表示する方法 ヘッダー下にパンくずリストを表示する方法を紹介します。パンくずリストは、現在のページがサイト内のどこにあるのかを分かりやすく示すためのナビゲーションです。ヘッダーのすぐ下に配置することで、ユーザーが...
ヘッダー ヘッダー上にお知らせバーを配置する方法【HTML/CSS・サンプルコード付き】
ヘッダー上にお知らせバーを配置する方法 ヘッダー上にお知らせバーを配置する方法を紹介します。Webサイトの最上部に短いお知らせを表示することで、キャンペーン情報、更新案内、重要なお知らせなどをユーザーへ分かりやすく伝えられます。通常のヘッダ...
ヘッダー 上下2段に分かれたヘッダーを作る方法【HTML/CSS・サンプルコード付き】
上下2段に分かれたヘッダーを作る方法 上下2段に分かれたヘッダーを作る方法を紹介します。ヘッダーを上下2段に分けることで、サイト名や補助リンクと、メインのナビゲーションメニューを整理して配置できます。情報量が多いWebサイトでも見やすいレイ...
ヘッダー 大きなドロップダウンメニュー付きヘッダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
大きなドロップダウンメニュー付きヘッダーを作る方法 大きなドロップダウンメニュー付きヘッダーを作る方法を紹介します。通常のドロップダウンメニューよりも広い表示領域を使い、複数のカテゴリやリンクをまとめて表示できるヘッダーを実装します。サービ...
ヘッダー ドロップダウンメニュー付きヘッダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
ドロップダウンメニュー付きヘッダーを作る方法 ドロップダウンメニュー付きヘッダーを作る方法を紹介します。ヘッダー内のメニューをクリックすると、関連する項目を一覧表示できるドロップダウンメニューを実装します。通常時はヘッダーをすっきりと見せな...
ヘッダー 検索・通知などのアイコン付きヘッダーを作る方法【HTML/CSS・サンプルコード付き】
検索・通知などのアイコン付きヘッダーを作る方法 検索・通知などのアイコン付きヘッダーを作る方法を紹介します。ヘッダーの右側に検索、通知、プロフィールなどのアイコンを配置することで、よく使う操作へすぐにアクセスできるレイアウトを作成できます。...
ヘッダー 検索フォーム付きヘッダーを作る方法【HTML/CSS・サンプルコード付き】
検索フォーム付きヘッダーを作る方法 検索フォーム付きヘッダーを作る方法を紹介します。ヘッダーへ検索フォームを配置することで、ユーザーがどのページからでも目的の情報を探しやすくなります。ブログやニュースサイト、ECサイト、サービスサイトなど、...
ヘッダー 中央にロゴを配置したヘッダーを作る方法【HTML/CSS・サンプルコード付き】
中央にロゴを配置したヘッダーを作る方法 中央にロゴを配置したヘッダーを作る方法を紹介します。ロゴをヘッダーの中央へ配置するレイアウトは、ブランドイメージを強調したいWebサイトでよく使われるデザインです。左右のバランスが取りやすく、シンプル...