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

ホーリーグレイルレイアウト構成

ヘッダー・サイドナビ・メイン・サイドバー・フッターの5領域からなる定番レイアウトの骨組みです。WordPressテーマの全体設計を確認する土台として使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-05-12-hg">
          <div class="d01-05-12-h">header</div>
          <div class="d01-05-12-mid">
            <div class="d01-05-12-nav">nav</div>
            <div class="d01-05-12-main">main</div>
            <div class="d01-05-12-aside">aside</div>
          </div>
          <div class="d01-05-12-f">footer</div>
        </div>

CSS

.prev.d01-05-12{padding:14px}
        .d01-05-12-hg{width:100%;max-width:320px;height:220px;display:flex;flex-direction:column;gap:8px}
        .d01-05-12-h,.d01-05-12-f{background:#1e293b;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border-radius:8px;padding:10px 0}
        .d01-05-12-mid{flex:1;display:grid;grid-template-columns:0.7fr 2fr 0.7fr;gap:8px}
        .d01-05-12-nav,.d01-05-12-aside{background:#e2e8f0;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:10.5px;color:#475569;font-weight:600}
        .d01-05-12-main{background:#eef2ff;border:1px dashed #a5b4fc;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;color:#4338ca;font-weight:700}

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