パーツ番号 02-03-02 ・ CSSのみ

モジュラースケール一覧

一定の比率で拡大していくフォントサイズを縦に並べた見本です。WordPressテーマの見出しレベル設計やスタイルガイド作成の基準表として役立ちます。

staticcss

プレビュー

ソースコード

HTML

<div class="d02-03-02-wrap">
          <span class="d02-03-02-row" style="font-size:12px">Aa 12px</span>
          <span class="d02-03-02-row" style="font-size:14px">Aa 14px</span>
          <span class="d02-03-02-row" style="font-size:18px">Aa 18px</span>
          <span class="d02-03-02-row" style="font-size:24px">Aa 24px</span>
          <span class="d02-03-02-row" style="font-size:32px">Aa 32px</span>
        </div>

CSS

.d02-03-02{background:#f8fafc;text-align:left}
        .d02-03-02-wrap{display:flex;flex-direction:column;gap:8px;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;color:#0f172a}
        .d02-03-02-row{font-weight:700;line-height:1.2}

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