【HTML5入門】2-2 強調・重要性の表現と区切り

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

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

前回のおさらい

前回は、文章における段落と見出しの作り方について学びました。

今回は、文章を目立たせたい時に使う強調・重要性の表現や、段落の区切りを示したい時に使えるタグについて、見ていきましょう。

「強調」を示すタグ

文章の中で、ある特定の単語や表現を強調させたいような場合があると思います。その時に、該当する単語や表現を、「emタグ」によって囲むことによって、強調表現ができます。

emタグ

emタグの「em」は、emphasize(強調する)という英単語の略です。

<em>〜</em>とすることで、間で囲まれた部分が“斜体表示”されるのが一般的です。

斜体表示させたいからemタグを使う→×

Google Chromeをはじめとする多くのWebブラウザで、emタグを使うと斜体表示されるように初期設定がされていますが、あくまでもそれはWebブラウザの設定上の話です。ですので、斜体表示させるために場合には、別の言語「CSS」について学ぶ必要があります。

ここでは、「あくまでも斜体表示は、強調された結果によるもの」である、という認識をしておく必要があります。

「重要性」を示すタグ

次に、文章内で「この部分が重要である」ということを伝えたい時に使われるタグをご紹介します。

strongタグ

strongタグは、その言葉の意味通り、特定の単語・表現の強さを示す場合に使われます。

<strong>〜</strong>とすることで、間で囲まれた部分が“太字表示”されるのが一般的です。

太字表示させたいからstrongタグを使う→×

emタグと同様、strongタグにも同様のことが言えます。こちらも、「あくまでも太字表示は、重要性を示した結果によるもの」である、という認識をしておきましょう。実際の強調表現などのカスタマイズは、「CSS」で、様々な「強調」や「重要性」の表現の仕方を学ぶことによって可能になります。

「区切り」を示すタグ

段落間の区切りをわかりやすい形で伝えたい場合は、以下のタグを使用します。

hrタグ

hrタグは”horizontal rule”の略で、水平方向の罫線という意味があります。基本的に文章のセクションを示す意味で使われます。

閉じタグは必要なく、段落の間などに<hr>と入力するだけで使用することができます。

上記タグをHTMLに記述してみよう

では、実際にご紹介した3つのタグを、HTMLファイル記述していきましょう。

最初のHTMLは、前回の記事で使用した以下の状態にしておきます。

<!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>

emタグを使ってみよう

では、まずは1つ目の段落の「Lorem ipsum」の表記を強調表示させてみましょう。記述は下記のようになります。

<!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>
      <em>Lorem ipsum</em> 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ブラウザで表示すると、以下のようになると思います。

わかりやすいように、変えた場所を選択してみました。斜体表示されているのが確認できますね。

strongタグを使ってみよう

では次に、2段落目の「Lorem ipsum」を重要な部分として示すために、strongタグを使用してみましょう。コードは下記のようになります。

<!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>
      <em>Lorem ipsum</em> 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>
      <strong>Lorem ipsum</strong> 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ブラウザで確認してみましょう。以下のようになると思います。

選択した部分が、しっかりと太字表示されていますね。

hrタグを使ってみよう

最後に、hrタグを用いて、1段落目と2段落目の間に区切り線を挿入してみましょう。コードは下記の通りです。

<!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>
      <em>Lorem ipsum</em> 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>
    <hr>
    <p>
      <strong>Lorem ipsum</strong> 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ブラウザで確認すると、下記画像のようになると思います。

段落の間に線が引かれているのが確認できますね。これがhrタグの効果となります。

おわりに

今回は、文章の強調表示や重要な部分の表示、そして区切り線を入れるためのタグについて学びました。ページの作成に絶対に必要なタグというわけではありませんが、読者に意図を正確に伝えるために役に立つことの多いタグですので、ぜひ、積極的に使ってみてください。

次の記事はこちら

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

コメントを残す

*