← 静的パーツギャラリーへ戻る

パーツ番号 01-15-10 ・ CSSのみ

メインコンテンツ+右サイド附録情報固定のEC商品2カラム

左に商品説明やレビューを流し込み、右側に価格や購入ボタンなどの附録情報を固定表示するEC商品ページ向けの構成です。WordPressのWooCommerce商品詳細ページのレイアウト検討に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-15-10-frame">
          <div class="d01-15-10-scroll">
            <div class="d01-15-10-main">
              <h4>商品の説明</h4>
              <div class="d01-15-10-line w95"></div>
              <div class="d01-15-10-line w88"></div>
              <div class="d01-15-10-line w80"></div>
              <div class="d01-15-10-rev"></div>
              <div class="d01-15-10-line w90"></div>
              <div class="d01-15-10-line w70"></div>
              <div class="d01-15-10-rev"></div>
              <div class="d01-15-10-line w85"></div>
              <div class="d01-15-10-rev"></div>
            </div>
            <div class="d01-15-10-side">
              <div class="d01-15-10-price"></div>
              <div class="d01-15-10-buy"></div>
              <div class="d01-15-10-spec"><span></span><span class="s"></span></div>
              <div class="d01-15-10-spec"><span></span><span class="s"></span></div>
              <div class="d01-15-10-spec"><span></span><span class="s"></span></div>
            </div>
          </div>
        </div>

CSS

.prev.d01-15-10{padding:0;display:block}
        .d01-15-10-frame{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#fff}
        .d01-15-10-scroll{position:absolute;inset:0;overflow-y:auto;display:flex;align-items:flex-start}
        .d01-15-10-main{flex:1;padding:18px 16px;box-sizing:border-box;display:flex;flex-direction:column;gap:10px}
        .d01-15-10-main h4{margin:0;font-size:13px;color:#1a1d24;font-weight:800}
        .d01-15-10-line{height:7px;border-radius:4px;background:#e7e9ee}
        .d01-15-10-line.w95{width:95%}
        .d01-15-10-line.w90{width:90%}
        .d01-15-10-line.w88{width:88%}
        .d01-15-10-line.w85{width:85%}
        .d01-15-10-line.w80{width:80%}
        .d01-15-10-line.w70{width:70%}
        .d01-15-10-rev{height:34px;border-radius:6px;background:#fafaf8;border:1px solid #eee}
        .d01-15-10-side{flex:0 0 35%;position:sticky;top:0;align-self:flex-start;background:#fffaf0;border-left:1px solid #f1e4c9;padding:18px 14px;display:flex;flex-direction:column;gap:10px;box-sizing:border-box;min-height:260px}
        .d01-15-10-price{width:70%;height:18px;border-radius:5px;background:#b45309}
        .d01-15-10-buy{width:100%;height:26px;border-radius:6px;background:#d97706}
        .d01-15-10-spec{display:flex;justify-content:space-between;align-items:center}
        .d01-15-10-spec span{display:block;width:50%;height:6px;border-radius:3px;background:#e7d9b8}
        .d01-15-10-spec span.s{width:25%;background:#b45309}

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