検索・通知などのアイコン付きヘッダーを作る方法【HTML/CSS・サンプルコード付き】

ヘッダー

検索・通知などのアイコン付きヘッダーを作る方法

検索・通知などのアイコン付きヘッダーを作る方法を紹介します。ヘッダーの右側に検索、通知、プロフィールなどのアイコンを配置することで、よく使う操作へすぐにアクセスできるレイアウトを作成できます。Webアプリ、会員サイト、管理画面、ダッシュボードなどで使いやすい構成です。

このサンプルでは、HTMLとCSSだけを使って、サイト名、ナビゲーションメニュー、複数のアクションアイコンを並べたヘッダーを作成します。JavaScriptは使用せず、リンクとして配置したアイコンをCSSでボタン風に整えるシンプルな実装です。

アイコンの種類、メニュー項目、背景色、文字色、ボタンサイズ、角丸、余白などはCSSから調整できます。検索や通知などの入口をヘッダーにまとめたい場合や、Webサービス風のヘッダーを作りたい場合に活用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

🔍 🔔 👤
左側にサイト名、中央にメニュー、右側に検索・通知・プロフィールなどのアクションアイコンを配置したヘッダーです。ダッシュボードや会員サイト、Webアプリなどで利用しやすいレイアウトです。

コードをコピーして使おう！

<!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">

    <!-- サイト名 -->
    <a class="header-with-action-icons_logo" href="#">
      Sample Site
    </a>

    <!-- ナビメニュー -->
    <nav class="header-with-action-icons_nav" aria-label="メニュー">
      <a href="#">ホーム</a>
      <a href="#">サービス</a>
      <a href="#">ブログ</a>
    </nav>

    <!-- アクションアイコン -->
    <div class="header-with-action-icons_actions">

      <a class="header-with-action-icons_icon" href="#" aria-label="検索">
        🔍
      </a>

      <a class="header-with-action-icons_icon" href="#" aria-label="通知">
        🔔
      </a>

      <a class="header-with-action-icons_icon" href="#" aria-label="プロフィール">
        👤
      </a>

    </div>

  </header>

</body>
</html>

ファイル構成と設置方法

このサンプルはHTMLファイルとCSSファイルの2つで構成されています。HTMLファイルにヘッダー、ナビゲーションメニュー、検索・通知・プロフィールなどのアイコンを配置し、CSSファイルでレイアウトや文字サイズ、背景色、アイコンボタンのデザインを設定します。JavaScriptは使用していないため、HTMLとCSSだけでアイコン付きヘッダーを作成できます。 

sample/
├── index.html
└── style.css

index.htmlをブラウザで開くと、サイト名、ナビゲーションメニュー、検索・通知・プロフィールアイコンを配置したヘッダーを確認できます。サイト名やメニュー項目、アイコンはHTMLを書き換えることで自由に変更できます。背景色、文字色、アイコンサイズ、ボタンサイズ、角丸、余白などのデザインはstyle.cssから調整できます。

コメント