Zenn
💡

セマンティックHTMLで作るSEO強化レスポンシブWebサイト

2024/06/16に公開
CSS
HTML
HTML Standard
tech

私のサイト、アクセス悪すぎ?!

「せっかく頑張って作ったサイトなのに、見に来てもらえない…」

なんて経験ありませんか。

これは、HTMLのセマンティック構造を理解した上でWebサイトを構築することで大きく改善できるんです。
本記事では、簡単なWebサイトを作りながら、セマンティックHTMLとCSSレスポンシブデザインについて解説します。

手を動かしてコーディングすると、画像のようなサイトが作れます。

セマンティックHTMLとは？

セマンティックHTMLとは、Webページの内容に意味を持たせるためのHTMLのことです。
たとえば、<header>や<nav>, <main>, <section>, <article>, <footer>などのタグを使います。

これらのタグを使用することで、検索エンジンにWebサイトコンテンツがどこにあるかを理解しやすい形にできます。
そして、検索エンジンがコンテンツの構造と意味を理解しやすくなり、検索結果の順位が向上します。

他にも、以下のようなメリットが得られます。

  • アクセシビリティの向上：

スクリーンリーダーなどの支援技術がコンテンツを正確に解釈しやすくなるため、
視覚障がい者などのユーザーもwebコンテンツを効果的に利用できるようになります。

  • コードの可読性の向上：

セマンティックタグを使用することで、コードがより自己説明的になります。
要するに、パッと見ですぐに何を書いてるのかが理解しやすくなるわけです。

  • レスポンシブデザイン設計が安易：

セマンティックタグを使用することで、CSSのセレクターが示しているコンテンツがわかりやすくなります。
たとえば、グリットレイアウトとフルードグリッドの使い分けをする際に、タグの目的に合わせてdisplay: grid;とdisplay: flex;をどこに適用させるかをイメージしやすくなる点は大きなメリットです。

ニュースサイトのセマンティック構造の例

セマンティックHTMLのタグを使用してHTMLを書いていきます。

今回は、構造を説明するためにシンプルな書き方をしているので、<class>は使用しません。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ニュースサイトの例</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>ニュースサイト</h1>
      <nav>
        <ul>
          <li><a href="#">ホーム</a></li>
          <li><a href="#">最新ニュース</a></li>
          <li><a href="#">カテゴリー</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <article>
          <h2>記事タイトル</h2>
          <p>この記事の概要をここに書きます。</p>
        </article>
        <article>
          <h2>別の記事タイトル</h2>
          <p>別の記事の概要をここに書きます。</p>
        </article>
      </section>
    </main>
    <aside>
      <h3>人気の記事</h3>
      <p>人気の記事のリストをここに書きます。</p>
    </aside>
    <footer>
      <p>&copy; 2024 ニュースサイト</p>
    </footer>
  </body>
</html>

HTMLコードの解説

基本構造

開く
<!doctype html>
<html lang="ja">

<!doctype html>：
HTML5の文書型宣言。これによって、ブラウザがHTML5で書かれた文書であることを認識します。

<html lang="ja">：
HTML文書の開始タグ。lang="ja"属性は、この文書が日本語で書かれていることを示します。

ヘッド部分

開く
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>記事サイトの例</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="styles.css">
</head>

<meta charset="UTF-8">：
文書の文字エンコーディングをUTF-8に設定します。これにより、日本語など多言語に対応できます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">：
レスポンシブデザインをサポートするための設定。ビューポートの幅をデバイスの幅に合わせ、ズームをしないようにします。

<title>記事サイトの例</title>：
ブラウザのタブや検索エンジンで表示される文書のタイトルを指定します。

<link rel="stylesheet" href="reset.css">：
ブラウザデフォルトのスタイルをリセットするためのCSSファイルを読み込みます。

<link rel="stylesheet" href="styles.css">：
カスタムスタイルを定義するCSSファイルを読み込みます。

ボディ部分

開く
<body>
  <header>
    <h1>ニュースサイト</h1>
    <nav>
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">最新ニュース</a></li>
        <li><a href="#">カテゴリー</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

<header>：
文書のヘッダー部分。サイト全体のヘッダーとして機能し、ロゴやナビゲーションリンクが含まれます。

<h1>ニュースサイト</h1>：
サイトの主要な見出しを表示します。SEOとアクセシビリティの観点から、ページの最上位の見出しは<h1>タグを使用します。

<nav>：
ナビゲーション部分を示すセマンティックなタグ。ユーザーがサイト内を移動するためのリンクを含みます。

