引用と出典の表示

文章を引用する。引用した文章が、何処から引っ張ってきたものなのか、出典を明記する。さあ、この引用文と、その出典、という2つの情報を、どうやって、わかりやすくペアにして書き示そうか。

二つの例

HTML/XHTMLの場合

一番簡単なのは、quoteというクラス名でもつけたDIV要素でも定義して、その中に、これらのセットを放り込んでしまえ、的な手法。

<div class="quote">
<blockquote>
	<p>(引用文。)</p>
</blockquote>
<p class="caption"><cite>出典元文書タイトル</cite>より引用。</p>
</div>

DIV要素でゴニョゴニョしてみた例。

2014年2月まで、うちのサイトも、このような手法を採っていた。(ただし、DIV要素のクラス名は、figureにしていた。引用文以外にも、画像やHTMLのソースなどを放り込むため、HTML5のFIGURE要素のように使っているものを、そのまま流用していたせいだ)

HTML5の場合

HTML5だったら、上のDIV要素を、そのまま、FIGURE要素に(、そして、クラス名captionを付加されたP要素はFIGCAPTION要素に)してしまえば良い。

<figure>
<blockquote>
	<p>(引用文。)</p>
</blockquote>
<figcaption><cite>出典元文書タイトル</cite>より引用。</figcaption>
</figure>

ゴニョゴニョしていたDIV要素を、HTML5の要素に置き換える。

そして、すべてを無駄にする

しかし、つい昨日、そもそも、どうして、こんなことを考えているのかが分からなくなった。つまり、ここで、僕は、引用の前後で出典を明記してあれば、別に、同じ視覚的な枠に収めなくてもいいという、とても当たり前の結論に辿り着く。

わざわざソースの例を示すとすると、こうだ。

<p>この件について、<cite>出典</cite>では、以下のように解説されている。</p>
<blockquote>
    <p>(引用文。)</p>
</blockquote>
もう、ゴニョゴニョしない。

これでいいんだよな。

僕は、何を難しく考えていたんだ? あれ? こんな当たり前を、どうして見逃した?

しかし、ダメ押しの一手

でも、まあ、そうは言っても、心配なものは心配なので、引用文にも、出典元の情報を添えたい。

なので、CSSで、これらの情報を表示することにした。

BLOCKQUOTE要素に、title属性、cite属性をつけ、それらの属性値を表示する。それぞれの属性値は、title属性には引用元文書のタイトルを、cite属性には、そのURLを、それぞれ、属性値として与え、CSSの方は、以下のようにする。

blockquote:before {
    content: "Quote: "attr(title)" [ "attr(cite)" ]";
}
裏で、勝手に、ゴニョゴニョしてくれそうなCSSの一例。

上は、重要な部分だけを抜き出しただけ。うちのCSSでは、さらに、表示される文字の大きさや色なども指定しているけども、そこんとこは、普通の指定なので、ざっくりと省いた。

この指定により、BLOCKQUOTE要素の、引用文の左上に、引用元の文書のタイトルと、[]で括られたURLが表示されるはずだ。

難点は、CSSで表示させているので、閲覧環境からでは、コピペができないこと。その点を補うべく、前後の文脈に、CITE要素で出典を明記し、さらに、そこをA要素で括り、引用元へのリンクを張っている。ウェブブラウザの方で、うまい具合にcite属性の属性値をリンクにしてくれたりすれば、こんなに悩むこともない気がするのだが、まあ、これは、言っても仕方ないか……。