HTML/CSS入門編｜2章：HTMLマークアップをしよう

INDEX

HTML/CSS入門編 2章：HTMLマークアップをしよう

本章では、1章で学んだHTMLの基礎知識をベースに、さまざまなHTMLタグを使いながら、HTMLマークアップの方法を学びます。

【2-1】HTMLマークアップとは？

HTMLタグでマークアップされていないテキストは、改行もなくダラダラと文字が横一列に連なった状態でブラウザに表示されます。
※下記の画像「ブラウザプレビュー（マークアップ前）」を参照
これでは人間にとって読みにくい上に、ブラウザやコンピュータにとっても、情報として読み取ることが困難です。
そこで、用途に適したHTMLタグを利用して情報を整理する必要が生じます。
この作業のことを、「HTML文書の構造化」または「HTMLマークアップ」と呼びます。

まずは、以下の2種類のサンプルコードとブラウザプレビューを見比べてみましょう。

HTMLのコード中には、まだ学習していないタグがたくさん含まれていますが、気にせず、見た目の違いに着目してください。

■ マークアップ前のHTMLファイル

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>みんなのパスタレシピ</title>
</head>
<body>
    みんなのパスタレシピ
    このページでは、みんなが大好きなパスタ、ペペロンチーノとカルボナーラのレシピをご紹介します！
    ぜひ自分でつくって食べてみてね！
    ペペロンチーノ
    ペペロンチーノの写真
    材料
    にんにく・・・・・1片
    鷹の爪・・・・・1つ
    イタリアンパセリ・・・・・適量
    オリーブオイル・・・・・適量
    パスタ麺・・・・・80g
    作り方
    フライパンにオリーブオイルを大さじ2入れる。
    にんにくと鷹の爪を入れて弱火で加熱する。
    同時にパスタを茹ではじめる。
    にんにくの香りが立ってからイタリアンパセリを入れて茹で汁を加える。
    少し早めに上げたパスタをフライパンに入れる。
    ソースを絡めたら完成。
    カルボナーラ
    カルボナーラの写真
    材料
    卵・・・・・1個
    パンチェッタ・・・・・40g
    パルミジャーノ・レッジャーノ・・・・・20g
    生クリーム・・・・・40cc
    黒胡椒・・・・・少々
    オリーブオイル・・・・・適量
    パスタ麺・・・・・80g
    作り方
    パスタを茹ではじめる。
    生クリームと卵とパルミジャーノ・レッジャーノをボールの中で混ぜてソースを作っておく。
    フライパンにパンチェッタとオリーブオイルを入れて中火で炒める。
    弱火にしてから茹で上がったパスタをフライパンに入れ、2.のソースもいれる。
    パスタとソースを混ぜてあえる。
    皿に盛りつけてから黒胡椒をかけて完成。
    Copyright &copy; pasta for everyone All Rights Reserved.
</body>
</html>

HTML/CSS入門編サンプルコード2-1

■ ブラウザプレビュー（マークアップ前）

