CSS q,blockquote: 引用をカスタマイズする方法

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
us us
css3 image

引用の引用符や背景色などを変更してカスタマイズする方法です。CSSで、qタグ・blockquoteタグについて変更します。

qタグ

短い引用や、文章内の一部を引用する場合に使います。HTML、CSSのサンプルコード、その表示結果を見てみましょう。

デフォルトの引用符は、ダブルクォーテーションになり、引用内部の引用はシングルクォーテーションになります。

customでは、次のように変更します。

  • シングルクォーテーションと、ダブルクォーテーションを交換
  • 引用内部のクォーテーションに半角スペースを入れて読みやすくする

CSSのquotesプロパティで引用符を定義します。定義は、

[開始文字] [終了文字] [引用内部の開始文字] [引用内部の終了文字]

で指定します。

そして、

  • :before疑似要素のcontentプロパティでopen-quoteを指定
  • :after疑似要素のcontentプロパティでclose-quoteを指定

して、開始文字、終了文字を指定しています。

引用内部の引用については、quotesプロパティ以外指定することはありません。また、HTMLで引用内部のqタグにクラス名を付ける必要はありません。quotesプロパティに指定すれば自動的に引用を付けてくれます。

引用内部の引用が不要であれば、quotesプロパティで指定する必要はありません。japaneseのように全角文字を使用することも可能です。

引用内部のqタグにはクラス名は不要。(CSSは何もしない)

blockquoteタグ

文章などの引用文に使います。citeタグを付けて出典元を表示します。HTML、CSSのサンプルコード、その表示結果を見てみましょう。

qタグとの違い

qタグでは引用内部の引用タグ(q)のクラス名は指定する必要がありませんでした。しかし、blockquoteでは、引用内部の引用タグ(blockquote)ではクラス名を指定する必要があります。

ここでは、親の引用タグと同じクラス名(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)以外の値を指定する必要があります。くわしい内容は『CSS position: absoluteとrelativeの違いでデザインが大きく崩れる』に書きました。

今回は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で調整しています。このあたりは特に難しいことはありません。

 

最近Webカテゴリでよく読まれている記事です。
post-cta-image
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事を気に入ったらぜひシェアも!!