引用部分の端に巨大な引用符を配置する引用ボックスを作るCSS

ウェブ上で引用文章を掲載する際にはblockquote要素が使えます。デフォルトでは若干インデントされて表示されますが、最近は「巨大な引用符」や「巨大な括弧記号」をblockquoteの前後(左上と右下)に配置するデザインが流行っているような気がします。例えば以下の表示例では、引用文章の左上には大きな「『」記号が、右下には「』」記号が赤色で表示されています。

大きく表示する記号はどんな文字でも構わないので、下記のように引用らしくダブルクォーテーション記号「“」・「”」を大きく表示することもできます。

下記は、三角形「▼」と「▲」を使った表示例です。

ウェブページをUTF-8などのUnicodeで記述しているなら、下記のように指の矢印記号「☞」～「☜」を使ったりもできます。もちろん、その他の記号もなんでも表示できます。

上記のようなデザインは、スタイルシートのbefore疑似要素とafter疑似要素を使えば簡単に作れます。

引用部分の端に巨大な任意の記号を配置する引用ボックスを作るソース

まず、引用文を掲載するHTMLソースは以下のように記述しているとします。

<blockquote class="big-quotationmark">
……掲載する引用文章……
</blockquote>

ここでは、blockquote要素に対して、CSSで装飾を加えるために「big-quotationmark」というclass名を付加しています。
その上でCSSソースを以下のように記述します。

/* ▼引用ボックス自体の装飾 */
.big-quotationmark {
	position: relative;        /* 後述の疑似要素の表示位置の基準にする(必須) */
	background-color: #ffffcc; /* 背景色(任意) */
	border: 1px solid #cccc00; /* 枠線(任意) */
	margin: 1em 1em 1em 2.5em; /* 外側の余白(任意) */
	padding: 2em 3.5em;        /* 内側の余白(任意) */
}
/* ------------------------------------------ */
/* ▼引用ボックスの先頭(左上)に表示する文字▼ */
.big-quotationmark::before {
	content: "『";      /* 記号 */
	display: block;
	font-size: 300%;    /* 表示サイズ */
	color: #cc0000;     /* 表示色 */
	position: absolute; /* 絶対配置 */
	top: 0px;           /* ボックス上端からの距離 */
	left: 5px;          /* ボックス左端からの距離 */
}
/* ------------------------------------------ */
/* ▼引用ボックスの末尾(右下)に表示する文字▼ */
.big-quotationmark::after {
	content: "』";      /* 記号 */
	display: block;
	font-size: 300%;    /* 表示サイズ */
	color: #cc0000;     /* 表示色 */
	position: absolute; /* 絶対配置 */
	bottom: 0px;        /* ボックス下端からの距離 */
	right: 5px;         /* ボックス右端からの距離 */
}

上記の12行目と23行目に、大きく表示させたい記号を記述すれば良いだけです。表示する記号によっては、ボックスの端からの距離を(左上に表示する場合はtopプロパティとleftプロパティで、右下に表示する場合はbottomプロパティとrightプロパテで)調整する必要があるかもしれません。いろいろ修正して試してみて下さい。

before疑似要素は、そのままでは「要素の内容」の先頭にcontentプロパティで指定した文字列を加えるだけです。after疑似要素も同様に「要素の内容」の末尾にcontentプロパティで指定した文字列を加えるだけです。それだと引用文章の前後に記号が表示されるだけなので、positionプロパティに値「absolute」を指定して絶対配置させています。そのため、引用ボックス自体にも(絶対配置の基準にするために)positionプロパティに値「relative」を指定しておく必要があります。

なお、冒頭に紹介した表示例のように12行目と23行目を修正するには、以下のように記述します。

ダブルクォーテーション記号の場合：

contentプロパティの値を囲む引用符の中にさらに引用符を含めているので紛らわしいですが、ここでは「全角の引用符記号」を「半角の引用符」で囲んでいます。(^_^;;;

	content: "“";

	content: "”";

三角形記号の場合：

これは特に何の変哲もない三角形記号です。

	content: "▼";

	content: "▲";

Unicodeの指の矢印の場合：

Unicodeでしか表せない文字や記号を使う場合は、下記のようにソースにもそのままその記号を書いておく方が確実な気がします。

	content: "☞";

	content: "☜";

contentプロパティの値には文字実体参照や数値文字参照は使えないので、もし数値を使って指定したければUniversal Character Nameを使う必要があります。例えば、記号「☞」は「U261E」で表されます。この先頭の「U」を「\u」に置き換えて「261E」とします。これをcontentプロパティの値に書けば、記号「☞」を直接ソース内に記述することなく「☞」を表示できます。

	content: "\u261E";  /* ☞を表示 */

	content: "\u261C";  /* ☜を表示 */

しかし、Universal Character Nameをいちいち調べるのも面倒ですし、記号をそのままソースに含めてしまう方が楽だとは思います。(^_^;)

引用部分の端に表示する巨大な記号を画像ファイルで用意したい場合

上記の例では、引用ボックスの左上と右下に表示する記号はすべてテキストで用意しました。しかし、画像を使うこともできます。画像を表示したい場合も記述するCSSソースはほとんど同じで、単にcontentプロパティの値にファイルパスを指定すれば良いだけです。

下記では、水色渦巻きの画像「」を使っています。

上記のように表示するCSSソースは以下の通りです。

/* ------------------------------------------ */
/* ▼引用ボックスの先頭(左上)に表示する文字▼ */
.big-quotationmark::before {
	content: url("skyuzumaki.png");
	display: block;
	font-size: 300%;    /* 表示サイズ */
	color: #aa00aa;     /* 表示色 */
	position: absolute; /* 絶対配置 */
	top: 0px;           /* ボックス上端からの距離 */
	left: 3px;          /* ボックス左端からの距離 */
}
/* ------------------------------------------ */
/* ▼引用ボックスの末尾(右下)に表示する文字▼ */
.big-quotationmark::after {
	content: url("skyuzumaki.png");
	display: block;
	font-size: 300%;    /* 表示サイズ */
	color: #aa00aa;     /* 表示色 */
	position: absolute; /* 絶対配置 */
	bottom: 0px;        /* ボックス下端からの距離 */
	right: 3px;         /* ボックス右端からの距離 */
}

記号をテキストで指定する場合とほとんどソースは同じです。12行目と23行目で表示に使いたい画像ファイルを指定すれば良いだけです。(1～8行目は先の例とまったく同じなので省略しました。)

というわけで、引用部分の端に巨大な引用符を配置する引用ボックスを作るCSSの書き方を紹介しました。

※なお、before疑似要素やafter疑似要素は、CSS3ではコロン記号を2つ重ねて「::before」や「::after」のように使う規則になりました。しかし、この書き方はIE8以下では認識されないので、古いブラウザも対象にしたければコロンは1つにして「:before」や「:after」と書いておく方が良いでしょう。

(更新日：2016年04月08日)