パーツ番号 01-09-11 ・ CSSのみ

三段組み本文レイアウト

新聞や専門誌に見られる縦3分割の段組み構成。文字量の多い特集記事を紙面のように詰め込みたいページに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-09-11-page">
          <h4 class="d01-09-11-head">三段組み特集記事</h4>
          <div class="d01-09-11-cols">
            <div class="d01-09-11-col">
              <span class="d01-09-11-l"></span><span class="d01-09-11-l"></span><span class="d01-09-11-l"></span><span class="d01-09-11-l"></span>
            </div>
            <div class="d01-09-11-col">
              <span class="d01-09-11-l"></span><span class="d01-09-11-l"></span><span class="d01-09-11-l"></span><span class="d01-09-11-l"></span>
            </div>
            <div class="d01-09-11-col">
              <span class="d01-09-11-l"></span><span class="d01-09-11-l"></span><span class="d01-09-11-l"></span><span class="d01-09-11-l"></span>
            </div>
          </div>
        </div>

CSS

.d01-09-11{background:#fff;align-items:flex-start;}
        .d01-09-11-page{width:100%;}
        .d01-09-11-head{margin:0 0 10px;font-size:14px;font-weight:800;color:#222;border-bottom:2px solid #222;padding-bottom:6px;}
        .d01-09-11-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
        .d01-09-11-col{display:flex;flex-direction:column;gap:6px;}
        .d01-09-11-l{display:block;height:5px;background:#e2e2e2;border-radius:2px;}
        .d01-09-11-l:nth-child(1){width:100%;}
        .d01-09-11-l:nth-child(2){width:90%;}
        .d01-09-11-l:nth-child(3){width:95%;}
        .d01-09-11-l:nth-child(4){width:60%;}

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