初めてのHTML入門⑦
今回は、「引用」について勉強していきます。
引用には大きく2種類あります。
ブロック全体を引用するパターンと
文章の中の1部を引用するというパターンです。
そして、最後に引用元の表記の仕方まで勉強します。
引用に使うタグ
まとめて引用する場合には<brockquote>というタグを利用します。
それに対して、一部を引用する場合には<q>というタグを使用します。
これは、”quote”の頭文字です。”quote”には引用という意味があります。
そして、引用元を表記する場合には、それぞれのタグに”cite”属性を追加することになります。
cite属性は、cite="URL"という書き方をします。
具体的にどのように書くのか、見ていきましょう。
HTMLを書いてみる
以下のようなファイルを用意します。
<!docstyle html>
<html>
<head>
<meta charset="UTF=8">
<title>HTMLの練習</title>
</head>
<body>
<p>
The quick brown fox jumped over the lazy dog. Then, the dog chased after the fox
</P>
<p>
ある人は言った 我思う故に我あり
</P>
</body>
</html>
二つの段落が用意されています。
一つ目の段落には、” The quick brown fox jumped over the lazy dog. Then, the dog chased after the fox”という文章が書いてあり、これはA～Zまでの文字とピリオド、カンマが使われているもので、フォントの表示のチェックに使われます。
二つ目には、”我思う故に我あり”という名言を引用した文章があります。
一つ目の段落は文章全体が引用である。
そして二つ目の段落では、”我思う故に我あり”の部分だけが引用であるということを示してみます。
追加で記載した内容は太字で示します。
<!docstyle html>
<html>
<head>
<meta charset="UTF=8">
<title>HTMLの練習</title>
</head>
<body>
<blockquote>
<p>
The quick brown fox jumped over the lazy dog. Then, the dog chased after the fox
</P>
</blockquote>
<p>
ある人は言った <q>我思う故に我あり</q>
</P>
</body>
</html>
保存して更新してみると、
このように表示が変わったことがわかります。
一段落目は、文章がインデント（字下げ）されています。
これによってこの文章がほかのものとは違う（今回は引用されたものである）ということを伝えることができます。
二段落目は、<q>タグによって””（ダブルクオーテーション）が追加されました。これによって””内の文章が引用されたものであるということを表しています。
次に、引用元を追加してみましょう。
<!docstyle html>
<html>
<head>
<meta charset="UTF=8">
<title>HTMLの練習</title>
</head>
<body>
<blockquote cite="http://www.example.com/story.html">
<p>
The quick brown fox jumped over the lazy dog. Then, the dog chased after the fox
</P>
</blockquote>
<p>
ある人は言った <q cite="http://www.example.com/philosophy.html">我思う故に我あり</q>
</P>
</body>
</html>
こちらは、保存・更新をしても、ブラウザ上での見た目には変化が起こりません。ただ、構造上は引用元が表記されているということを覚えておいてください。
今回は、引用について勉強しました。
この note は”TechAcademy”の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/aprp-WLaxws
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、簡単なことから継続して徐々にレベルアップしていきましょう。