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

2色ブロック分割フッター

左右を異なる背景色で分割し、左にブランドメッセージ、右にリンク一覧を配置した構成です。WordPressで個性を出したいコーポレートサイトのフッターに使えます。

staticcss

プレビュー

ソースコード

HTML

<footer class="d01-08-12-ft">
          <div class="d01-08-12-left">
            <span class="d01-08-12-logo">Two Tone</span>
            <p class="d01-08-12-msg">静かに、でも力強く。</p>
          </div>
          <div class="d01-08-12-right">
            <h4>サイトマップ</h4>
            <ul>
              <li><a href="#">ホーム</a></li>
              <li><a href="#">サービス</a></li>
              <li><a href="#">お問い合わせ</a></li>
            </ul>
          </div>
        </footer>

CSS

.prev.d01-08-12{padding:0;display:block}
        .d01-08-12-ft{height:100%;display:grid;grid-template-columns:1fr 1fr}
        .d01-08-12-left{background:#1f2a44;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:20px 22px}
        .d01-08-12-logo{font-weight:800;font-size:16px;letter-spacing:1px}
        .d01-08-12-msg{margin:8px 0 0;font-size:11px;color:#aeb8d0}
        .d01-08-12-right{background:#eef1f6;color:#334155;display:flex;flex-direction:column;justify-content:center;padding:20px 22px}
        .d01-08-12-right h4{margin:0 0 8px;font-size:11px;color:#64748b}
        .d01-08-12-right ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
        .d01-08-12-right a{color:#334155;text-decoration:none;font-size:10.5px}

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