0

before, after 擬似要素でblockquoteを表現する

擬似要素

ある書物やサイトなどからの抜粋文をサイト内に掲載する場合、その部分が“ 引用 ”であることを明示的に「blockquote」で表現するか、説明書きを添えて、「ここは引用文ですよ!」と言った感じにわかりやすく記載しておく必要があります。

その際に、独自のデザインで表現したいな~。なんて時には、引用符の「画像」とCSS3の擬似要素before/after」を使用して表現する方法があります。

【やり方】

1.引用符の画像を用意

サンプル用に以下の画像を使用します。よろしければご自由にお使いください。

 

before   (左上配置)

after

  (右下配置)

 

2.HTMLを記述

<blockquote>タグにクラス名 .quoteArea を指定しています。

 

3.CSSを記述

 全体を囲っている.quoteAreaに対して position:relative を指定しておき、.quoteArea::before と .quoteArea::after で画像を position:absolute で絶対配置にします。

 

4.完成

 完成

以上になります。

 




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

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

mororeco > CSS > before, after 擬似要素でblockquoteを表現する