パーツ番号 09-04-12 ・ CSSのみ

タグクラウド風文字サイズバッジ

登場頻度に応じて文字の大きさと濃さを変えたタグの集合です。WordPressの人気キーワード一覧やサイト内で話題のカテゴリ紹介に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-04-12-cloud">
          <span class="d09-04-12-t d09-04-12-s5">WordPress</span>
          <span class="d09-04-12-t d09-04-12-s3">SEO</span>
          <span class="d09-04-12-t d09-04-12-s4">デザイン</span>
          <span class="d09-04-12-t d09-04-12-s2">プラグイン</span>
          <span class="d09-04-12-t d09-04-12-s5">コーディング</span>
          <span class="d09-04-12-t d09-04-12-s1">テーマ</span>
          <span class="d09-04-12-t d09-04-12-s3">レスポンシブ</span>
          <span class="d09-04-12-t d09-04-12-s2">高速化</span>
        </div>

CSS

.d09-04-12-cloud{display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:center;align-items:baseline;max-width:300px}
        .d09-04-12-t{font-weight:700}
        .d09-04-12-s1{font-size:11px;color:#94a3b8}
        .d09-04-12-s2{font-size:13px;color:#7c8aa0}
        .d09-04-12-s3{font-size:16px;color:#475569}
        .d09-04-12-s4{font-size:20px;color:#2563eb}
        .d09-04-12-s5{font-size:25px;color:#1d4ed8;font-weight:800}

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