中央にロゴを配置したヘッダーを作る方法
ヘッダーの中央にロゴを配置したレイアウトを、HTMLとCSSで作る方法を紹介します。このサンプルでは、中央に「Sample Site」のサイト名をロゴとして配置し、その左右に「ホーム」「サービス」「会社概要」「お問い合わせ」のナビゲーションを分けて表示します。ロゴをヘッダーの中心に置くことで、サイト名を目立たせながら左右へバランスよくメニューを配置できます。
HTMLでは左側のナビゲーション、中央のロゴ、右側のナビゲーションをそれぞれ配置し、CSSのGridを使って3つのエリアに分けます。中央のロゴはヘッダーの中央へ揃え、左右のナビゲーションはそれぞれ中央方向へ配置します。ナビゲーションリンクは横並びにし、マウスを重ねたときやキーボードでフォーカスしたときには文字色がブルーへ変わります。
ブランド名やサイト名をヘッダー中央で目立たせたいコーポレートサイト、店舗サイト、ブランドサイト、ポートフォリオなどに利用できます。サイト名、メニュー名、リンク先はHTMLから変更でき、CSSではヘッダーの余白、最大横幅、ロゴやメニューの文字サイズ、リンク同士の間隔などを調整できます。また、画面幅が狭い場合はロゴとナビゲーションを縦方向へ並べるため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
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="center-logo-header_header">
<!-- ヘッダーの内側 -->
<div class="center-logo-header_inner">
<!-- 左側のナビゲーション -->
<nav class="center-logo-header_nav center-logo-header_nav-left" aria-label="左側メニュー">
<!-- hrefと表示文字はサイトに合わせて変更してください -->
<a href="#">ホーム</a>
<a href="#">サービス</a>
</nav>
<!-- 中央のロゴ -->
<p class="center-logo-header_logo">
Sample Site
</p>
<!-- 右側のナビゲーション -->
<nav class="center-logo-header_nav center-logo-header_nav-right" aria-label="右側メニュー">
<!-- hrefと表示文字はサイトに合わせて変更してください -->
<a href="#">会社概要</a>
<a href="#">お問い合わせ</a>
</nav>
</div>
</header>
<!-- ページ本文 -->
<main class="center-logo-header_content">
<!-- ページタイトル -->
<div class="center-logo-header_content-title">
ページタイトル
</div>
<!-- ページの説明文 -->
<p class="center-logo-header_content-text">
中央にロゴを配置し、その左右にメニューを配置したヘッダーのサンプルです。
</p>
</main>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは左側のナビゲーション、中央のロゴ、右側のナビゲーション、ページ本文を作成し、CSSではGridを使ってロゴがヘッダー中央に配置されるレイアウトを設定します。画面幅が狭い場合はロゴとナビゲーションを縦方向へ切り替えるレスポンシブ対応も設定しています。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはヘッダーとページ本文を構成するファイルです。「ホーム」「サービス」の左側ナビゲーション、「Sample Site」の中央ロゴ、「会社概要」「お問い合わせ」の右側ナビゲーション、ページタイトル、説明文を変更できます。各ナビゲーションのhrefを変更すると、実際のページへのリンクを設定できます。
style.cssはヘッダーとページ本文のデザインを設定するファイルです。grid-template-columns:1fr auto 1fr;によって左右を同じ幅にし、その間にロゴを配置することでヘッダー中央へ揃えます。
設置方法・使い方
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、各要素の間隔を20px、リンク同士の間隔を12px 20pxへ変更するため、スマートフォン・タブレット・PCで利用できます。
コメント