検索・通知などのアイコン付きヘッダーを作る方法
検索・通知・ユーザーなどのアイコンを配置したヘッダーを作る方法を紹介します。このサンプルでは、左側にサイト名、中央から右側にナビゲーションメニュー、その右側に検索・通知・ユーザーの3つのアイコンボタンを配置します。アイコンにはSVGを使用しているため、画像ファイルを別途用意せず、HTMLとCSSだけでアイコン付きヘッダーを作成できます。
検索ページへの導線、通知の確認、会員ページへの移動など、Webサイトでよく使われる操作をアイコンとしてまとめて配置したい場合に利用できます。企業サイト、会員サイト、ECサイト、Webサービスなど、ナビゲーションメニューとは別に操作用のアイコンを表示したいヘッダーに適しています。このサンプルではアイコンボタンの配置とデザインのみを実装し、検索処理・通知表示・ユーザー認証などの機能は含めていません。
サイト名やナビゲーションメニューはHTMLから変更でき、SVGを差し替えることで表示するアイコンも変更できます。CSSではヘッダーの横幅や余白、メニュー間隔、アイコンボタンの大きさ、枠線、角丸、背景色、アイコンのサイズや色などを調整できます。レスポンシブにも対応しており、画面幅が狭くなるとサイト名・メニュー・アイコンエリアを縦方向へ並べるため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ヘッダー右側に配置された検索・通知・ユーザーの3つのアイコンを確認してください。各アイコンは配置とデザインを確認するためのボタンで、検索・通知・ユーザー認証などの処理は実行しません。
Q 他のアイコンを使いたい場合はどうするの？
無料のSVGアイコン作成ツールを使って、用途に合ったアイコンを作成できます。
コードをコピーして使おう！
<!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="header-with-action-icons_header">
<div class="header-with-action-icons_inner">
<!-- サイト名 -->
<div class="header-with-action-icons_logo">
Sample Site
</div>
<!-- ナビゲーションメニュー -->
<nav class="header-with-action-icons_nav" aria-label="メインメニュー">
<a href="#">ホーム</a>
<a href="#">サービス</a>
<a href="#">会社概要</a>
<a href="#">お問い合わせ</a>
</nav>
<!-- 検索・通知・ユーザーアイコン -->
<div class="header-with-action-icons_actions" aria-label="ヘッダー操作">
<!-- 検索アイコン -->
<button
type="button"
class="header-with-action-icons_button"
aria-label="検索"
>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M10.5 4a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13z M15.5 15.5 21 21" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<!-- 通知アイコン -->
<button
type="button"
class="header-with-action-icons_button"
aria-label="通知"
>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M5 17h14l-1.8-2.5v-4a5.2 5.2 0 0 0-10.4 0v4z M9.8 19a2.2 2.2 0 0 0 4.4 0" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10.2 20h3.6" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<!-- ユーザーアイコン -->
<button
type="button"
class="header-with-action-icons_button header-with-action-icons_button--user"
aria-label="ユーザー"
>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 3a4 4 0 1 1 0 8 4 4 0 0 1 0-8z M5 21c0-4 3.1-7 7-7s7 3 7 7z" fill="#000000"></path>
</svg>
</button>
</div>
</div>
</header>
<!-- ページ内容 -->
<main class="header-with-action-icons_content">
<p class="header-with-action-icons_content-title">
アイコン付きヘッダー
</p>
<p class="header-with-action-icons_content-text">
ヘッダー右側に検索・通知・ユーザーアイコンを配置しています。
</p>
</main>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではサイト名、ナビゲーションメニュー、検索・通知・ユーザーの3つのSVGアイコンボタンを配置します。CSSではヘッダー全体のレイアウト、メニュー、アイコンボタン、SVGのサイズや色、画面幅に応じたレスポンシブ表示を設定します。SVGはindex.htmlへ直接記述しているため、アイコン用の画像ファイルを別途用意する必要はありません。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはヘッダーとページ内容を構成するファイルです。「Sample Site」のサイト名、ナビゲーションメニューの項目、検索・通知・ユーザーのSVGアイコンを変更できます。各アイコンはbutton要素として配置していますが、検索処理・通知表示・ユーザー認証などの処理は含まれていません。
style.cssはヘッダー全体のデザインとレイアウトを設定するファイルです。ヘッダーの余白、最大横幅、メニュー間隔、アイコンボタンの大きさ、枠線、角丸、背景色、SVGのサイズや色、画面幅768px以下での配置変更などを設定しています。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ヘッダーの左側にサイト名、その右側にナビゲーションメニュー、さらに右側に検索・通知・ユーザーの3つのアイコンボタンが表示されます。
カスタマイズできる内容
index.htmlではサイト名、ナビゲーションメニューの文字やリンク先、検索・通知・ユーザーのSVGを変更できます。用途に合わせてSVGのpathを差し替えることで、別のアイコンへ変更できます。style.cssではヘッダーの背景色、余白、最大横幅、メニューの文字色、アイコンボタンのサイズ、枠線、角丸、背景色、SVGのサイズや色を変更できます。
数値調整
style.css
padding:28px 40px;
ヘッダーの内側余白です。上下の28pxを大きくするとヘッダーが高くなり、左右の40pxを大きくすると画面端との間隔が広がります。
gap:32px;
サイト名・ナビゲーションメニュー・アイコンエリアの間隔です。値を大きくすると各エリアの間隔が広がり、小さくすると近くなります。
max-width:1200px;
ヘッダー内部の最大横幅です。値を大きくすると広い画面で内容が横に広がり、小さくすると中央へまとまります。
gap:8px 24px;
ナビゲーションメニューの間隔です。8pxは折り返した場合の縦方向、24pxは横方向の間隔です。値を大きくするとメニュー同士の間隔が広がります。
gap:8px;
検索・通知・ユーザーのアイコンボタン同士の間隔です。値を大きくするとアイコン同士が離れ、小さくすると近くなります。
width:40px; / height:40px;
アイコンボタンの横幅と高さです。同じ値にすることで正方形になります。値を大きくするとボタン全体が大きくなります。
border-radius:8px;
アイコンボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
width:20px; / height:20px;
SVGアイコン自体の横幅と高さです。値を大きくするとアイコンが大きくなり、小さくすると控えめになります。
padding:80px 24px;
ページ内容の内側余白です。上下の80pxを変更するとヘッダーとページ内容の間隔、左右の24pxを変更すると画面端との間隔を調整できます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:1200pxにより、画面幅に合わせてヘッダー内部の横幅が調整されます。画面幅768px以下では、flex-direction:column;によってサイト名・ナビゲーションメニュー・アイコンエリアを縦方向へ配置し、ヘッダーの余白をpadding:24px 20px;へ変更します。ナビゲーションメニューとアイコンエリアは折り返しにも対応しているため、スマートフォン・タブレット・PCで利用できます。
コメント