左側にロゴ・右側にメニューを配置したヘッダーを作る方法
左側にロゴ、右側にメニューを配置したヘッダーを、HTMLとCSSで作る方法を紹介します。このサンプルでは、ヘッダーの左側に「Sample Site」のサイト名をロゴとして配置し、右側に「ホーム」「サービス」「会社概要」「お問い合わせ」のナビゲーションを横並びで表示します。Webサイトでよく使われるシンプルな構成で、サイト名と主要なページへのリンクをヘッダー内に分かりやすくまとめられます。
HTMLではロゴとナビゲーションをそれぞれ配置し、CSSのFlexboxを使って左右に振り分けます。ヘッダーの内側に最大横幅を設定して中央へ配置し、ロゴとメニューの間には適切な余白を確保します。ナビゲーションリンクは横並びにし、マウスを重ねたときやキーボードでフォーカスしたときには文字色がブルーへ変わるため、現在操作しているリンクも確認しやすくなっています。
コーポレートサイト、サービスサイト、店舗サイト、ポートフォリオなど、ロゴと主要メニューを横一列に配置した一般的なヘッダーを作りたい場合に利用できます。サイト名、メニュー名、リンク先はHTMLから変更でき、CSSではヘッダーの余白、最大横幅、文字サイズ、文字色、メニュー同士の間隔などを調整できます。また、画面幅が狭い場合はロゴとナビゲーションを縦方向へ切り替えるため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
コードをコピーして使おう！
<!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="logo-menu-header_header">
<!-- ヘッダーの内側 -->
<div class="logo-menu-header_inner">
<!-- 左側のロゴ -->
<p class="logo-menu-header_logo">
Sample Site
</p>
<!-- 右側のメインナビゲーション -->
<nav class="logo-menu-header_nav" aria-label="メインナビゲーション">
<!-- hrefと表示文字はサイトに合わせて変更してください -->
<a href="#">ホーム</a>
<a href="#">サービス</a>
<a href="#">会社概要</a>
<a href="#">お問い合わせ</a>
</nav>
</div>
</header>
<!-- ページ本文 -->
<main class="logo-menu-header_content">
<!-- ページタイトル -->
<div class="logo-menu-header_content-title">
ページタイトル
</div>
<!-- ページの説明文 -->
<p class="logo-menu-header_content-text">
左側にロゴ、右側にメニューを配置したヘッダーのサンプルです。
</p>
</main>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは左側のロゴ、右側のナビゲーション、ページ本文を作成し、CSSではFlexboxを使ってロゴとメニューを左右に配置します。画面幅が狭い場合はロゴとナビゲーションを縦方向へ切り替えるレスポンシブ対応も設定しています。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはヘッダーとページ本文を構成するファイルです。「Sample Site」のロゴ、「ホーム」「サービス」「会社概要」「お問い合わせ」のナビゲーション、ページタイトル、説明文を変更できます。各ナビゲーションのhrefを変更すると、実際のページへのリンクを設定できます。
style.cssはヘッダーとページ本文のデザインを設定するファイルです。display:flex;とjustify-content:space-between;によってロゴを左側、ナビゲーションを右側へ配置し、最大横幅や余白、文字サイズ、リンク同士の間隔などを設定します。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを同じ階層で配置します。index.htmlからstyle.cssを読み込む構成になっているため、2つのファイルを配置したあとsample/index.htmlをブラウザで開いてください。ヘッダーの左側にロゴ、右側にナビゲーションメニューが表示されます。
カスタマイズできる内容
index.htmlではロゴとして表示するサイト名、ナビゲーションの表示文字とリンク先、ページタイトル、説明文を変更できます。style.cssではヘッダーの背景色、下側の枠線、影、内側余白、最大横幅、ロゴやナビゲーションの文字サイズ、文字色、リンク同士の間隔などを変更できます。
数値調整
padding:28px 40px;
ヘッダーの内側余白です。上下の28pxを大きくするとヘッダーが高くなり、左右の40pxを大きくすると画面端との間隔が広がります。
border-bottom:1px solid #e5e7eb;
ヘッダー下側の枠線です。1pxを大きくすると線が太くなり、小さくすると細くなります。
box-shadow:0 4px 18px rgba(15,23,42,.05);
ヘッダー下側の影です。4pxを変更すると影の縦方向の位置が変わり、18pxを変更するとぼかし範囲が変わります。.05を大きくすると影が濃くなり、小さくすると薄くなります。
gap:40px;
ロゴとナビゲーションの間隔です。値を大きくすると両者の間隔が広がり、小さくすると近くなります。
max-width:1200px;
ヘッダー内側の最大横幅です。値を大きくするとロゴとナビゲーションを配置できる範囲が広がり、小さくすると中央寄りになります。
font-size:20px;
ロゴの文字サイズです。値を大きくするとロゴが大きくなり、小さくすると控えめになります。
gap:8px 24px;
ナビゲーションリンク同士の間隔です。8pxは上下方向、24pxは左右方向の間隔です。値を大きくするとリンク同士の間隔が広がります。
font-size:14px;
ナビゲーションリンクの文字サイズです。値を大きくすると文字が大きくなり、小さくするとコンパクトになります。
padding:80px 24px;
ページ本文の内側余白です。上下の80pxを大きくすると本文内容の上下余白が広がり、左右の24pxを大きくすると画面端との間隔が広がります。
margin:0 0 12px;
ページタイトルの下側余白です。12pxを大きくするとタイトルと説明文の間隔が広がり、小さくすると近くなります。
font-size:28px;
ページタイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。
line-height:1.8;
ページ説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%;によってヘッダーを画面幅いっぱいに表示し、max-width:1200px;によって内側の内容が必要以上に広がらないようにしています。画面幅が768px以下になると、ロゴとナビゲーションを縦方向へ並べ、ヘッダーの余白を24px 20px、ロゴとナビゲーションの間隔を24px、リンク同士の間隔を12px 20pxへ変更するため、スマートフォン・タブレット・PCで利用できます。
コメント