商品詳細ページの作成

トップページの商品カードから遷移する、商品詳細ページを作ります。

ページKV

下層の見出し帯は共通コンポーネント c-page-kv を使います。商品詳細では中身のない帯として置き、商品名は本文側に出します。

<div class="c-page-kv c-page-kv--product"></div>

商品情報

商品画像と説明文を並べます。商品名はここが h1 です。

<div class="product-item l-section">
    <div class="l-container-s">
        <div class="product-item-inner">
            <div class="product-item-img">...</div>
            <div class="product-item-contents">
                <h1 class="product-item-name">coco シャンプー01</h1>
                <p class="product-item-text">...</p>
                <div class="product-item-button">
                    <a href="error.html" class="c-button c-button--size-medium">購入する</a>
                </div>
            </div>
        </div>
    </div>
</div>

SPでは縦積み、PCでは左右2カラムが基本です。

関連商品

ページ下部に関連商品一覧を置きます。ここも c-products c-products--col3 を再利用します。

共通パーツを組み立てるだけでほぼ完成するので、前半でコンポーネントを先に作る意味が出てきます。