HTMLで文章を書いていて、他のサイトや情報源からの言葉を引用する場合があります。
使う頻度は少ないかもしれませんが、覚えておくと役に立ちますので、ぜひできるようにしておきましょう。
引用ってなぁに？
引用とは、誰かが記述した文章や言葉を借りて自分の作品等に使用することです。
人の言葉を勝手に「これ、俺が考えたの。」的なことをすると、あまりいい感情を持たない方もいらっしゃいます。
そこで、引用する場合には引用元やその作品の情報を掲載しておく必要があります。
また、引用された文章がどこからどこまでかわかるように書いておかなくてはなりません。
その時に使用するタグを３種類紹介します。
長文を引用するためのタグ<blockquote>
長い文章を引用する場合には、<blockquote></blockquote>というタグを使用します。
このタグを使うと、左右はインデント（字下げ）、上下は一行ずつの空白を空けて表示されるようになります。
記述例
<!DOCTYPE HTML>
<html>
<head>
<title>記述の例</title>
</head>
<body>
<h1>引用しまーす</h1>
<p>
早口言葉を引用しまーす。
</p>
<blockquote>
<p>
あおまきがみ あかまきがみ きまきがみ<br>
たけやぶに たけ たてかけた<br>
とうきょう とっきょ きょかきょく<br>
</p>
</blockquote>
<p>言えましたか？</p>
</body>
</html>このように、上下左右が空いて表示されます。
短い文章の引用<q>
先ほどは長文でしたが、短い文章を引用する場合にはｑタグを使用します。
これを使用すると、引用した文章の前後に「”」が付きます。
記述例
<!DOCTYPE HTML>
<html>
<head>
<title>記述の例</title>
</head>
<body>
<h1>引用しまーす</h1>
<p>
早口言葉を引用しまーす。
</p>
<blockquote>
<p>
あおまきがみ あかまきがみ きまきがみ<br>
たけやぶに たけ たてかけた<br>
とうきょう とっきょ きょかきょく<br>
</p>
</blockquote>
<p>言えましたか？</p>
<p>特に<q>たけやぶにたけたてかけた</q>は難しいですよね。</p>
</body>
</html>たけやぶにたけたてかけたの前後に「”」が表示されて、”たけやぶにたけたてかけた”となりました。
引用元を表示する時に使う<cite>
このタグは、引用元などを参照する部分であることを示すものです。
人物名や書籍などの引用した情報の名前やタイトルを示す場合に使用します。
記述例
<!DOCTYPE HTML>
<html>
<head>
<title>記述の例</title>
</head>
<body>
<h1>引用しまーす</h1>
<p>
早口言葉を引用しまーす。
</p>
<blockquote>
<p>
あおまきがみ あかまきがみ きまきがみ<br>
たけやぶに たけ たてかけた<br>
とうきょう とっきょ きょかきょく<br>
</p>
</blockquote>
<p>言えましたか？</p>
<p>特に<q>たけやぶにたけたてかけた</q>は難しいですよね。</p>
<p>引用元は<cite>俺的早口言葉</cite>です。</p>
</body>
</html>まとめ
今回は引用時に使うタグを紹介しました。
実はブラウザによって表示の方法が違うらしく、<blockquote>タグ以外はうまく表示されない場合があります。
最近はブラウザもいろいろあるので、試してみるのもひとつかもしれませんね(;´･ω･)。
もし、どのブラウザでも同じように表示したいというのであれば、CSSも合わせて勉強することをお勧めします。
CSSで設定してあげれば、きちんと変換されますので、ぜひやってみてくださいね。