左側にロゴ・右側にメニューを配置したヘッダーを作る方法【HTML/CSS・サンプルコード付き】 

ヘッダー

左側にロゴ・右側にメニューを配置したヘッダーを作る方法

左側にロゴ・右側にメニューを配置したヘッダーを作る方法を紹介します。このレイアウトは、Webサイトで広く採用されている定番のヘッダーデザインです。左側へサイト名やロゴを配置し、右側へナビゲーションメニューをまとめることで、シンプルで見やすいヘッダーを作成できます。企業サイトやブログ、サービスサイト、ポートフォリオなど、さまざまなWebサイトで利用しやすい構成です。

このサンプルでは、HTMLとCSSだけを使って、左側にロゴ、右側にメニューを配置したヘッダーを作成します。JavaScriptは使用していないため、シンプルな構造で導入できます。Flexboxを利用して左右へ要素を配置しているので、HTMLの構造が分かりやすく、初心者でもレイアウトの仕組みを理解しやすいサンプルになっています。

サイト名、メニュー項目、文字サイズ、背景色、余白、メニュー間隔などは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="left-logo-right-menu-header_header">

    <!-- 左側のロゴ -->
    <a class="left-logo-right-menu-header_logo" href="#">
      Sample Site
    </a>

    <!-- 右側のメニュー -->
    <nav class="left-logo-right-menu-header_nav" aria-label="メニュー">
      <a href="#">ホーム</a>
      <a href="#">サービス</a>
      <a href="#">料金</a>
      <a href="#">ブログ</a>
      <a href="#">お問い合わせ</a>
    </nav>

  </header>

</body>
</html>

ファイル構成と設置方法

このサンプルはHTMLファイルとCSSファイルの2つで構成されています。HTMLファイルにヘッダーの構造を記述し、CSSファイルでロゴとメニューのレイアウトや文字サイズ、背景色、余白などを設定します。JavaScriptは使用していないため、HTMLとCSSだけで左側にロゴ、右側にメニューを配置したヘッダーを作成できます。 

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

index.htmlをブラウザで開くと、左側にロゴ、右側にメニューを配置したヘッダーを確認できます。サイト名やメニュー項目はHTMLを書き換えることで自由に変更できます。文字色、背景色、ヘッダーの高さ、余白、メニュー間隔などのデザインはstyle.cssから調整できます。

コメント