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

奥付・広告ページ風レイアウト

広告枠と発行情報をまとめた巻末ページの構成。冊子コンテンツの最終ページや発行者情報の掲載に用いる。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-09-12-page">
          <div class="d01-09-12-ads">
            <span class="d01-09-12-ad"></span><span class="d01-09-12-ad"></span>
          </div>
          <div class="d01-09-12-colophon">
            <p class="d01-09-12-name">季刊マガジン MIDORI</p>
            <p class="d01-09-12-line">発行人：編集部　発行日：毎月10日</p>
            <p class="d01-09-12-line">発行所：株式会社サンプル出版</p>
          </div>
        </div>

CSS

.d01-09-12{background:#f4f1ea;align-items:flex-start;}
        .d01-09-12-page{width:100%;display:flex;flex-direction:column;gap:14px;}
        .d01-09-12-ads{display:flex;gap:10px;}
        .d01-09-12-ad{flex:1;height:70px;background:linear-gradient(135deg,#dcd5c2,#b9ae8f);border-radius:3px;}
        .d01-09-12-colophon{border-top:1px solid #c9c2b2;padding-top:10px;}
        .d01-09-12-name{margin:0 0 6px;font-size:12px;font-weight:800;color:#3a3630;}
        .d01-09-12-line{margin:0 0 4px;font-size:10px;color:#7a715f;}

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