HTMLの要素を完全解説！22個の要素で魅力的なWebページを作ろう

はじめに
- 【2. HTML要素一覧と簡単な説明】
【3. HTML要素の作り方と使い方】
【4. 注意点とカスタマイズ】
【5. 応用例とサンプルコード】
まとめ

はじめに

この記事を読めば、最短1日でHTML要素を使いこなす方法を身につけることができます。

これからWebページ制作を始める初心者の方や、すでに制作を始めているけれどもっと効率的に作業を進めたいと思っている方におすすめです。

【2. HTML要素一覧と簡単な説明】

HTML要素は、Webページを構成する基本的な部品です。

ここでは、よく使われるHTML要素を一覧で紹介し、簡単な説明をコメントで記載します。

<!-- 文書構造を定義する要素 -->
<!DOCTYPE html> <!-- HTML文書の宣言 -->
<html> <!-- HTML文書全体を囲む -->
<head> <!-- メタ情報やCSSのリンクなど、文書に関する情報を記述 -->
<title> <!-- ページのタイトルを指定 -->
<meta> <!-- 文書に関するメタデータを指定 -->
<link> <!-- CSSや他の文書へのリンクを指定 -->

<!-- セクション要素 -->
<body> <!-- 文書の本体 -->
<header> <!-- ヘッダー情報 -->
<nav> <!-- ナビゲーション -->
<main> <!-- メインコンテンツ -->
<article> <!-- 記事や記事の一部 -->
<aside> <!-- サイドバー -->
<footer> <!-- フッター情報 -->

<!-- テキスト関連要素 -->
<h1>〜<h6> <!-- 見出し -->
<p> <!-- 段落 -->
<em> <!-- 強調（斜体） -->
<strong> <!-- 強調（太字） -->
<small> <!-- 小さい文字で表示 -->
<blockquote> <!-- 引用 -->

<!-- リスト要素 -->
<ol> <!-- 順序付きリスト -->
<ul> <!-- 無順序リスト -->
<li> <!-- リスト項目 -->

<!-- テーブル要素 -->
<table> <!-- テーブル -->
<tr> <!-- 行 -->
<th> <!-- ヘッダーセル -->
<td> <!-- データセル -->

<!-- フォーム関連要素 -->
<form> <!-- フォーム -->
<input> <!-- 入力フィールド -->
<textarea> <!-- 複数行のテキスト入力 -->
<button> <!-- ボタン -->
<label> <!-- ラベル -->
<select> <!-- ドロップダウンリスト -->
<option> <!-- ドロップダウンリストの選択肢 -->

【3. HTML要素の作り方と使い方】

それぞれのHTML要素を作成し、使い方をサンプルコードとともに説明していきます。

(1) 文書構造を定義する要素

<!DOCTYPE html>
<html>
<head>
  <title>サンプルページ</title>
</head>
<body>
  <h1>こんにちは、世界！</h1>
</body>
</html>

上記のサンプルコードでは、<!DOCTYPE html>でHTML文書の宣言を行い、<html>タグで文書全体を囲んでいます。

<head>タグ内にはページのタイトルを<title>タグで指定し、<body>タグ内にはページの本体が記述されています。

この構造をベースに、他の要素を追加していくことで、Webページを作成していきます。

(2) セクション要素

<!DOCTYPE html>
<html>
<head>
  <title>サンプルページ</title>
</head>
<body>
  <header>
    <h1>サイトタイトル</h1>
    <nav>
      <ul>
        <li><a href="#home">ホーム</a></li>
        <li><a href="#about">アバウト</a></li>
        <li><a href="#contact">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h2>記事タイトル1</h2>
      <p>記事の内容1</p>
    </article>
    <article>
      <h2>記事タイトル2</h2>
      <p>記事の内容2</p>
    </article>
  </main>
  <aside>
    <h2>サイドバー</h2>
    <p>サイドバーの内容</p>
  </aside>
  <footer>
    <p>&copy; サイト名 2023</p>
  </footer>
</body>
</html>

上記のサンプルコードでは、<header>タグでヘッダー情報を、<nav>タグでナビゲーションを、<main>タグでメインコンテンツを、<article>タグで記事を、<aside>タグでサイドバーを、そして<footer>タグでフッター情報を定義しています。

(3) テキスト関連要素

<p>通常の文章は<em>ここで強調</em>されています。<strong>重要なポイント</strong>がある場合は、<small>小さい文字で表示</small>することもあります。</p>
<blockquote>これは引用の例です。</blockquote>

このサンプルコードでは、<p>タグで段落を作成し、<em>タグで強調（斜体）、<strong>タグで重要なポイント（太字）、<small>タグで小さい文字表示を行っています。また、<blockquote>タグで引用を表現しています。

(4) リスト要素

<ol>
  <li>順序付きリスト1</li>
  <li>順序付きリスト2</li>
</ol>
<ul>
  <li>無順序リスト1</li>
  <li>無順序リスト2</li>
</ul>