■ マークアップ後のHTMLファイル

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/style.css" />
    <title>みんなのパスタレシピ</title>
  </head>
  <body>
    <div class="wrapper">
      <h1>みんなのパスタレシピ</h1>

      <p class="text">
        このページでは、みんなが大好きなパスタ、ペペロンチーノとカルボナーラのレシピをご紹介します！<br />
        ぜひ自分でつくって食べてみてね！
      </p>

      <h2>ペペロンチーノ</h2>
      <img src="images/peperoncino.jpg" alt="ペペロンチーノ">

      <h3>材料</h3>

      <ul>
        <li>にんにく・・・・・1片</li>
        <li>鷹の爪・・・・・1つ</li>
        <li>イタリアンパセリ・・・・・適量</li>
        <li>オリーブオイル・・・・・適量</li>
        <li>パスタ麺・・・・・80g</li>
      </ul>

      <h3>作り方</h3>
      <ol>
        <li>フライパンにオリーブオイルを大さじ2入れる。</li>
        <li>にんにくと鷹の爪を入れて弱火で加熱する。</li>
        <li>同時にパスタを茹ではじめる。</li>
        <li>
          にんにくの香りが立ってからイタリアンパセリを入れて茹で汁を加える。
        </li>
        <li>少し早めに上げたパスタをフライパンに入れる。</li>
        <li>ソースを絡めたら完成。</li>
      </ol>

      <h2>カルボナーラ</h2>
      <img src="images/carbonara.jpg" alt="カルボナーラ">

      <h3>材料</h3>

      <ul>
        <li>卵・・・・・1個</li>
        <li>パンチェッタ・・・・・40g</li>
        <li>パルミジャーノ・レッジャーノ・・・・・20g</li>
        <li>生クリーム・・・・・40cc</li>
        <li>黒胡椒・・・・・少々</li>
        <li>オリーブオイル・・・・・適量</li>
        <li>パスタ麺・・・・・80g</li>
      </ul>

      <h3>作り方</h3>
      <ol>
        <li>パスタを茹ではじめる。</li>
        <li>
          生クリームと卵とパルミジャーノ・レッジャーノをボールの中で混ぜてソースを作っておく。
        </li>
        <li>フライパンにパンチェッタとオリーブオイルを入れて中火で炒める。</li>
        <li>
          弱火にしてから茹で上がったパスタをフライパンに入れ、2.のソースもいれる。
        </li>
        <li>パスタとソースを混ぜてあえる。</li>
        <li>皿に盛りつけてから黒胡椒をかけて完成。</li>
      </ol>

      <p class="copyright">
        Copyright &copy; pasta for everyone All Rights Reserved.
      </p>
    </div>
  </body>
</html>

HTML/CSS入門編サンプルコード2-2

■ ブラウザプレビュー（マークアップ後）

マークアップ前のブラウザ表示と比べて、マークアップ後のブラウザ表示の方が格段に内容がわかりやすくなっています。

Webページ制作は、HTMLタグを使い情報を適切にマークアップ（構造化）するところからスタートし、その後、CSSによるスタイリングを行うのが、通常の制作の流れです。
それでは、主要なHTMLタグを使い、マークアップの練習をしてみましょう。

演習素材について
本章では、「2章HTMLマークアップをしよう」フォルダ内の演習データを使用します。
「2章HTMLマークアップをしよう」フォルダの中には、「start」と「fin」フォルダが入っています。

「2章HTMLマークアップをしよう」フォルダ
- start：作業前のデータが入っています。
- fin：完成データが入っています。

演習を行う際には、「start」フォルダ内のファイルを使用してください。
自分で書いたコードがうまく表示されないときは、「fin」フォルダ内の完成データとの違いを探してみると良いでしょう。

※「HTML/CSS入門編はじめに - Webページのことを知ろう」の「【0-4】HTML/CSS 入門編演習素材のダウンロード」節で、本教材の演習で使用するデータをまとめてダウンロードすることができます。

【2-2】HTMLマークアップをしてみよう

原稿の情報構造を考えよう

Webコンテンツの大枠の情報構造は、タイトル、見出し、段落テキスト、箇条書きリスト、リンク、図版、表組などから成り立っています。
まずはこれからマークアップする次の原稿を読んで、この記事のおおまかな情報構造を考えてみましょう。
見出しにするべきテキスト、箇条書きにするべきテキスト、本文として段落分けするべきテキストが見えてきませんか？

みんなのパスタレシピ

このページでは、みんなが大好きなパスタ、ペペロンチーノとカルボナーラのレシピをご紹介します！
ぜひ自分でつくって食べてみてね！

ペペロンチーノ
材料
にんにく・・・・・1片
鷹の爪・・・・・1つ
イタリアンパセリ・・・・・適量
オリーブオイル・・・・・適量
パスタ麺・・・・・80g