<ul>：
リスト項目をグループ化するためのタグ。ここではナビゲーションメニューの項目をリスト化しています。

<li>：
リストの各項目を定義します。

<a href="#">ホーム</a>：
ナビゲーションリンク。href="#"はダミーリンクで、実際には各ページへのリンクが設定されます。

メインコンテンツ部分

開く
<main>
  <section>
    <article>
      <h2>記事タイトル</h2>
      <p>この記事の概要をここに書きます。</p>
    </article>
    <article>
      <h2>別の記事タイトル</h2>
      <p>別の記事の概要をここに書きます。</p>
    </article>
  </section>
</main>

<main>：
主要なコンテンツ部分を示すタグ。SEOとアクセシビリティの観点から、ページの主要な内容をラップするために使用します。

<section>：
関連するコンテンツをグループ化するタグ。ここでは、記事のリストをグループ化しています。

<article>：
独立して再利用可能なコンテンツを示すタグ。ここでは個々の記事を表します。

<h2>記事タイトル</h2>：
各記事の見出し。<h2>は、<h1>よりも下位の見出しとして使用します。

<p>この記事の概要をここに書きます。</p>：
記事の概要を示す段落。

サイドバー部分

開く
<aside>
  <h3>人気の記事</h3>
  <p>人気の記事のリストをここに書きます。</p>
</aside>

<aside>：
メインコンテンツに関連する補足情報を提供するセクション。ここでは、人気の記事のリストを表示します。

<h3>人気の記事</h3>：
サイドバー内の見出し。<h2>よりも下位の見出しとして使用します。

<p>人気の記事のリストをここに書きます。</p>：
サイドバー内の内容を示す段落。

フッター部分

開く
<footer>
  <p>&copy; 2024 ニュースサイト</p>
</footer>

<footer>：
ページのフッター部分。著作権情報や連絡先情報などを含むことが一般的です。

<p>&copy; 2024 ニュースサイト</p>：
著作権情報を表示する段落。

セマンティックHTMLとレスポンシブデザイン

このセマンティックHTMLのタグを使用して、記事サイトをレスポンシブデザインで書いていきます。

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}

header, footer {
  background-color: #333;
  color: #fff;
  padding: 1em;
  text-align: center;
}

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

nav ul li {
  margin: 0 1em;
}

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

nav ul li a:hover {
  color: #fff;
}

main {
  padding: 1em;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 1em;
}

section {
  grid-column: 1;
}

article {
  background-color: #fff;
  padding: 1em;
  border-radius: 0.5em;
  border: 1px solid #ccc;
  margin-bottom: 1em;
}

aside {
  background-color: #e0e0e0;
  padding: 1em;
  border-radius: 0.5em;
  grid-column: 2;
}

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

  nav ul li {
    margin: 0.5em 0;
  }

  main {
    display: flex;
    flex-direction: column;
  }

  section, aside {
    grid-column: auto;
    margin-bottom: 1em;
  }
}

CSSコードの解説

基本スタイル

開く

body

body {
  font-family: Arial, sans-serif; /* ページ全体のフォントを指定 */
  margin: 0;
  padding: 0;
  background-color: #f0f0f0; /* 背景色を薄いグレーに設定 */
}

font-family：
ページ全体のフォントを指定します。この場合、Arialフォントを使用し、Arialが使用できない場合は一般的なサンセリフ体のフォントが使われます。

marginとpadding：
どちらも0に設定して、デフォルトの余白を取り除きます。

background-color：
ページ全体の背景色を薄いグレー（#f0f0f0）に設定します。

header, footer {
  background-color: #333; /* ヘッダーとフッターの背景色を濃いグレーに設定 */
  color: #fff; /* 文字色を白に設定 */
  padding: 1em; /* ヘッダーとフッターの内側に余白を追加 */
  text-align: center; /* 中央寄せ */
}

background-color：
ヘッダーとフッターの背景色を濃いグレー（#333）に設定します。

color：
テキストの色を白（#fff）に設定します。

padding：
内側の余白を1emに設定します。

text-align：
テキストを中央に配置します。

  • ナビゲーションスタイル

nav ul

nav ul {
  list-style: none; /* リストのマーカーを無効にする */
  padding: 0;
  display: flex; /* フレックスボックスを使用して水平に配置 */
  justify-content: center; /* リスト項目を中央に配置 */
}

list-style：
リストマーカー（ディスク、数字など）を無効にします。

padding：
内側の余白を取り除きます。

