基本のヘッダーを作る方法
Webサイトの上部に表示する、シンプルで使いやすい基本のヘッダーをHTMLとCSSで作成します。左側にサイト名、右側にナビゲーションメニューを配置し、その下にページタイトルと説明文を含むページコンテンツを表示する基本的な構成です。
ヘッダーは白を基調とし、薄い境界線とシャドウを使ってページコンテンツとの区切りを分かりやすくしています。ナビゲーションには「ホーム」「サービス」「会社概要」「お問い合わせ」を配置し、リンクにマウスを重ねると文字色が変化します。
画面幅が狭くなるとサイト名とナビゲーションを縦方向へ配置するレスポンシブ対応も行っています。サイト名やメニュー項目、背景色、余白などを変更できるため、Webサイトの基本となるヘッダーとして利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
Sample Site
ページの上部に基本的なヘッダーを表示します。
ブラウザの横幅を変更すると、画面幅に合わせてヘッダーの内容が縦方向へ切り替わることを確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>基本のヘッダー</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ヘッダー -->
<header class="basic-header_header">
<!-- ヘッダー内のコンテンツ -->
<div class="basic-header_inner">
<!-- サイト名 -->
<p class="basic-header_logo">
Sample Site
</p>
<!-- メインナビゲーション -->
<nav class="basic-header_nav" aria-label="メインナビゲーション">
<a href="#">ホーム</a>
<a href="#">サービス</a>
<a href="#">会社概要</a>
<a href="#">お問い合わせ</a>
</nav>
</div>
</header>
<!-- ページコンテンツ -->
<main class="basic-header_content">
<!-- ページタイトル -->
<div class="basic-header_content-title">
ページタイトル
</div>
<!-- ページ説明文 -->
<p class="basic-header_content-text">
ページの上部に基本的なヘッダーを表示します。
</p>
</main>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではサイト名、ナビゲーションメニュー、ページタイトル、説明文を配置し、CSSではヘッダーのレイアウト、背景色、境界線、影、文字色、余白、ナビゲーションの表示などを設定します。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはヘッダーとページコンテンツを構成するファイルです。「Sample Site」のサイト名、「ホーム」「サービス」「会社概要」「お問い合わせ」のナビゲーション、ページタイトル、説明文を用途に合わせて変更できます。
style.cssはヘッダーとページコンテンツのデザインを設定するファイルです。ヘッダーの背景色、境界線、影、余白、サイト名やナビゲーションの文字色・文字サイズ、メニュー同士の間隔などを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページ上部にサイト名とナビゲーションを配置したヘッダーが表示され、その下にページタイトルと説明文が表示されます。
カスタマイズできる内容
index.htmlではサイト名、ナビゲーションの項目名とリンク先、ページタイトル、説明文を変更できます。実際のWebサイトへ設置する場合は、「Sample Site」や各メニューの文章をサイト内容に合わせて変更し、各hrefへ移動先のURLを設定できます。
style.cssではヘッダーの背景色、境界線、影、内側余白、サイト名とメニューの文字色・文字サイズ、メニュー間隔、ページコンテンツの余白などを変更できます。
数値調整
style.css
padding:28px 40px;
ヘッダー全体の内側余白です。上下の28pxを大きくするとヘッダーが高くなり、左右の40pxを大きくすると画面端との間隔が広がります。
border-bottom:1px solid #e5e7eb;
ヘッダー下側の境界線です。1pxを大きくすると境界線が太くなります。
box-shadow:0 4px 18px ...
ヘッダー下側に表示する影です。4pxを変更すると影の位置が変わり、18pxを変更すると影の広がりが変わります。
gap:40px;
サイト名とナビゲーションの間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。
max-width:1200px;
ヘッダー内のコンテンツの最大横幅です。値を大きくするとサイト名とナビゲーションを配置できる範囲が横に広がります。
font-size:20px;
サイト名の文字サイズです。値を大きくするとサイト名が大きく表示され、小さくすると控えめになります。
gap:8px 24px;
ナビゲーションメニュー同士の間隔です。8pxは折り返したときの上下間隔、24pxは左右の間隔です。値を大きくするとメニュー同士の間隔が広がります。
font-size:14px;
ナビゲーションの文字サイズです。値を大きくするとメニュー文字が大きくなり、小さくするとコンパクトになります。
transition:color .3s ease;
ナビゲーションへマウスを重ねたときに文字色が切り替わる時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速く切り替わります。
padding:80px 24px;
ページコンテンツの内側余白です。上下の80pxを大きくするとヘッダーとコンテンツの間隔が広がり、左右の24pxを大きくすると画面端との間隔が広がります。
font-size:28px;
ページタイトルの文字サイズです。値を大きくするとタイトルが大きく表示され、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%によってヘッダーを画面幅いっぱいに表示し、max-width:1200pxによってヘッダー内のコンテンツ幅を調整しています。768px以下ではflex-direction:column;へ切り替えてサイト名とナビゲーションを縦方向へ配置し、ヘッダーの余白をpadding:24px 20px;へ変更します。スマートフォン・タブレット・PCの画面幅に合わせて利用できます。
コメント