ヘッダー パンくずリスト付きヘッダーを作る方法【HTML/CSS・サンプルコード付き】
パンくずリスト付きヘッダーを作る方法 パンくずリスト付きヘッダーを作る方法を紹介します。このサンプルでは、サイト名とメインメニューを配置したヘッダーの下にパンくずリストを表示します。「ホーム ＞ サービス ＞ Web制作」のように現在のペー...
ゆきのふ
ヘッダー 
ヘッダー お知らせバー付きヘッダーを作る方法【HTML/CSS・サンプルコード付き】
お知らせバー付きヘッダーを作る方法 お知らせバー付きヘッダーを作る方法を紹介します。このサンプルでは、通常のヘッダーの上部に目立つお知らせバーを配置し、サイトを訪れた利用者へ重要な案内を表示します。お知らせバーとヘッダーを一体の構成にするこ...
ヘッダー 2段構成のヘッダーを作る方法【HTML/CSS・サンプルコード付き】
2段構成のヘッダーを作る方法 2段構成のヘッダーを作る方法を紹介します。このサンプルでは、ヘッダーを上段と下段に分け、上段へサイト名と補助メニュー、下段へメインナビゲーションを配置します。1つの段へすべてのリンクを並べるのではなく、役割ごと...
ヘッダー 複数列で表示するドロップダウンメニュー付きヘッダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
複数列で表示するドロップダウンメニュー付きヘッダーを作る方法 複数列で表示するドロップダウンメニュー付きヘッダーを作る方法を紹介します。このサンプルでは、サイト名とナビゲーションメニューを配置したヘッダーに、複数のリンクを列ごとに整理して表...
ヘッダー ドロップダウンメニュー付きヘッダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
ドロップダウンメニュー付きヘッダーを作る方法 ドロップダウンメニュー付きヘッダーを作る方法を紹介します。このサンプルでは、サイト名とナビゲーションメニューを配置したヘッダーに、クリックで開閉できるドロップダウンメニューを追加します。「サービ...
ヘッダー 検索・通知などのアイコン付きヘッダーを作る方法【HTML/CSS・サンプルコード付き】
検索・通知などのアイコン付きヘッダーを作る方法 検索・通知・ユーザーなどのアイコンを配置したヘッダーを作る方法を紹介します。このサンプルでは、左側にサイト名、中央から右側にナビゲーションメニュー、その右側に検索・通知・ユーザーの3つのアイコ...
ヘッダー 検索フォーム付きヘッダーを作る方法【HTML/CSS・サンプルコード付き】
検索フォーム付きヘッダーを作る方法 ナビゲーションと検索フォームを配置したヘッダーを、HTMLとCSSで作る方法を紹介します。このサンプルでは、左側に「Sample Site」のサイト名、中央に「ホーム」「サービス」「ブログ」のナビゲーショ...
ヘッダー 中央にロゴを配置したヘッダーを作る方法【HTML/CSS・サンプルコード付き】
中央にロゴを配置したヘッダーを作る方法 ヘッダーの中央にロゴを配置したレイアウトを、HTMLとCSSで作る方法を紹介します。このサンプルでは、中央に「Sample Site」のサイト名をロゴとして配置し、その左右に「ホーム」「サービス」「会...
ヘッダー 左側にロゴ・右側にメニューを配置したヘッダーを作る方法【HTML/CSS・サンプルコード付き】
左側にロゴ・右側にメニューを配置したヘッダーを作る方法 左側にロゴ、右側にメニューを配置したヘッダーを、HTMLとCSSで作る方法を紹介します。このサンプルでは、ヘッダーの左側に「Sample Site」のサイト名をロゴとして配置し、右側に...
ヘッダー スクロールすると表示される固定ヘッダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
スクロールすると表示される固定ヘッダーを作る方法 ページをスクロールすると上から表示される固定ヘッダーを、HTML・CSS・JavaScriptで作る方法を紹介します。このサンプルでは、ページ最上部ではヘッダーを画面の上側へ隠しておき、下へ...