パーツ番号 10-11-12 ・ CSSのみ

フロア案内タブ(施設内マップ・固定選択表示)

フロアタブと該当フロアのテナント一覧を組み合わせた館内案内の静止表示です。商業施設のフロアガイドページに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="floor">
          <div class="tabs"><span>1F</span><span class="on">2F</span><span>3F</span></div>
          <ul class="rooms">
            <li>フードコート</li>
            <li>雑貨・書店</li>
            <li>カフェスペース</li>
          </ul>
        </div>

CSS

.d10-11-12 .floor{width:100%;max-width:220px;}
        .d10-11-12 .tabs{display:flex;gap:6px;margin-bottom:10px;}
        .d10-11-12 .tabs span{flex:1;text-align:center;padding:7px 0;font-size:12px;font-weight:700;color:#8792a2;background:#f1f3f5;border-radius:6px;}
        .d10-11-12 .tabs span.on{background:#3d5a80;color:#fff;}
        .d10-11-12 .rooms{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
        .d10-11-12 .rooms li{font-size:12px;color:#334155;background:#f8f9fb;border:1px solid #eceef2;border-radius:6px;padding:8px 10px;}

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