基本的なWEBサイトの構造とヘッダーデザインの作り方

こんにちは、フローです。

今回から、HTMLとCSSを使用して、

一般的によく使われるWebデザインテンプレートを紹介していきます。

初めての方でも安心して読み進められるように、分かりやすく丁寧に説明していきます。

今回は、Webサイトを作る際の基本的な構造とヘッダーデザインの作り方を紹介します。

1 WEBサイトの基本的な構造
2 ヘッダーデザインの作り方
3 まとめ

WEBサイトの基本的な構造

まずは、一般的なWebサイトの構造を理解しましょう。大体のWebサイトは以下の4つのセクションから構成されます。

ヘッダー: サイトのロゴ、ナビゲーションメニューなどが配置されます。
メイン: 主要なコンテンツが配置されます。
サイドバー: 追加情報、リンク、広告などが配置されます。
フッター: サイトの情報、著作権情報、連絡先等が配置されます。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <header>
    <!-- Header contents -->
  </header>

  <main>
    <!-- Main contents -->
  </main>

  <aside>
    <!-- Sidebar contents -->
  </aside>

  <footer>
    <!-- Footer contents -->
  </footer>
</body>
</html>

ここで注意すべき点は、

<meta name="viewport" content="width=device-width, initial-scale=1">です。

このメタタグは、ウェブページがモバイルデバイスの画面幅に適応するように指示します。

これにより、レスポンシブデザインの基礎が作られます。

ヘッダーデザインの作り方

ヘッダーデザインは通常、サイトのロゴとナビゲーションメニューを含みます。

今回は、サンプルとして、ロゴをテキストで表示し、

ナビゲーションメニューをリンクリストで作成します。

<header>
  <div class="logo">
    <h1>Company Name</h1>
  </div>
  <nav>
    <ul>
      <li><a href="#home">ホーム</a></li>
      <li><a href="#about">会社情報</a></li>
      <li><a href="#services">サービス</a></li>
      <li><a href="#contact">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

これに対応するCSSは次の通りです。

header {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background-color: #333;
  color: #fff;
}

.logo h1 {
  font-size: 24px;
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
}

nav ul li {
  margin-left: 15px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 600px) {
  header {
    flex-direction: column;
  }
  nav ul {
    flex-direction: column;
    text-align: center;
  }
}

※コードペンの表示は0.5×がオススメです。

このCSSは、ヘッダーの全体的なレイアウトをflexを使って定義し、

要素間の余白を適切に設定しています。

また、背景色と文字色を設定しています。

ロゴ（ここではテキスト）のフォントサイズを24pxに設定し、

ナビゲーションメニューはリストのスタイルを消して、各要素を水平に並べています。

また、リンクテキストのデコレーション（下線など）を消して、色を白に設定しています。

レスポンシブデザインを考慮し、ビューポートの幅が600px以下の場合は、

ヘッダーとナビゲーションメニューを垂直に並べるようにしています。

これにより、スマートフォンなどの小さいデバイスで見てもレイアウトが崩れることはありません。