【HTML5入門】2-1 段落と見出し

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。

前回のおさらい

前回は、HTMLファイルにおいて良く使われるタグについて、4つのタグをご紹介しました。

今回は、実際の文章を書く際に必要になる、「段落」や「見出し」を表すタグについて、見ていきましょう。

「段落」に使われるタグ

まずは、段落に使われるタグからご紹介していきます。

pタグ

段落に使われるタグは、「pタグ」と呼ばれます。pはparagraph(パラグラフ)の略で、段落を意味する単語です。

divタグやspanタグと同じように閉じタグを用い、<p>〜</p>とすることで、一段落を構成します。

「見出し」に使われるタグ

次に、見出しに使われるタグをご紹介します。

h1~h6タグ

見出しに使われるタグは、h1, h2, h3, h4, h5, h6の6段階あります。hはheadline(ヘッドライン)の略で、本で言うところの「章」や「節」を意味します。

こちらも、閉じタグを用います。

ダミー文章に使われる「Lorem Ipsum」

HTMLにおいては、実際の記述をWebページで確認したい時に、サンプルとなる文章があった方がイメージしやすい場合が沢山あります。そういった場合のために、「Lorem Ipsum(ローレンイプサム)」というタイトルの無意味な文章を差し込むことがあります。

具体的には、下記のような文章となります。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Wikipedia「Lorem Ipsum」より引用(https://ja.wikipedia.org/wiki/Lorem_ipsum

また、Lorem Ipsumを略して「Lipsum(リプサム)」と呼ばれることもあります。

この文章自体は、どんな言語においても意味を持たないことがメリットとされており、意味を考えてしまわずにWebページのデザインのチェックだけしたいような場合に使用されることの多い文章です。

段落と見出しをHTMLに記述してみよう

では、実際に2つのタグを用いて、HTMLファイルに段落と見出しを記述していきましょう。

最初のHTMLは、以下の状態にしておきます。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
  </body>
</html>

段落を追加してみよう

早速、bodyタグの中にpタグを入れて、段落を作ってみましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
    </p>
  </body>
</html>

次に、pタグの中に、先ほどのLorem Ipsumの文章をペーストしていきましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </body>
</html>

ここまでできたら、実際にこのHTMLファイルをWebブラウザで開いてみましょう。すると以下のようになることが確認できると思います。

段落を複数にしてみよう

では次に、段落が複数になった場合にWebブラウザ上でどのような表示になるのかをみていきましょう。pタグ全体を2回ほどコピー&ペーストして、合計3段落のLorem Ipsumが記述されるようにします。コードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </body>
</html>

これをWebブラウザで確認すると、下記画像のようになると思います。

同じ文章が3回表示されていることがわかりますね。そして、段落と段落の間にスペースがあることも確認できます。

このスペースは、pタグ自体による効果ではなく、Webブラウザの初期設定に基づいているものです。本記事では、Google Chromeを使用しています。

見出しを入れてみよう

それでは次に、見出しについてHTMLファイルに記述をしていくことにしましょう。

まずは、一番大きい見出し「h1」を使ってみたいと思います。h1タグを使って、「これはh1です」という文章を表示させてみましょう。コードは下記のようになります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <h1>これはh1です</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </body>
</html>

これをWebブラウザで見てみると、下記画像のようになると思います。

一番上に、大きく「これはh1です」と表示されているのがわかると思います。これもWebブラウザの初期設定で、見出しが段落よりも目立つ表示になるようになっています。

6種類の見出しで見え方はどう変わるのか

では、h2~h6も記述して、Webブラウザで表示させた時にどのように表示が変わるのかを確認していきましょう。

h1タグの下に、h2~h6タグを記述してみます。コードは下記となります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <h1>これはh1です</h1>
    <h2>これはh2です</h2>
    <h3>これはh3です</h3>
    <h4>これはh4です</h4>
    <h5>これはh5です</h5>
    <h6>これはh6です</h6>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </body>
</html>

上記のコードをWebブラウザで確認すると、以下の画像のようになります。

1から6にかけて、どんどんサイズが小さくなっているのがわかりますね。これにより、ユーザーはコードを見なくても、視覚的に見出しの構造を把握することが可能になります。

見出しのルール

基本的に、h1タグの次にはh2タグがきます。同じようにh2タグの次にはh3タグがきます。

本に例えると、h1タグが「本の題名」、h2タグが「章」、h3タグが「節」などと対応するようなイメージです。

「章」がないところに急に「節」がきたら、違和感がありますよね。それと同じような形で、見出しの構造を考えるようにすればOKです。

おわりに

今回は、HTMLファイルに使用する「段落」と「見出し」に使うタグと、その使い方について学んできました。今回学んだことは、HTMLファイルを作るときだけでなく、本記事のようなブログ記事を書いたりする際にも、身につけておくと役に立つ技術ですので、ぜひマスターしてみてください。

次の記事はこちら

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
     

コメントを残す

*