HOME

引用

マークアップ

「間違った引用は、間違って引用されることのない唯一の引用である。」

— Hesketh Pearson(ヘスケス・ピアソン)

<blockquote>
    <p>「間違った引用は、間違って引用されることのない唯一の引用である。」</p>
    <p>&#8212; Hesketh Pearson(ヘスケス・ピアソン)</p>
</blockquote>

独自のスタイルを追加しなくても、<blockquote>要素内のコンテンツはインデントされる。
padding-leftまたはmargin-leftの値を適用することなく、構造的な事情ではなくスタイルを目的とした理由で<blockquote>を利用してはならない。

原典の参照先を記述する、cite属性

「間違った引用は、間違って引用されることのない唯一の引用である。」

— Hesketh Pearson(ヘスケス・ピアソン)

<blockquote cite="http://www.somewebsite.com/path/to/page.html">
    <p>「間違った引用は、間違って引用されることのない唯一の引用である。」</p>
    <p>&#8212; Hesketh Pearson(ヘスケス・ピアソン)</p>
</blockquote>

★ほとんどのブラウザはcite属性に関して何もしないが、構造的な意味としてコンテンツの内容を補強する付加的な情報であり、将来的に重要となろう。

▲このページのトップへ

インライン引用

I said, Herman, do you like bubblegum? And he said, Yes, the kind that cames with a comic.

I said, <q>Herman, do you like bubblegum?</q> And he said, <q>Yes, the kind that cames with a comic.</q>

W3Cでは引用がどんな言語であってもlang属性を追加することを推奨している。言語によって引用符が異なって表示される可能性があるため。

I said, <q lang="en-us">Herman, do you like bubblegum?</q> And he said, <q lang="en-us">Yes, the kind that cames with a comic.</q>

▲このページのトップへ

入れ子にしたインライン引用

I said, Herman, do you like bubblegum? And he said, Yes. Bubblegum is what Harry calls delicious.>

I said, <q lang="en-us">Herman, do you like bubblegum? </q> And he said, <q lang="en-us">Yes. Bubblegum is what Harry calls <q lang="en-us">delicious</q>.</q>

▲このページのトップへ

背景画像を利用した<blockquote>のスタイル

マークアップ

backgroundまたはbackground-imageプロパティを使用しても、ひとつの要素につきひとつの背景画像しか割り当てることができないため、<blockquote>内の各段落にid属性を追加し、背景画像を割り当てることのできる固有の要素を三つにする。

「間違った引用は、間違って引用されることのない唯一の引用である。」

— Hesketh Pearson(ヘスケス・ピアソン)

<blockquote cite="http://www.somewebsite.com/path/to/page.html">
    <p id="quote">「間違った引用は、間違って引用されることのない唯一の引用である。」</p>
    <p id="author">&#8212; Hesketh Pearson(ヘスケス・ピアソン)</p>
</blockquote>

スタイルシート

blockquote {
	width: 270px;   …@
	margin: 0;   …B
	padding: 0;   …B
	font-size: 150%;
	letter-spacing: -1px;
	line-height: 1em;
	text-align: center;
	color: #555;
	background: #fff url(quotetop.gif) no-repeat top left; …A
	}
#quote {
	margin: 0 10px 0 0; …C
	padding: 20px 10px 10px 20px;
	background: url(quoteend.gif) no-repeat right bottom; …D
	}
#author {
	margin: 0 10px 0 0;
	padding: 0 0 10px 0;
	color: #999;
	font-size: 60%;
	background: url(quotebottom.gif) no-repeat bottom;
	}

@で、引用を含むボックス全体の幅を、角丸のボーダーと左引用符を作成するquotetop.gif画像と同じ幅270ピクセルに設定。
フォントまわりを指定し、テキストに手を加える。
blockquoteに対する最後のルールAに、背景色、画像、および位置を指定する。
<blockquote>のマージンとパディングをオフにし、IE5などに対処するB
quote段落のルールでは、Cで段落上下のブラウザのデフォルトスペーシングを無効にし、代わりに若干のパディングを正確に指定してレイアウトする。右辺に10ピクセルのマージンを追加し、引用符の背景画像を左辺にぴったり合うように効果的にオフセットする。ここを省略すると、画像がボックス全体の右端をはみ出して配置される。もうひとつのオプションは、画像自体の右に10ピクセルのパディングを追加することである。
背景画像は<blockquote>要素の下端と右端に揃うように、Dで指定する。
3つ目の画像に関しても、段落のデフォルト・マージンを無効にし、変わりに底辺に若干のパディングを使用して背景画像をレイアウトする。marginではなくpaddingを使用してauthor段落のスペーシングを設定することで、この角丸の画像を底辺の必要な位置に正確に配置することができる。

▲このページのトップへ

特別な言葉を引き立たせる

引用文中の重要な語を<strong>タグでマークアップすることによって、CSSが利用できない環境や非視覚系ブラウザでもボールド体または強調された語として表示されるようにする。

間違った引用は、間違って引用されることのない唯一の引用である。」

— Hesketh Pearson(ヘスケス・ピアソン)

<blockquote cite="http://www.somewebsite.com/path/to/page.html">
    <p id="quote">「<strong>間違った引用</strong>は、間違って引用されることのない<strong>唯一の</strong>引用である。」</p>
    <p id="author">&#8212; Hesketh Pearson(ヘスケス・ピアソン)</p>
</blockquote>

追加のスタイルシート

#quote strong {
	color: #000;
	font-weight: normal; …E
	}

Eで、<strong>タグによるデフォルトのボールド指定をnormal値で上書きしている。

▲このページのトップへ