アジェンダ

HTMLのタグ
blockquote
q
HTMLの属性
cite
実践

HTMLのタグ

blockquote

引用された文書であることを示すタグ。
文書全体が引用である際に用いる。

q

引用された文章であることを示すタグ。
文書中の一部が引用である際に用いる。

HTMLの属性

HTMLの属性とは、タグの補足情報を示すものである。
タグの<>内に記載する。

cite

引用元を示す属性。値にはURLを記載する。
cite属性を付加させても、Webページの表示は変化しない。

実践

上記のタグ・属性を用いて、以下のindex.htmlを作成した。

index.html

<!DOCTYPE html>

<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>引用の使い方</title>
  </head>
  <body>
    <h1>Lorem Ipsumとは</h1>
    <p>
      Wikipediaによると、Lorem Ipsumは<q>出版、ウェブデザイン、グラフィックデザインなどの諸分野において使用されている典型的なダミーテキスト</q>である。
      以下が、Wikipediaの本文である。
      <blockquote cite="https://ja.wikipedia.org/wiki/Lorem_ipsum">
        lorem ipsum（ロレム・イプサム、略してリプサム lipsum ともいう）とは、出版、ウェブデザイン、グラフィックデザインなどの
        諸分野において使用されている典型的なダミーテキスト。
        書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、
        まだ正式な文章の出来上がっていないテキスト部分の書体（フォント）、タイポグラフィ、レイアウトなどといった
        視覚的なデザインを調整したりわかりやすく見せるために用いられる。
      </blockquote>
    </p>
  </body>
</html>

引用 : Wikipedia

これをWebブラウザで表示させるとこんな感じ。

<p>タグを使用した引用箇所は、自動で「」で囲われている。
<blockquote>タグを使用した引用箇所は、新たなブロック要素として表示され、インデントが深くなっている。

おわりに

今回は、引用に関する内容だった。
ブログを書く際には、必要になってきそうだ。

次回 >> ☆まだ☆

参考

2-3 引用（HTMLのテキスト）

htmlの属性 - とほほのWWW入門