パーツ番号 02-14-07 ・ CSSのみ

引用元クレジット表記

引用文の下に右寄せでクレジットを添えるスタイル。インタビュー記事やお客様の声セクションの引用に適する。

staticcss

プレビュー

ソースコード

HTML

<blockquote class="quote">デザインとは、単に見た目や感触ではない。デザインとは、動作そのものである。</blockquote>
        <p class="credit">&mdash; Steve Jobs</p>

CSS

.d02-14-07{ display:flex; flex-direction:column; justify-content:center; gap:10px; }
        .d02-14-07 .quote{ all:unset; display:block; font-size:14px; color:#374151; line-height:1.7; border-left:3px solid #d1d5db; padding-left:14px; }
        .d02-14-07 .credit{ all:unset; display:block; font-size:12px; color:#9ca3af; text-align:right; font-weight:600; }

クラス名 .d02-14-07 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。