作り方
フライパンにオリーブオイルを大さじ2入れる。
にんにくと鷹の爪を入れて弱火で加熱する。
同時にパスタを茹ではじめる。
にんにくの香りが立ってからイタリアンパセリを入れて茹で汁を加える。
少し早めに上げたパスタをフライパンに入れる。
ソースを絡めたら完成。

カルボナーラ
材料
卵・・・・・1個
パンチェッタ・・・・・40g
パルミジャーノ・レッジャーノ・・・・・20g
生クリーム・・・・・40cc
黒胡椒・・・・・少々
オリーブオイル・・・・・適量
パスタ麺・・・・・80g

作り方
パスタを茹ではじめる。
生クリームと卵とパルミジャーノ・レッジャーノをボールの中で混ぜてソースを作っておく。
フライパンにパンチェッタとオリーブオイルを入れて中火で炒める。
弱火にしてから茹で上がったパスタをフライパンに入れ、2.のソースもいれる。
パスタとソースを混ぜてあえる。
皿に盛りつけてから黒胡椒をかけて完成。

Copyright © pasta for everyone All Rights Reserved.

マークアップする原稿

マークアップを行う意義

見出しや箇条書き、段落分けを用いて、ユーザー（閲覧者）が必要な情報をすばやく見つけられる文書構造にすること。
ユーザーの理解を助けるために図表を活用し、情報を視覚的に伝達すること。

マークアップ作業の際には、Webページの制作者が自分の判断で適切と思われるHTMLタグを選定し、構造化を行うため、マークアップの方法には制作者による違いが生じやすく、絶対の正解というものが存在しません。
ですので、明らかに不適切なマークアップでなければ「OK」であり、正解は複数あると考えてください。
本教材で解説するマークアップの仕方は、その数ある正解のうちのひとつです。

見出しをマークアップしよう

「start」フォルダ内の「pasta-recipe.html」をVS Codeで開き、ブラウザプレビューをしてください。
<body></body>内に、上記の原稿が入力されています。

■ pasta-recipe.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>みんなのパスタレシピ</title>
</head>

<body>
    みんなのパスタレシピ
    このページでは、みんなが大好きなパスタ、ペペロンチーノとカルボナーラのレシピをご紹介します！
    ぜひ自分でつくって食べてみてね！
    ペペロンチーノ
    ペペロンチーノの写真
    材料
    にんにく・・・・・1片
    鷹の爪・・・・・1つ
    イタリアンパセリ・・・・・適量
    オリーブオイル・・・・・適量
    パスタ麺・・・・・80g
    作り方
    フライパンにオリーブオイルを大さじ2入れる。
    にんにくと鷹の爪を入れて弱火で加熱する。
    同時にパスタを茹ではじめる。
    にんにくの香りが立ってからイタリアンパセリを入れて茹で汁を加える。
    少し早めに上げたパスタをフライパンに入れる。
    ソースを絡めたら完成。
    カルボナーラ
    カルボナーラの写真
    材料
    卵・・・・・1個
    パンチェッタ・・・・・40g
    パルミジャーノ・レッジャーノ・・・・・20g
    生クリーム・・・・・40cc
    黒胡椒・・・・・少々
    オリーブオイル・・・・・適量
    パスタ麺・・・・・80g
    作り方
    パスタを茹ではじめる。
    生クリームと卵とパルミジャーノ・レッジャーノをボールの中で混ぜてソースを作っておく。
    フライパンにパンチェッタとオリーブオイルを入れて中火で炒める。
    弱火にしてから茹で上がったパスタをフライパンに入れ、2.のソースもいれる。
    パスタとソースを混ぜてあえる。
    皿に盛りつけてから黒胡椒をかけて完成。
    Copyright &copy; pasta for everyone All Rights Reserved.
</body>

</html>

HTML/CSS入門編サンプルコード2-3

■ ブラウザプレビュー

原稿の1行目のテキスト「みんなのパスタレシピ」は、この記事の全体を要約した大見出しにあたるテキストです。
この原稿の内容は、ペペロンチーノとカルボナーラという2種類のパスタのレシピ記事です。

