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

見開き2ページ風レイアウト

中央に区切り線を持つ左右対称の誌面構成。左に本文、右に写真枠を配置し、雑誌の見開きページをそのまま静止画として再現する。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-09-01-spread">
          <div class="d01-09-01-page d01-09-01-left">
            <span class="d01-09-01-ln d01-09-01-ln1"></span>
            <span class="d01-09-01-ln d01-09-01-ln2"></span>
            <span class="d01-09-01-ln d01-09-01-ln3"></span>
            <span class="d01-09-01-ln d01-09-01-ln4"></span>
          </div>
          <div class="d01-09-01-fold"></div>
          <div class="d01-09-01-page d01-09-01-right">
            <span class="d01-09-01-ph"></span>
            <span class="d01-09-01-cap"></span>
          </div>
        </div>

CSS

.d01-09-01{background:#f4f1ea;}
        .d01-09-01-spread{display:flex;width:100%;height:100%;}
        .d01-09-01-page{flex:1;padding:14px;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;}
        .d01-09-01-fold{width:2px;background:#c9c2b2;}
        .d01-09-01-ln{display:block;height:6px;background:#b9b2a0;border-radius:2px;}
        .d01-09-01-ln1{width:70%;height:10px;background:#3a3630;}
        .d01-09-01-ln2{width:95%;}
        .d01-09-01-ln3{width:88%;}
        .d01-09-01-ln4{width:60%;}
        .d01-09-01-ph{flex:1;background:linear-gradient(135deg,#d8cdb8,#a8977a);border-radius:2px;}
        .d01-09-01-cap{height:6px;width:70%;background:#b9b2a0;border-radius:2px;}

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