【HTML5入門】2-4 略語・名前の特記・住所表現

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

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

前回のおさらい

前回は、引用表現について学んできました。

今回は、略語の正式名称の表示のさせ方や、名前の特記、住所表現について学んでいきましょう。

略語を示す

文章中に略語が存在する場合、それが略語であることを伝えたい場合があります。そんな時には下記のタグを用います。

abbrタグ

abbrタグは、「abbreviation」という難語の略で、略語という意味を持ちます。これを用いることで、囲んだ内容が略語であることを示すことができます。

title属性

title属性は、abbrタグと同時に使い、<abbr title="○○○">〜〜〜</abbr>のような形で使います。title属性を用いることにより、省略する前の言葉を画面に表示させることができるようになります。

引用元の名前を特記する

引用元の名前(映画・本などのタイトル)を特記するには、下記のタグを用います。

citeタグ

citeタグを使用することで、本タグで囲まれた言葉が何かの名前であるということを示すことができます。

住所を表記する

住所を表記したい場合には、下記のタグを用います。

addressタグ

addressタグを使用することで、本タグで囲めれた言葉が住所である、ということを示すことができます。

HTMLに記述してみよう

では、今回学んだ3つのタグと1つの属性を使って、実際にHTMLファイルに記述をしてみましょう。今回は、以下のようなHTMLを使用します。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      HTMLは勉強し続けるとわかるし、便利なものだ。
    </p>
    <p>
      私の好きな映画はターミネーターです。
    </p>
    <p>
      何かあればこちらまで。<br>
      東京都渋谷区○○1丁目2番3号
      □□ビル 5階
    </p>
  </body>
</html>

brタグ

上記のHTMLにしれっと登場していますが、brタグのbrは「break」の略で、改行を意味します。段落内で改行をしたい場合に用いられることの多いタグですので、この機会に覚えておきましょう。

abbrタグを使用してみよう

では、まずはabbrタグを「HTML」という単語に使用してみましょう。HTMLは略語ですので、abbrタグで囲んでみます。コードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      <abbr>HTML</abbr>は勉強し続けるとわかるし、便利なものだ。
    </p>
    <p>
      私の好きな映画はターミネーターです。
    </p>
    <p>
      何かあればこちらまで。<br>
      東京都渋谷区○○1丁目2番3号
      □□ビル 5階
    </p>
  </body>
</html>

この状態でWebブラウザを見ても、一見何の変化も無いように思われるかもしれませんが、これでOKです。

abbrタグにtitle属性を付与してみよう

では次に、abbrタグに、正式名称を表示させるためのtitle属性を付与してみます。HTMLは「Hypertext Markup Language」の略ですので、これをtitle属性に適用していきます。コードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      <abbr title="Hypertext Markup Language">HTML</abbr>は勉強し続けるとわかるし、便利なものだ。
    </p>
    <p>
      私の好きな映画はターミネーターです。
    </p>
    <p>
      何かあればこちらまで。<br>
      東京都渋谷区○○1丁目2番3号
      □□ビル 5階
    </p>
  </body>
</html>

では、これをWebブラウザで確認してみましょう。以下のようになると思います。

HTMLに下線がかかり、カーソルを合わせると、title属性で入力した正式名称が表示されました。これによって、単語が何の略語なのかが理解しやすくなりました。

citeタグを使用し、名前を特記してみよう

続いて、次の段落の「ターミネーター」という映画のタイトルに、citeタグを適用して、名前を特記した形にしてみましょう。コードは下記の通りとなります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      <abbr title="Hypertext Markup Language">HTML</abbr>は勉強し続けるとわかるし、便利なものだ。
    </p>
    <p>
      私の好きな映画は<cite>ターミネーター</cite>です。
    </p>
    <p>
      何かあればこちらまで。<br>
      東京都渋谷区○○1丁目2番3号
      □□ビル 5階
    </p>
  </body>
</html>

実際にどんな表示になるのか、Webブラウザで確認してみましょう。

「ターミネーター」が斜体表示されました。強調表現の時と同様、斜体にするために使うタグではありませんので、気をつけましょう。

addressタグを使用し、住所表現をしてみよう

では最後に、addressタグを用いて、最後の段落の住所表記に適用してみましょう。コードは下記の通りとなります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      <abbr title="Hypertext Markup Language">HTML</abbr>は勉強し続けるとわかるし、便利なものだ。
    </p>
    <p>
      私の好きな映画は<cite>ターミネーター</cite>です。
    </p>
    <p>
      何かあればこちらまで。<br>
      <address>
        東京都渋谷区○○1丁目2番3号
        □□ビル 5階
      </address>
    </p>
  </body>
</html>

pタグの中にaddressタグを用いていおり、改行も発生しているので、インデントを見易く揃えています。細かいところですが、コードの量が増えれば増えるほど、少しでも見やすいコードを記述することが重要になってきます。

では、実際にどのように表示が変わるのか、Webブラウザで確認してみましょう。

こちらも斜体表示されました。これもWebブラウザの解釈によるもので、他の表現をしたい場合は、「CSS」という言語で細かく設定をすることができます。

「□□ビル 5階」は、コードを見ると、改行しておきたい文章であることがわかるので、<br>タグを追加しておきましょう。コードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      <abbr title="Hypertext Markup Language">HTML</abbr>は勉強し続けるとわかるし、便利なものだ。
    </p>
    <p>
      私の好きな映画は<cite>ターミネーター</cite>です。
    </p>
    <p>
      何かあればこちらまで。<br>
      <address>
        東京都渋谷区○○1丁目2番3号<br>
        □□ビル 5階
      </address>
    </p>
  </body>
</html>

もう一度Webブラウザで確認をしてみましょう。

このように改行されていればOKです。

おわりに

今回は、略語の説明、名前の特記、住所表現について学んできました。それぞれの役割は独立しているタグですが、まとめて使われることも多くありますので、ぜひ身につけてみてください。

次の記事はこちら

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

コメントを残す

*