※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。
もくじ
前回のおさらい
前回は、文章内で使用する強調表現や重要性の表現、区切りについて学びました。
今回は、引用表現について学んでいきましょう。
「引用」の際に用いる2つのタグ
文章の中で、どこか別のWebサイトから引用してきたような場合に、通常の表記とは違った見せ方をすることができます。モラル的にも、どこかから引用した文章は、それが「引用」であることが読者に伝わるのが望ましいでしょう。
ここでは、引用表現をすることができる2つのタグをご紹介します。
blockquoteタグ
blockquoteタグは、段落をまとめて引用するような場合に使用します。
「block」は、ブロック全体を意味します。そして「quote」には、引用という意味があります。これらを合わせてblockquoteとなります。長い単語ですが、その意味を分けて理解すれば覚えやすいと思います。
qタグ
qタグは、先ほど説明した「quote」という意味の略で、文章内の一部分のみに引用表現を用いたい場合に使うことのできるタグです。
引用元を表記するには
上記2つのタグを用いて、「引用表現」自体は行うことができるのですが、どのWebサイトから引用されたのかを示すことができていません。これは。上記タグに「属性」をつけてあげることで可能になります。
cite属性
cite属性は、タグに合わせて使用し、どのWebサイトを参照しているのかを表記することができます。
cite属性の書き方は、「cite=”URL”」となります。URL部分に、参照元のWebサイトのURLを記載すればOKです。
HTMLに記述してみよう
では、今回学んだ2つのタグと1つの属性を使って、実際にHTMLファイルに記述をしてみましょう。今回は、以下のようなHTMLを使用します。
<!doctype html>
<html lang="ja">
<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〜」の文章について
この文章は、アルファベットのAからZと、「.（ドット）」と「,（カンマ）」を全て網羅していることから、よくフォントの表示のチェックに使用されるテキストとなります。こういう文章があることを覚えておいても良いかもしれません。
blockquoteタグを使用してみよう
では、まずはblockquoteタグを「The quick〜」の文章に適用してみましょう。コードは以下のようになります。
<!doctype html>
<html lang="ja">
<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>
ある人は言った 我思う故に我あり
</p>
</body>
</html>pタグを囲むようにして使用しています。同時に、pタグは一段インデントを下げているのが確認できると思います。
実際にこれをWebブラウザで表示すると、以下の画像のように表示されます。
qタグを使ってみよう
では次に、2段落目の文章の「我思う故に我あり」にqタグを使用してみましょう。コードは下記のようになります。
<!doctype html>
<html lang="ja">
<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>では、これをWebブラウザで確認してみましょう。以下のようになると思います。
タグにcite属性を付与して、引用元を表記してみよう
では、上記2つの引用タグに、引用元を表記するためにcite属性を付与していきましょう。実際にタグにcite属性を付与する場合は、下記のような書き方となります。
<!doctype html>
<html lang="ja">
<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>実際にcite属性を付与したのみでは、Webページを更新しても何の変化もないように見えるかもしれません。しかし、実際にこれで引用元の表記は完了しています。
実際にこれをどのようにページ上に引用元を表記したり、引用元をリンクで参照したりすることができるようになるか、というのは、また別のところで学習するので、今回はcite属性の使い方をマスターできればOKです。
おわりに
今回は、引用表現について学びました。HTML自体ではあまり使わないかもしれませんが、実際に文章を書くときにも、引用に関する表現はよく使用します。HTMLではタグや属性付与によって引用表現が可能になる、ということを覚えておくと良いでしょう。
