引用ブロック（縦線アクセント）
左に太い縦線を引いた、記事になじむクラシックな引用ブロックです。 blockquote をセマンティックに使い、 border-left:4px solid で引用らしいアクセント線を表現。右側だけ角を丸める border-radius:0 10px 10px 0 で、線から流れるような形に仕上げています。
解説
左に太い縦線を引いた、記事になじむクラシックな引用ブロックです。blockquote をセマンティックに使い、border-left:4px solid で引用らしいアクセント線を表現。右側だけ角を丸める border-radius:0 10px 10px 0 で、線から流れるような形に仕上げています。引用文は font-style:italic と広めの line-height:1.95 で読みやすく、著者名は footer 内に名前と肩書き（small）を 2 段で配置。装飾は CSS のみで、JS は使いません。
使う場面
- ブログ記事中の名言やコメントの引用
- お客様の声・推薦コメントの掲載
- インタビュー記事の発言の抜き出し
縦線の色（#1a1a2e）と太さを変えればブランドの雰囲気に合わせられ、引用文や著者名はテキストを差し替えるだけです。斜体をやめたい場合は font-style:normal に。blockquote と footer という意味のあるタグを使っているため、検索エンジンや読み上げにも引用だと正しく伝わります。実際の引用元がある場合は cite 属性や出典リンクを添えると信頼性が高まります。
よくある質問
縦線の色や太さは変えられますか?
変えられます。.qb の border-left の太さと色を編集するだけで、線の印象を調整できます。右側の角丸も border-radius で変更可能です。
引用文を斜体にしたくありません。
.qb__text の font-style を italic から normal に変えれば斜体が解除され、通常の字体で表示されます。読みやすさを優先したい場合に有効です。