基本のヘッダーを作る方法
基本のヘッダーを作る方法を紹介します。このサンプルでは、HTMLとCSSだけを使用して、サイト名とナビゲーションメニューを横並びで表示するシンプルなヘッダーを作成します。パソコンでは横並びで表示し、画面幅が狭いスマートフォンではメニューを縦並びへ切り替えるレスポンシブ対応のレイアウトになっています。
ヘッダーはWebサイトの最上部に表示される重要な要素で、ホーム、サービス、料金、会社情報、お問い合わせなどのページへ移動するためのナビゲーションとして利用されます。企業サイト、コーポレートサイト、サービスサイト、ポートフォリオサイトなど、さまざまなWebサイトで利用しやすい基本構成です。
サイト名やメニュー名、リンク先はHTMLから変更でき、CSSではヘッダー全体の横幅、余白、背景色、文字色、文字サイズなどを自由に調整できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用しやすく、初心者でも導入しやすい基本的なヘッダーのサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
PCでは横並び、スマートフォンではメニューが縦並びになります。
ブラウザの横幅を変更すると、640px以下でメニューが縦並びへ切り替わることを確認できます。
コードをコピーして使おう！
<!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>
<!-- ヘッダーを含むサンプル全体 -->
<div class="basic-header_wrap">
<!-- ヘッダー -->
<header class="basic-header_header">
<!-- サイト名 -->
<a
class="basic-header_logo"
href="#">
Sample Site
</a>
<!-- ナビゲーションメニュー -->
<nav
class="basic-header_nav"
aria-label="メインメニュー">
<!-- ホームへのリンク -->
<a
class="basic-header_link"
href="#home">
ホーム
</a>
<!-- サービスへのリンク -->
<a
class="basic-header_link"
href="#service">
サービス
</a>
<!-- 会社概要へのリンク -->
<a
class="basic-header_link"
href="#company">
会社概要
</a>
<!-- お問い合わせへのリンク -->
<a
class="basic-header_link"
href="#contact">
お問い合わせ
</a>
</nav>
</header>
<!-- ヘッダー下の表示内容 -->
<main class="basic-header_content">
<!-- 表示内容のタイトル -->
<div class="basic-header_title">
基本のヘッダー
</div>
<!-- 表示内容の説明文 -->
<p class="basic-header_text">
PCでは横並び、スマートフォンではメニューが縦並びになります。
</p>
</main>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルは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をブラウザで開いてください。PCではサイト名とナビゲーションメニューが横並びで表示され、画面幅640px以下ではサイト名とメニューが縦並びへ切り替わります。
カスタマイズできる内容
index.htmlではサイト名、メニュー名、リンク先、ヘッダー下のタイトルと説明文を変更できます。企業サイト、サービスサイト、ポートフォリオサイトなど、用途に合わせた表示内容へ編集できます。
style.cssではヘッダーの背景色、サイト名とメニューの文字色、文字サイズ、余白、全体の最大横幅、角丸、メニュー間隔、スマートフォン表示時の背景色や配置を変更できます。
数値調整
style.css
max-width:900px;
サンプル全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
サンプル全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
サンプル全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
gap:20px;
サイト名とナビゲーションメニューの間隔です。値を大きくすると間隔が広がり、小さくすると近付きます。
padding:18px 24px;
ヘッダーの内側余白です。上下の18pxを大きくするとヘッダーが高くなり、左右の24pxを大きくすると画面端との間隔が広がります。
font-size:24px;
サイト名の文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
gap:24px;
メニューリンク同士の間隔です。値を大きくするとメニュー同士が離れ、小さくすると近付きます。
text-underline-offset:4px;
ホバー時に表示される下線と文字の間隔です。値を大きくすると下線が文字から離れ、小さくすると近付きます。
padding:40px 24px;
ヘッダー下の表示内容の内側余白です。値を大きくすると内容周辺の余白が広がります。
font-size:28px;
ヘッダー下に表示するタイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:900pxにより、画面幅に合わせて全体が縮小されます。640px以下ではflex-direction:column;を使用してサイト名とナビゲーションメニューを縦並びへ変更し、各リンクへ余白と背景色を付けています。スマートフォン・タブレット・PCで利用できます。
コメント