display: flex;：
フレックスボックスレイアウトを使用して、リスト項目を水平に配置します。

justify-content: center;：
リスト項目を中央に揃えます。

nav ul li {
  margin: 0 1em; /* 各リスト項目の間に余白を追加 */
}

margin：
各リスト項目の左右に1emの余白を追加します。

nav ul li a {
  color: #fc0; /* リンクの文字色を明るい黄色に設定 */
  text-decoration: none; /* 下線を無効にする */
}

nav ul li a:hover {
  color: #fff; /* ホバー時の文字色を白に設定 */
}

color:
リンクの文字色を明るい黄色（#fc0）に設定します。

text-decoration:
リンクの下線を無効にします。

hover効果:
ホバー時にリンクの文字色を白（#fff）に変更します。

メインコンテンツのスタイル

開く

main

main {
  padding: 1em; /* 内側に余白を追加 */
  display: grid; /* グリッドレイアウトを使用 */
  grid-template-columns: 3fr 1fr; /* 3:1の比率で2列に分割 */
  gap: 1em; /* 列間の間隔を設定 */
}

padding：
内側に1emの余白を追加します。

display: grid;：
グリッドレイアウトを使用します。

grid-template-columns：
3:1の比率で2列に分割します。3frは左側の列が3単位、1frは右側の列が1単位を意味します。

gap：
列間に1emの間隔を設定します。

section

section {
  grid-column: 1; /* 1列目に配置 */
}

grid-column：
1列目にセクションを配置します。

article

article {
  background-color: #fff; /* 背景色を白に設定 */
  padding: 1em; /* 内側に余白を追加 */
  border-radius: 0.5em; /* 角を丸くする */
  border: 1px solid #ccc; /* 薄いグレーの境界線を追加 */
  margin-bottom: 1em; /* 下に余白を追加 */
}

background-color：
背景色を白（#fff）に設定します。

padding：
内側に1emの余白を追加します。

border-radius：
角を0.5em丸くします。

border：
1pxの薄いグレー（#ccc）の境界線を追加します。

margin-bottom：
下に1emの余白を追加します。

aside

aside {
  background-color: #e0e0e0; /* 背景色を薄いグレーに設定 */
  padding: 1em; /* 内側に余白を追加 */
  border-radius: 0.5em; /* 角を丸くする */
  grid-column: 2; /* 2列目に配置 */
}

background-color：
背景色を薄いグレー（#e0e0e0）に設定します。

padding：
内側に1emの余白を追加します。

border-radius：
角を0.5em丸くします。

grid-column：
2列目に配置します。

メディアクエリ

開く
@media (max-width: 600px) {
  nav ul {
    flex-direction: column; /* 縦方向にリスト項目を配置 */
    align-items: center; /* リスト項目を中央に配置 */
  }

  nav ul li {
    margin: 0.5em 0; /* リスト項目の上下に余白を追加 */
  }

  main {
    display: flex; /* フレックスボックスを使用して縦方向に配置 */
    flex-direction: column;
  }

  section, aside {
    grid-column: auto; /* グリッド配置をリセット */
    margin-bottom: 1em; /* 下に余白を追加 */
  }
}

  • @media (max-width: 600px)：
    画面幅が600px以下の場合に適用されるスタイルを指定します。

  • nav ul：

    • flex-direction: column：リスト項目を縦方向に配置します。
    • align-items: center;：リスト項目を中央に揃えます。

  • nav ul li：

    • margin: 0.5em 0;：リスト項目の上下に0.5emの余白を追加します。

  • main：

    • display: flex;：フレックスボックスを使用して縦方向に配置します。
    • flex-direction: column;：縦方向に配置します。

  • section, aside：

    • grid-column: auto：グリッド配置をリセットします。
    • margin-bottom: 1em：下に1emの余白を追加します.

参考文献

HTML Living Standard
HTML Living Standard-3.2.1 Semantics
Semantic HTML

MDN Web Docs: CSS Grid Layout
MDN Web Docs: CSS Flexible Box Layout

おわりに

ウィンドウサイズを変更してレスポンシブ対応されていれば、完成です！

セマンティックHTMLによって構造化されたデータは、GoogleChromeやSafariのような検索エンジンが見つけやすくなるそうです。

つまり、人間だけではなく、システムやプログラムにとってもわかりやすくするのが重要だということ。

HTMLに求められているのは、アクセシビリティとセマンティック構造化

これを忘れずにサイト構築を心がけたいですね。

Discussion