<q>や<blockquote>で作る引用のデフォルトの引用符のマークや背景色はサイトのデザインと合わないことが多いし、ちょっとダサいです。カスタマイズをするのが当然の部類に入るもののひとつ。
引用符や背景色の変更はCSSでかんたんにできます。サンプルコードを交えながらご紹介します。
qタグ
<q>は、短い引用や文章内の一部を引用するときに使います。HTML、CSSのサンプルコード、その表示結果を見てみましょう。
See the Pen quotation-q by tadtadya (@tadtadya) on CodePen.
デフォルトの引用符は、ダブルクォーテーション（"）で、引用内部の引用はシングルクォーテーション（'）です。
.customで次のように変更します。
- シングルクォーテーションと、ダブルクォーテーションを交換
- 引用内部のクォーテーションに半角スペースを入れて読みやすくする
CSSのquotesプロパティで引用符を定義します。
.custom {
quotes: "'" "'" ' "' '" ';
}[開始文字] [終了文字] [引用内部の開始文字] [引用内部の終了文字]
そして、疑似要素を使います。
- :before疑似要素のcontentプロパティでopen-quoteを指定
- :after疑似要素のcontentプロパティでclose-quoteを指定
.custom:before {
content: open-quote;
}
.custom:after {
content: close-quote;
}これで、開始文字・終了文字を指定します。
（open-quote, close-quoteはquotesプロパティで定義したものを指す。）
引用内部の引用については、quotesプロパティ以外で定義することはありません。
また、HTMLで引用内部のqタグにクラス名をつける必要もありません。quotesプロパティに指定すれば自動的に引用をつけてくれます。
引用内部の引用がいらないなら、quotesプロパティで指定する必要はありません。
japaneseのように全角文字を使うこともできます。
引用内部のqタグにはクラス名は不要。（CSSは何もしない）
blockquoteタグ
<blockquote>は文章など長い引用で使い、citeタグをつけて出典元を表示します。HTML、CSSのサンプルコード、その表示結果を見てみましょう。
See the Pen quotation-blockquote by tadtadya (@tadtadya) on CodePen.
qタグとのちがい
qタグでは引用内部の引用タグ（q）のクラス名はいりませんでした。しかし、blockquoteでは、引用内部の引用タグ（blockquote）にクラス名が必要です。
（CSSでスタイルの指定が必要。）
ここでは、親の引用タグと同じクラス名（custom）を指定します。
また、CSSのquotesプロパティで定義するフォントにFont Awesomeを使っています。
通常の文字のクォーテーションは、上揃えの文字で余計な領域が文字の下にできてしまうので使いません。クォーテーションの文字サイズを大きくするとさらに目立ちます。
- 引用内部のblockquoteタグはクラス名が必要。（CSSで定義する）
- 通常のクォーテーション文字は使わない。（余白領域ができるため）
blockquoteのデフォルト
defaultの引用を見ると
- blockquoteタグは改行してインデントがついて表示される。
- 出典のciteタグも同じインデントに表示される。
これだと引用文との区別がつかず味気ないし読みづらいです。これをカスタマイズしたものがcustomの結果です。
blockquoteのカスタマイズ
positionプロパティ
- blockquoteタグはstatic以外
- :before, :afterの疑似要素、citeタグはabsolute
CSS指定のポイントはpositionプロパティです。
positionプロパティは、要素の配置位置を変更するプロパティです。top、left、right、bottomの各プロパティを指定するときは必ず初期値（static）以外の値でないといけません。
今回はpositionプロパティの特性を使っています。まず、blockquoteタグの領域は位置変更しないのですが、あとの位置調整の基準位置になります。
static以外であればどの値でもいいです。ここではrelativeを使います。
:before, :afterの疑似要素、citeタグは、細かい位置調整を行うのでabsoluteを指定します。
これで、位置変更する要素の基準はblockquoteのエリアになります。
要素の調整
:before、:afterの疑似要素、citeタグの微調整について説明します。
:before疑似要素は、左上のクォーテーションを表現しています。これは左上になるので、left、topプロパティで調整します。
:after疑似要素は、右下のクォーテーションを表現しています。右下になるので、right、bottomプロパティで調整します。
citeタグは右下に表示したいので、right、bottomプロパティで調整します。これで引用の文章との違いが分かりやすくなりました。
また、blockquoteタグとciteタグのpadding-bottomで、引用文章と距離をとるように調整します。
位置調整だけでなく、:before、:after疑似要素、citeタグのフォントサイズを変更して見やすくしました。フォントの種類を変えてもよいでしょう。
その他の調整
そのほか、引用内部の引用にはborderをつけたり、背景色を変えたり、引用領域の角を丸くしたりしています。また、インデントのサイズをmarginで調整しました。このあたりは特にむずしいことはありません。
