今回の概要と目標 0:25

では、いよいよ<body>〜</body>の中で使うタグを学習していきます。まずはテキスト関連でよく使う段落を表す p要素と、見出しを表す h1 〜 h6 要素学習しましょう。

今回学習する要素
要素名 意味・役割
p 段落を表す
h1、 h2、 h3、h4、h5、 h6 見出しを表す
今回のゴール

RERUN

新しいウインドウで表示する

段落は、<p> タグで挟む 1:01

p 要素は、paragraph（パラグラフ）の略で段落を表します。Webサイト上のほとんどの説明文や概要文は、このp 要素になります。

カテゴリ
フロー・コンテンツ
コンテンツ・モデル
フレージング・コンテンツ

p 要素のサンプル

p 要素は、Webサイトの上の段落 （概要文や説明文など）ごとに、<p>タグを使って表します。

p 要素の例
<p>
  まず最初に僕が言いたいのは、Webクリエーターになりたいという事です。...
</p>
<p>
  2つめに言いたいことは、ホームページという言葉は和製英語だという事です。...
</p>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

見出しは、<h1> 〜 <h6> タグで挟む 2:19

h1 要素 〜 h6 要素の " h " はheading（ヘディング）の略で見出しを表す要素です。文章の各見出しは、 h1、 h2 、 h3 、 h4 、 h5 、 h6 の6つの要素を、階層によって使い分けます。最も上位の階層の見出しが h1 要素、もっとも下位の階層の見出しが h6 要素になります。

カテゴリ
コンテンツ・モデル
フレージング・コンテンツ

h1要素 〜 h6要素のサンプル

見出しは、階層構造を意識して<h1>タグ 〜 <h6>タグ を使い分けてマークアップします。

階層構造を意識した見出し要素の例
<h1>ジャンル別僕が思う美味しいご飯屋さん</h1>
<p>僕の主観で美味しいと思ったご飯屋さんをジャンル別で紹介します。</p>

<h2>和食</h2>

<h3>お寿司</h3>
<p>お寿司の美味しいお店は...</p>

<h4>〇〇寿司店</h4>
<p>ここのお寿司は...</p>
<h4>□□寿司店</h4>
<p>ここのお寿司は...</p>

<h3>うどん</h3>
<p>うどんの美味しいお店は...</p>

<h4>〇〇うどん</h4>
<p>ここのうどんは...</p>

<h2>洋食</h2>

<h3>ビーフストロガノフ</h3>
<p>ビーフストロガノフの美味しいお店は...</p>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

注意点

h1 〜 h6 要素は、通常見出しのレベルによって文字のが大きくなりますが、文字の大きさを変えるための要素ではありません。従って、文字サイズの大きさを変える目的では使用しないでください。Webサイトの上の見た目を変更する場合は全て、CSS（Webサイト上の見た目を定義する言語）という言語を使って定義します。

段落と見出しの要素を使ってみよう 6:48

それでは、段落を表す p 要素と、見出しを表す h1 要素 〜 h6 要素を記述してみましょう。

  1. 「Chapter06」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に、段落には、<p> タグを、見出しには、<h1> 〜 <h3> タグでマークアップ
Chapter06/index.html
<h1>冒険のはじまり</h1>
<p>いよいよ伝説のWebクリエーターになるための冒険がはじまる。まずは、冒険の目的と仲間を紹介する。</p>

<h2>冒険の目的</h2>
<p>どんな難題もWebで解決できる伝説のWebクリエーターになる</p>

<h2>仲間</h2>
<h3>ボブ</h3>
<p>Webディレクターになりたいテンションが高めの熱い男。</p>
<h3>ムカミ</h3>
<p>Webプログラマーになりたいちょっと変わり者の男。</p>
<h3>メアリー</h3>
<p>Webデザイナーになりたい天然で気が強い女の子。</p>
  1. 上書き保存し、ブラウザで確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

練習問題 12:11

「Chapter06」 › 「quest」フォルダ内の「index.html」を開いて下記の問題を解いてみましょう。なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。

    • 文字列「僕に必要なスキル」
    • 文字列「Webサイトを形にするための言語」
    • 文字列「HTML」
    • 文字列「CSS」
    • 文字列「Webサイト制作の考え方」
    • 文字列「Webの特性」
    • 文字列「伝説のWebクリエーター」〜 文字列「しなければならないこと。」
    • 文字列「Webサイトの文書に意味や役割を持たせる言語。」
    • 文字列「Webサイトの見た目を定義するための言語。」
    • 文字列「Webと他のメディアとの違い。」
完成イメージ

RERUN

新しいウインドウで表示する

解答例

まとめ 16:58

p 要素や、h1 〜 h6 要素の使い方はわかりましたか？

  • 段落は、p 要素で表す
  • 見出しは、h1 〜 h6 要素で表す
  • 見出しは、階層構造を意識する