基本のヘッダーを作る方法【HTML/CSS・サンプルコード付き】

ヘッダー

基本のヘッダーを作る方法

基本のヘッダーを作る方法を紹介します。Webサイトの上部に配置するヘッダーは、ロゴやナビゲーションメニュー、検索アイコン、ユーザーアイコン、ボタンなどをまとめて表示する重要なパーツです。サイト全体の入口になる部分なので、見やすく整理されたレイアウトにすることで、ユーザーが目的のページへ移動しやすくなります。

このサンプルでは、HTMLとCSSだけを使って、一般的なWebサイトで使いやすい基本のヘッダーを作成します。左側にロゴ、中央にメニュー、右側にアイコンやCTAボタンを配置し、ヘッダーとして自然に使える構成にしています。JavaScriptは使用しないため、シンプルに導入できます。

コーポレートサイト、ブログ、サービスサイト、ポートフォリオサイトなど、さまざまなWebサイトの土台として活用できます。高さ、余白、背景色、文字色、メニュー数、ボタンのデザインはCSSから変更できるため、サイトの雰囲気に合わせてカスタマイズしやすいサンプルです。

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

デモ

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="basic-header_header">

    <!-- サイト名 -->
    <a class="basic-header_site-name" href="#">
      Sample Site
    </a>

    <!-- ナビメニュー -->
    <nav class="basic-header_nav" aria-label="メニュー">
      <a href="#">ホーム</a>
      <a href="#">サービス</a>
      <a href="#">料金</a>
      <a href="#">会社情報</a>
    </nav>

    <!-- お問い合わせリンク -->
    <a class="basic-header_contact" href="#">
      お問い合わせ
    </a>

  </header>

</body>
</html>

ファイル構成と設置方法

このサンプルはHTMLファイルとCSSファイルの2つで構成されています。HTMLファイルにヘッダーのレイアウトを記述し、CSSファイルでレイアウトや文字サイズ、色、余白などのデザインを設定します。JavaScriptは使用していないため、シンプルな基本のヘッダーを手軽に作成できます。 

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

index.htmlをブラウザで開くとヘッダーを確認できます。サイト名、ナビゲーションメニュー、お問い合わせリンクはHTMLを書き換えることで自由に変更できます。文字色、背景色、高さ、余白、メニュー間隔などのデザインはstyle.cssから調整できます。

コメント