上記のサンプルコードでは、<ol>タグで順序付きリストを、<ul>タグで無順序リストを作成しています。

リスト項目は<li>タグで定義します。

(5) テーブル要素

<table>
  <tr>
    <th>ヘッダー1</th>
    <th>ヘッダー2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
  <tr>
    <td>データ3</td>
    <td>データ4</td>
  </tr>
</table>

このサンプルコードでは、<table>タグでテーブルを作成し、<tr>タグで行を定義しています。

また、<th>タグでヘッダーセル、<td>タグでデータセルを指定しています。

(6) フォーム関連要素

<form>
  <label for="username">ユーザー名：</label>
  <input type="text" id="username" name="username" placeholder="ユーザー名を入力">
  <br>
  <label for="password">パスワード：</label>
  <input type="password" id="password" name="password" placeholder="パスワードを入力">
  <br>
  <label for="comment">コメント：</label>
  <textarea id="comment" name="comment" rows="4" cols="40"></textarea>
  <br>
  <label for="gender">性別：</label>
  <select id="gender" name="gender">
    <option value="male">男性</option>
    <option value="female">女性</option>
  </select>
  <br>
  <button type="submit">送信</button>
</form>

上記のサンプルコードでは、<form>タグでフォームを作成し、<input>タグで入力フィールド、<textarea>タグで複数行のテキスト入力、<button>タグでボタンを指定しています。

また、<label>タグでラベルを指定し、<select>および<option>タグでドロップダウンリストを作成しています。

【4. 注意点とカスタマイズ】

HTML要素を使用する際には、下記の注意点を押さえておくとより効果的に活用できます。

タグは正しく閉じることが重要です。閉じ忘れるとレイアウトが崩れる原因となります。
HTML要素の属性を使って、詳細な設定やカスタマイズが可能です。例えば、<input>タグのtype属性で入力フィールドの種類を指定できます。
CSSを使って、要素の見た目をカスタマイズすることができます。例えば、<h1>タグの文字色を変更することができます。

【5. 応用例とサンプルコード】

ここでは、これまで説明したHTML要素を組み合わせた応用例をいくつか紹介します。

(1) レスポンシブデザインの実装

<!DOCTYPE html>
<html>
<head>
  <title>レスポンシブデザインのサンプル</title>
  <style>
    /*スマホやタブレット用のCSS*/
    @media screen and (max-width: 768px) {
      header, main, aside, footer {
        width: 100%;
      }
    }
    /*PC用のCSS*/
    @media screen and (min-width: 769px) {
      header, main, aside, footer {
        display: flex;
        width: 100%;
      }
      main {
        flex-grow: 1;
      }
    }
  </style>
</head>
<body>
  <header>ヘッダー</header>
  <main>メインコンテンツ</main>
  <aside>サイドバー</aside>
  <footer>フッター</footer>
</body>
</html>

このサンプルコードでは、CSSのメディアクエリを使って、画面サイズに応じてレイアウトが変更されるレスポンシブデザインを実装しています。

(2) イメージギャラリーの作成

<!DOCTYPE html>
<html>
<head>
  <title>イメージギャラリーのサンプル</title>
  <style>
    .gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    .gallery img {
      margin: 5px;
      width: 150px;
      height: 150px;
    }
  </style>
</head>
<body>
  <div class="gallery">
    <img src="画像1のURL" alt="画像1の説明">
    <img src="画像2のURL" alt="画像2の説明">
    <img src="画像3のURL" alt="画像3の説明">
    <!-- 他の画像も追加 -->
  </div>
</body>
</html>

このサンプルコードでは、CSSのフレックスボックスを使って、画像を並べたイメージギャラリーを作成しています。

(3) アコーディオンメニューの作成

<!DOCTYPE html>
<html>
<head>
  <title>アコーディオンメニューのサンプル</title>
  <style>
    .accordion {
      display: flex;
      flex-direction: column;
    }
    .accordion input {
      display: none;
    }
    .accordion input:checked + .content {
      max-height: 300px;
    }
    .accordion .title {
      background-color: #f1f1f1;
      padding: 5px;
      cursor: pointer;
    }
    .accordion .content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s;
      padding: 5px;
    }
  </style>
</head>
<body>
  <div class="accordion">
    <label class="title" for="item1">メニュー1</label>
    <input type="checkbox" id="item1">
    <div class="content">
      メニュー1の内容
    </div>
    <label class="title" for="item2">メニュー2</label>
    <input type="checkbox" id="item2">
    <div class="content">
      メニュー2の内容
    </div>
    <label class="title" for="item3">メニュー3</label>
    <input type="checkbox" id="item3">
    <div class="content">
      メニュー3の内容
    </div>
  </div>
</body>
</html>

このサンプルコードでは、CSSのtransitionプロパティを使って、クリックで開閉するアコーディオンメニューを作成しています。

以上のように、HTML要素を組み合わせて応用することで、さまざまなWebページのデザインや機能を実現できます。

HTML要素を理解し、適切に使い分けることが大切です。