にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

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

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

引用文章を掲載する際には、blockquote要素が使えます。使い方は簡単で、引用文(コンテンツ)として掲載したい内容をblockquote要素内に記述するだけです。ここでは、blockquoteで作るブロックの前後(左右)に大きな二重カギ括弧を表示させています。

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

引用文章を掲載する際には、blockquote要素が使えます。使い方は簡単で、引用文(コンテンツ)として掲載したい内容をblockquote要素内に記述するだけです。ここでは、blockquoteで作るブロックの前後(左右)に大きなダブルクォーテーション記号を表示させています。

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

引用文章を掲載する際には、blockquote要素が使えます。使い方は簡単で、引用文(コンテンツ)として掲載したい内容をblockquote要素内に記述するだけです。ここでは、blockquoteで作るブロックの前後(左右)に大きな三角形記号を表示させています。

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

引用文章を掲載する際には、blockquote要素が使えます。使い方は簡単で、引用文(コンテンツ)として掲載したい内容をblockquote要素内に記述するだけです。ここでは、blockquoteで作るブロックの前後(左右)に大きな指の矢印記号を表示させています。

上記のようなデザインは、スタイルシートの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」を「」に置き換えて「261E」とします。これをcontentプロパティの値に書けば、記号「☞」を直接ソース内に記述することなく「☞」を表示できます。

	content: "261E";  /* ☞を表示 */
	content: "261C";  /* ☜を表示 */

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

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

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

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

引用文章を掲載する際には、blockquote要素が使えます。使い方は簡単で、引用文(コンテンツ)として掲載したい内容をblockquote要素内に記述するだけです。ここでは、blockquoteで作るブロックの前後(左右)に大きな水色の渦巻き画像を表示させています。

上記のように表示する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 12:43 初版公開》

()

▼当サイト内外で関連しそうな記事などを自動表示:

スタイルシートTipsふぁくとりーの主要なカテゴリ

現在、以下のカテゴリに区分してスタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

--- 当サイト内を検索 ---