章にあたるそれぞれのレシピ記事の先頭のテキスト「ペペロンチーノ」と「カルボナーラ」が中見出しです。
「ペペロンチーノ」と「カルボナーラ」のそれぞれのレシピ記事は「材料」と「作り方」という節に分かれています。
節にあたる「材料」と「作り方」が小見出しです。

HTMLでは、大見出し、中見出し、小見出しを表現するために、h1~h6までの見出しタグが用意されています。
要素名であるh1〜h6の「h」はheading（「見出し」の意）の頭文字です。
1から6の番号はそれぞれの見出しの重要度を表しており、h1は、1番重要な見出し（大見出し）h2は、2番目に重要な見出し（中見出し）、h3は3番目に重要な見出し（小見出し）という意味になります。

大見出しをマークアップしよう

まずは「大見出し」をマークアップします。
原稿テキスト1行目の「みんなのパスタレシピ」を開始タグと終了タグで囲みます。

■ h1タグでマークアップしたHTMLのコード

<h1>みんなのパスタレシピ</h1>

HTML/CSS入門編サンプルコード2-4

テキストをh1タグでマークアップすると、大見出しらしく文字が大きく、太字になります。

■ ブラウザプレビュー

■ h1タグのマークアップからブラウザプレビューまで
※VS Codeの拡張機能「Live Server」と「htmltagwrap」を利用しています。

HTML/CSS 2-1

動画のように、テキストをタグで囲む際には、VS Codeの拡張機能「htmltagwrap」をインストールして使うととても便利です。

■ htmltagwrapの使い方

1. 拡張機能を検索する。
2. 「インストール」ボタンをクリックする。

HTML/CSS 2-2

3. マークアップしたいテキストを選択する。
4. ショートカットキー（Mac : option+W　Win : alt+W）を押す。
5. 選択したテキストが<p></p>で囲まれる。
6. 要素名を入力すると、開始タグと終了タグの要素名が同時に書き換わる。

HTML/CSS 2-3

中見出しをマークアップしよう

次に「中見出し」をマークアップします。
原稿テキストの「ペペロンチーノ」と「カルボナーラ」を、それぞれ開始タグと終了タグで囲みます。

■ h2タグでマークアップしたHTMLのコード

<h2>ペペロンチーノ</h2>
・・・中略・・・
<h2>カルボナーラ</h2>

HTML/CSS入門編サンプルコード2-5

太字になり前後が改行されますが、文字サイズはh1タグよりも少し小さくなります。

■ ブラウザプレビュー

■ h2タグのマークアップからブラウザプレビューまで
※VS Codeの拡張機能「Live Server」と「htmltagwrap」を利用しています。

HTML/CSS 2-4

小見出しをマークアップしよう

続いて「小見出し」をマークアップします。
原稿テキストの「材料」と「作り方」（それぞれ2箇所あります）を、開始タグ（<h3>）と終了タグ（</h3>）で囲みます。

■ h3タグでマークアップしたHTMLのコード

<h3>材料</h3>
・・・中略・・・
<h3>作り方</h3>

HTML/CSS入門編サンプルコード2-6

太字になり前後が改行されますが、文字サイズはh2タグよりも少し小さくなります。

■ ブラウザプレビュー

■ h3タグのマークアップからブラウザプレビューまで
※VS Codeの拡張機能「Live Server」と「htmltagwrap」を利用しています。

HTML/CSS 2-5

■ h1〜h3タグでマークアップしたHTMLのコード

