大型プルクオート（記事中央配置）
大型プルクオートは、記事本文の一節を抜き出して中央に大きく配置し、読者の視線を引きつける装飾的な引用ブロックです。このサンプルは JavaScript を使わず CSS のみで構成され、 aside 要素に ::before と ::after の擬似要素で Georgia 体の大きなクオート記号を左上と右下に重ね…
解説
大型プルクオートは、記事本文の一節を抜き出して中央に大きく配置し、読者の視線を引きつける装飾的な引用ブロックです。このサンプルは JavaScript を使わず CSS のみで構成され、aside 要素に ::before と ::after の擬似要素で Georgia 体の大きなクオート記号を左上と右下に重ねています。本文サイズは clamp(20px,3.5vw,28px) で指定し、画面幅に応じて滑らかに拡大縮小するため、スマホでも文字が詰まりません。
使うと効果的な場面
- ブログ記事やコラムで、最も伝えたい一文を強調したいとき
- インタビュー記事で発言の核心を抜き出すとき
- サービス紹介ページで顧客の声を印象づけたいとき
色を変えるときはクオート記号の color と本文の color を調整します。引用記号は装飾なので、スクリーンリーダーに読まれても意味が通るよう、本文側に引用の主旨を残すと安心です。実際に外部の発言を引用する場合は blockquote と cite に置き換えると、意味的にも検索エンジンにも正確に伝わります。
よくある質問
クオート記号の色やデザインは変えられますか
変えられます。.pq::before と .pq::after の color プロパティで色を、font-family と font-size でフォントや大きさを調整できます。記号自体は content プロパティの文字なので、別の引用符に差し替えることも可能です。
JavaScript は必要ですか
不要です。このプルクオートは擬似要素とテキスト配置だけで成り立つ純粋な CSS 実装なので、HTML と CSS を貼るだけで動作します。