制作者の活動(PR)。

当該<blockquote>要素には緑の枠をつけます。
- 当該要素の内容の前には特に引用元情報(cite属性及びtitle属性)が無い場合は「以下引用。」の文字を出し、下に山吹色の枠線をつけます。
- 特にcite属性かtitle属性を示している場合は、その属性値を<blockquote>要素の前に表示させます(ここではcite属性のみを与えた場合のスタイルのみを掲載しますが、他にもパターンがあります)。
当該要素の内容の後ろには「引用ここまで。」の文字を出し、上に山吹色の枠線をつけます。

このためのCSSでの記述は、以下のように:before擬似要素及び:after擬似要素を利用したものとなります。

引用情報を表示するCSSの記述例を読み飛ばす

/* <blockquote>要素の基本スタイル */
blockquote {
    margin: 1.5em 0 1.5em 1em;
    padding: 1em 1.5em;
    text-indent: 0;
    border: solid 2px #090;                      /* 緑の枠 */
    }

/* <blockquote>要素の前の基本スタイル */
blockquote:before {
    display: block;                              /* 下に付ける山吹色の枠を幅一杯に描くため、
                                                 ブロックレヴェル要素扱いとします。 */
    line-height: 1.6em;
    color: #090;
    border-bottom: #fd0 2px solid;               /* 下に山吹色の枠 */
    margin-bottom: 1em;
    content: "以下引用。";                       /* この文字が表示されます */
    }

/* <blockquote>要素にcite属性がある場合 */
blockquote[cite]:before {                        /* cite属性がある場合に限る */
    display: block;                              /* 下に付ける山吹色の枠を幅一杯に描くため、
                                                 ブロックレヴェル要素扱いとします。 */
    line-height: 1.6em;
    color: #090;
    border-bottom: #fd0 2px solid;               /* 下に山吹色の枠 */
    margin-bottom: 1em;
    content: "以下引用。\A" "URI: " attr(cite);   /* 二行に亘り「以下引用。」「URI: …」が表示されます */
    }

/* <blockquote>要素の後ろの基本スタイル */
blockquote:after {
    display: block;                              /* 上に付ける山吹色の枠を幅一杯に描くため、
                                                 ブロックレヴェル要素扱いとします。 */
    line-height: 1.6em;
    color: #090;
    border-top: #fd0 2px solid;                  /* 上に山吹色の枠 */
    margin-top: 1em;
    text-align: right;
    content: "引用ここまで。";                   /* この文字が表示されます */
    }

引用情報を表示するCSSの記述例はここまで

尚、インターネットエクスプローラでは:before擬似要素及び:after擬似要素などをサポートしていないため、一番初めの基本スタイル(緑の枠をつける表示)のみが有効となります。

<blockquote>要素向けCSS小技一覧の先頭へ

メールや掲示板などでは、長文引用には行頭に「>」を付ける事でそのように表す場合が多いです。

これをCSSでやってみましょう。

残念ながら、インターネットエクスプローラの現行のヴァージョンでは実現出来ません。
また、現在のCSS仕様には折返されたテキストの先頭に対する擬似要素は定義されておりません。このため、折返されたテキストの左端には「>」記号を付ける事は出来ません。

HTMLでは、長文引用(正しくはブロックレヴェルでの引用)には、<blockquote>要素を用いる事となっており、よって、この要素に適切なスタイルを当てれば良い事となります。

<blockquote>要素内の行頭に「>」を付けるCSSの記述例を読み飛ばす

blockquote>* {
    margin: 0 0 0 0.5em;
    padding: 0;
    border: none;
    }

blockquote>*:before {
    display: inline;
    margin: 0 0 0 -0.5em;
    padding: 0;
    content: ">";
    }

<blockquote>要素内の行頭に「>」を付けるCSSの記述例はここまで

スタイルを当てる際に抑えておきたい事として、まず<blockquote>要素の直下は必ずブロックレヴェル要素となるため(ブロックレヴェルでの引用なので当り前ですが)、直下セレクタで指定された要素は全てブロックレヴェル要素となる筈です(不正なマークアップがされている場合はこの限りではありませんが…)。

一方、:before擬似要素は、当該セレクタによって指定される対象の直前を対象とした擬似要素です。

擬似要素と言うのは、要素の一文字目とか、一行目など、マークアップで明示出来ないものを要素に見立ててセレクタとしたものです。要素の直前や直後と言う概念も、マークアップのし様はありませんね(この他、現行の仕様では定義されていませんが折返されたテキストの左端なども擬似要素とすれば扱う事が出来る筈です)。

ここでは、<blockquote>要素の直下となっている要素の直前に関してスタイルを当てております。

displayプロパティでこの擬似要素をインライン方式としておき、contentプロパティで「>」を出力させております。

こうする事で、<blockquote>要素直下の全ブロックレヴェル要素の先頭に「>」が附与されるようになる訳です。

余白などは実際に利用する際に適宜調整しましょう。表示色や文字サイズなども設定出来ますね。
インターネットエクスプローラの現行ヴァージョンではどちらも無効となるため、これらのブラウザでも引用だと分かるようなスタイルを当てておく事をお勧めします。具体的にはこの定義の直前に<blockquote>要素関連のスタイルを当てておくなどの方法があります。

<blockquote>要素向けCSS小技一覧の先頭へ

この頁の本文はここまでです(本文の先頭へ)

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com