<body>
    <h1>みんなのパスタレシピ</h1>
    このページでは、みんなが大好きなパスタ、ペペロンチーノとカルボナーラのレシピをご紹介します！
    ぜひ自分でつくって食べてみてね！
    <h2>ペペロンチーノ</h2>
    ペペロンチーノの写真
    <h3>材料</h3>
    にんにく・・・・・1片
    鷹の爪・・・・・1つ
    イタリアンパセリ・・・・・適量
    オリーブオイル・・・・・適量
    パスタ麺・・・・・80g
    <h3>作り方</h3>
    フライパンにオリーブオイルを大さじ2入れる。
    にんにくと鷹の爪を入れて弱火で加熱する。
    同時にパスタを茹ではじめる。
    にんにくの香りが立ってからイタリアンパセリを入れて茹で汁を加える。
    少し早めに上げたパスタをフライパンに入れる。
    ソースを絡めたら完成。
    <h2>カルボナーラ</h2>
    カルボナーラの写真
    <h3>材料</h3>
    卵・・・・・1個
    パンチェッタ・・・・・40g
    パルミジャーノ・レッジャーノ・・・・・20g
    生クリーム・・・・・40cc
    黒胡椒・・・・・少々
    オリーブオイル・・・・・適量
    パスタ麺・・・・・80g

    <h3>作り方</h3>
    パスタを茹ではじめる。
    生クリームと卵とパルミジャーノ・レッジャーノをボールの中で混ぜてソースを作っておく。
    フライパンにパンチェッタとオリーブオイルを入れて中火で炒める。
    弱火にしてから茹で上がったパスタをフライパンに入れ、2.のソースもいれる。
    パスタとソースを混ぜてあえる。
    皿に盛りつけてから黒胡椒をかけて完成。

    Copyright &copy; pasta for everyone All Rights Reserved.
</body>

HTML/CSS入門編サンプルコード2-7

段落テキストをマークアップしよう

段落テキストをマークアップします。
段落とは、ひとまとまりの文章のことで、通常は見出しに続く文章を段落として扱います。
要素名である「p」はparagraph（「段落」の意）の頭文字です。
pタグでマークアップされたテキストは、文字サイズに変化はありませんが、前後が改行され、余白ができます。

この原稿では以下の部分を段落テキストとして扱うと良いでしょう。

「このページでは、みんなが大好きなパスタ、ペペロンチーノとカルボナーラのレシピをご紹介します！ぜひ自分でつくって食べてみてね！」
最後のコピーライト表記「Copyright © pasta for everyone All Rights Reserved.」

■ pタグでマークアップしたHTMLのコード

<p>
  このページでは、みんなが大好きなパスタ、ペペロンチーノとカルボナーラのレシピをご紹介します！
  ぜひ自分でつくって食べてみてね！
</p>
・・・中略・・・
<p>Copyright &copy; pasta for everyone All Rights Reserved.</p>

HTML/CSS入門編サンプルコード2-8

■ ブラウザプレビュー

■ pタグのマークアップからブラウザプレビューまで
※VS Codeの拡張機能「Live Server」と「htmltagwrap」を利用しています。

HTML/CSS 2-6

著作権記号の表示方法

文字参照

「©」

応用・豆知識

コピーライト表記には、Webページのフッター（末尾）情報を示す<footer>タグを使うと、より意味的に適切なマークアップになります。
このように、文書の構造や意味合いに応じて最適なタグを選ぶ意識を持つことが質の高いHTMLマークアップに繋がります。

段落テキストを途中で改行しよう

pタグでマークアップした「このページでは、みんなが大好きなパスタ、ペペロンチーノとカルボナーラのレシピをご紹介します！ぜひ自分でつくって食べてみてね！」の部分は、エディター内では「ぜひ」の前に改行を入れてあるのですが、ブラウザ表示ではその改行が反映されません。
段落テキストの途中で改行したい箇所には、brタグを挿入し、強制的に改行する必要があります。
brのような領域指定の必要がなく終了タグを持たない要素のことを、空要素といいます。
brはline break（改行）の意味です。

■ brタグでマークアップしたHTMLのコード

<p>
  このページでは、みんなが大好きなパスタ、ペペロンチーノとカルボナーラのレシピをご紹介します！<br>
  ぜひ自分でつくって食べてみてね！
</p>

HTML/CSS入門編サンプルコード2-9

■ ブラウザプレビュー

■ brタグのマークアップからブラウザプレビューまで

