商品一覧ページひな形
【注意】商品一覧となっていますが、情報一覧と読み換えてもOKです。情報一覧との違いは概要にアイコンが入っている点、アイコン入りアコーディオンがない事です。
その分、ソースの記述がわかりやすくなっています。
利用時は最初に概要にアイコンをどのように入れるか、などの表示スタイルを統一を決めておくといいです。
商品名タイトルが画像下に来るタイプ
商品名タイトルが画像右側に来る単段
画像をアイキャッチとしても使うとよい。スマホで表示すると上の「商品名タイトルが画像下に来る段組」と同じように表示される。
段組合計比率デフォルト 12からcols（6,6)に該当
段組合計比率12から割合5:7 cols(5,7)
段組合計比率12から割合4:8 cols(4,8)
段組合計比率12から割合3:9 cols(3,9)
【参考】商品名タイトルが画像上に来るタイプ
商品名タイトルが画像上に来るタイプはタイトルが画像の大きさに左右されると見栄えがよくないので、使う場合の桁比率は6:6のままの利用を推奨。
商品名タイトルが左側画像下に来る単段
画像をアイキャッチとしても使うとよい。スマホで表示すると上の「商品名タイトルが画像下に来る段組」と同じように表示される。桁の比率を6：6のままでの利用を推奨。
段組合計比率デフォルト 12からcols（6,6)に該当
商品名タイトル【商品名タイトルは全角27文字辺りで】
【概要を4行程度で書く】概要を4行程度で書く。詳細ページにて詳しく解説します。
【概要を4行程度で書く】概要を4行程度で書く。詳細ページにて詳しく解説します。
【概要を4行程度で書く】概要を4行程度で書く。詳細ページにて詳しく解説します。