吾輩は猫である。名前はまだ無い。<ここまで引用>
<ここから引用元>吾輩は猫である<ここまで引用元>より
<ここから長文引用>
祇園精舍の鐘の声、諸行無常の響きあり。
娑羅双樹の花の色、 盛者必衰の理をあらはす。
奢れる人も久しからず、ただ春の夜の夢のごとし。
猛き者もつひにはほろびぬ、ひとへに風 の前の塵に同じ。
<ここまで長文引用>
<ここから引用元>平家物語<ここまで引用元>より
短い引用文「q要素」
他サイトや、本、歌詞やTV番組などから文章を引用(他者の作品の中の文章の一部をそのまま使うこと)することはよくあることです。
どこからか引用してきたことを明確にする場合、短文であれば「q要素」を使います。
<q>と</q>で囲んだ範囲のテキストを引用文と示すことができます。
ほとんどのブラウザでは、引用文を“”や「」などの記号で囲んで引用文をわかりやすくします。
ちなみに、「q要素」の「q」はQuoteの頭文字で、引用するという意味や、引用文という意味があります。
引用元のサイト(URL)を示す「cite属性」
「q要素」は他サイトから文章を引用した場合、そのサイトのURLを示すための「cite属性」があります。
「cite属性」の指定をすることで、どこのサイトから文章を引用したのか明らかにすることができます。
なお、「cite属性」の指定をしても、ほとんどのブラウザからの見え方は特に変わりません。
「属性」の説明については、文字化け防止や「ins要素」「del要素」で説明しましたのでここでは省略します。
「q要素」の「cite属性」に「http://blog.thinkreatesoft.net/」を指定した場合、以下のようになります。
長文の引用「blockquote要素」
短い文を引用するには「q要素」を使いますが、長文の引用をするには「blockquote要素」を使います。
「q要素」・「blockquote要素」の使い分けの基準は、１段落以上の文章を引用する場合は「blockquote要素」を使います。
これは、「blockquote要素」内には、段落を意味する「p要素」(後日解説予定)等を含むことができるからです。「q要素」には含むことはできません。
<blockquote>と</blockquote>で囲んだ範囲を長文の引用として示すことができます。
ほとんどのブラウザでは、上下左右に空欄が付け加えたような形で表示されます。
ちなみに、「blockquote要素」の「blockquote」はblock quoteという2つの単語を1つにしたもので、かたまりを引用といった意味になります。
引用元のサイト(URL)を示す「cite属性」
「blockquote要素」は「q要素」と同じように、他サイトから文章を引用した場合、引用元のURLを示すための「cite属性」があります。
なお、「cite属性」の指定をしても、ほとんどのブラウザからの見え方は特に変わりません。
「属性」の説明については、文字化け防止や「ins要素」「del要素」で説明しましたのでここでは省略します。
「blockquote要素」の「cite属性」に「http://blog.thinkreatesoft.net/」を指定した場合、以下のようになります。
引用元「cite要素」
さて、「q要素」「blockquote要素」で他サイトからの引用は、引用元も明らかにすることができました。
しかし、ウェブサイトではない本や新聞、歌詞や映画などの作品から引用した場合の引用元を明らかにするにはどうすればよいのでしょうか。
そういった場合、「cite要素」で引用元の作品名（タイトル）を明らかにします。
また、「cite要素」は引用元の作者名など人物にも使うことができます。
twitterやfacebookなどの投稿はタイトルを持ちません。そういった場合、「cite要素」で引用元の投稿者名を明らかにしたりできます。
「cite要素」は、ほとんどのブラウザで文字を斜体にして表現します。
「i要素」と同じように見えますが、「cite要素」には引用元という明確な意味を持ちます。
ただ単に斜体にするという目的で使うには、「cite要素」ではなく「i要素」を使います。
ちなみに、「cite要素」の「cite」は引用するという意味や引証するといった意味があります。
サンプル
今回説明した、「q要素」、「blockquote要素」、「cite要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>～</body>)に書いてください。
サンプルソースコード
<p> <q cite = "http://ja.wikipedia.org/wiki/HyperText_Markup_Language">HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）、略記・略称HTML（エイチティーエムエル）とは、ウェブ上の文書を記述するためのマークアップ言語である。</q> </p> <blockquote> <p> HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）、略記・略称HTML（エイチティーエムエル）とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。 </p> </blockquote> <p> <cite>HyperText Markup Language - Wikipedia</cite>より引用 </p>
（<p>とは「段落」を意味する要素です。）
表示結果
HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）、略記・略称HTML（エイチティーエムエル）とは、ウェブ上の文書を記述するためのマークアップ言語である。
HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）、略記・略称HTML（エイチティーエムエル）とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。
HyperText Markup Language - Wikipediaより引用
「q要素」「blockquote要素」「cite要素」のまとめと次回記事について
今回説明した「q要素」「blockquote要素」「cite要素」はいかがでしたでしょうか。
本で読んだ、テレビやゲームや演劇で見た聞いた文には名言が多く、使いたくなることはよくあることです。
そういったときにとても使える要素だと思いませんか？
なお、文章の一部分の引用は著作権法上では認められているので、法律上は問題はありません。
次回は、空白や改行、タブなどが使われた整形済みテキストをそのまま表示する、「pre」要素の説明をします。
以上、当サイト管理人のAsterismでした。