HTML/CSS 2-7

箇条書きリストをマークアップしよう

箇条書きリストは、ulタグでマークアップする順序なしリストと、olタグでマークアップする番号付きリストの２種類があります。
順序なしリストは、箇条書きの各項目の先頭に「・」（マーカー）が表示されます。
番号付きリストは、箇条書きの各項目の先頭に「1、2、3・・・」と連番が表示されます。
ulはunordered list、olはordered listの略です。

ul要素とol要素は、これまでに学習した見出しや段落のタグのように、一対の開始タグと終了タグのみで成り立っていません。
個別の箇条書き項目を意味づけするためのタグとしては、liタグが用意されており、2種類のタグが入れ子構造になるように記述することで、はじめて1セットの箇条書きリストが作成されます。
liはlist itemの略です。
ul、olタグのみを単独で使ったり、liタグのみを単独で使ったりすることはできません。

■ 順序なしリスト（ulタグ）

■ 順序なしリストのブラウザ表示

■ 番号付きリスト（olタグ）

■ 番号付きリストのブラウザ表示

今回は、「材料」のコンテンツを順序なしリスト（ulタグ）で、「作り方」のコンテンツを番号付きリスト（olタグ）でマークアップします。

■ ulタグ、olタグとliタグでマークアップしたHTMLのコード

<h2>ペペロンチーノ</h2>
    ペペロンチーノの写真
<h3>材料</h3>
    <ul>
        <li>にんにく・・・・・1片</li>
        <li>鷹の爪・・・・・1つ</li>
        <li>イタリアンパセリ・・・・・適量</li>
        <li>オリーブオイル・・・・・適量</li>
        <li>パスタ麺・・・・・80g</li>
    </ul>
    
    <h3>作り方</h3>
    <ol>
        <li>フライパンにオリーブオイルを大さじ2入れる。</li>
        <li>にんにくと鷹の爪を入れて弱火で加熱する。</li>
        <li>同時にパスタを茹ではじめる。</li>
        <li>にんにくの香りが立ってからイタリアンパセリを入れて茹で汁を加える。</li>
        <li>少し早めに上げたパスタをフライパンに入れる。</li>
        <li>ソースを絡めたら完成。</li>
    </ol>
    
    <h2>カルボナーラ</h2>
    カルボナーラの写真
   
    <h3>材料</h3>
    <ul>
        <li>卵・・・・・1個</li>
        <li>パンチェッタ・・・・・40g</li>
        <li>パルミジャーノ・レッジャーノ・・・・・20g</li>
        <li>生クリーム・・・・・40cc</li>
        <li>黒胡椒・・・・・少々</li>
        <li>オリーブオイル・・・・・適量</li>
        <li>パスタ麺・・・・・80g</li>
    </ul>
    
    <h3>作り方</h3>
    <ol>
        <li>パスタを茹ではじめる。</li>
        <li>生クリームと卵とパルミジャーノ・レッジャーノをボールの中で混ぜてソースを作っておく。</li>
        <li>フライパンにパンチェッタとオリーブオイルを入れて中火で炒める。</li>
        <li>弱火にしてから茹で上がったパスタをフライパンに入れ、2.のソースもいれる。</li>
        <li>パスタとソースを混ぜてあえる。</li>
       <li>皿に盛りつけてから黒胡椒をかけて完成。</li>
    </ol>

HTML/CSS入門編サンプルコード2-10

■ ブラウザプレビュー

■ ulタグ、olタグのマークアップからブラウザプレビューまで
※VS Codeの拡張機能「Live Server」と「htmltagwrap」を利用しています。

HTML/CSS 2-8

ここまでに使用したHTMLタグは、一般的なWebサイト制作業務のときに、非常に使用頻度が高いものばかりですので、何度も入力の練習をして覚えてしまいましょう。

これで「HTML/CSS入門編 2章：HTMLマークアップをしよう」の解説を終わります。
次の章に進みましょう。

前の章に戻る次の章に進む