パーツ番号 01-15-03 ・ CSSのみ

左右均等2カラム記事レイアウト

同じ幅の2カラムに記事本文を均等配置するシンプルな構成です。WordPressの規約ページや新聞風コラムなど、情報量が多い文章を読みやすく2分割したいときに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-15-03-cols">
          <div class="d01-15-03-col">
            <h5>第1段</h5>
            <div class="d01-15-03-line w95"></div>
            <div class="d01-15-03-line w85"></div>
            <div class="d01-15-03-line w90"></div>
            <div class="d01-15-03-line w75"></div>
            <div class="d01-15-03-line w88"></div>
          </div>
          <div class="d01-15-03-col">
            <h5>第2段</h5>
            <div class="d01-15-03-line w90"></div>
            <div class="d01-15-03-line w95"></div>
            <div class="d01-15-03-line w70"></div>
            <div class="d01-15-03-line w85"></div>
            <div class="d01-15-03-line w80"></div>
          </div>
        </div>

CSS

.prev.d01-15-03{padding:22px 20px;align-items:stretch}
        .d01-15-03-cols{display:flex;width:100%;gap:18px}
        .d01-15-03-col{flex:1;display:flex;flex-direction:column;gap:8px}
        .d01-15-03-col h5{margin:0 0 4px;font-size:11.5px;font-weight:800;color:#333}
        .d01-15-03-line{height:7px;border-radius:4px;background:#e2e4ea}
        .d01-15-03-line.w95{width:95%}
        .d01-15-03-line.w90{width:90%}
        .d01-15-03-line.w88{width:88%}
        .d01-15-03-line.w85{width:85%}
        .d01-15-03-line.w80{width:80%}
        .d01-15-03-line.w75{width:75%}
        .d01-15-03-line.w70{width:70%}

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