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

ドロップキャップ見出し

頭文字だけを大きく落とし込む欧文雑誌風の装飾見出し。英語表記のブランドメッセージやコラム記事の書き出しに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <h4 class="ttl"><span class="cap">W</span>elcome to Our Studio</h4>
        </div>

CSS

.d02-07-30 .wrap{ overflow:hidden; max-width:280px; margin:0 auto; }
        .d02-07-30 .ttl{ all:unset; display:block; font-size:18px; font-weight:700; color:#1f2937; line-height:1.6; }
        .d02-07-30 .cap{ float:left; font-size:52px; font-weight:800; line-height:0.8; padding-right:6px; color:#6366f1; font-family:Georgia,serif; }

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