このデモについて
- このページにはSWELLテーマ本体のCSSを含めていません。◯✕アイコン・申し込みボタン・見出し行の色は、見た目だけをこのデモ用に簡易再現したものです。
- 比較表のHTMLは、ご提供いただいたものを一字一句そのまま掲載しています。
- 元のHTMLに加えた変更は、<figure> タグへのCSSクラス
cmp-select 1つだけです（各表の「元のHTMLを見る」で実物を確認できます）。
- デモのため、表の中のリンクや申し込みボタンを押しても画面は移動しません。
- 比較表③④の画像は元のサイトから直接読み込んでいるため、ご覧の環境によっては表示されないことがあります。
使い方
- 比べたい行の「□ 比較」に2〜4件チェックします。
- 画面下に出るバーの「比較表を見る」を押します。
- 選んだ行が横並びの比較表になって、その表のすぐ下に表示されます（商品が横、項目が縦に入れ替わります）。
比較表①（テキストのみ）
| 比較表① | 料金 | 納期 | まとめ割 | 会社名 |
|---|
| 商品A | 100円 | 1ヶ月 | | あい |
|---|
| 商品B | 1,000円 | 1日 | | うえ |
|---|
| 商品C | 500円 | 1週間 | | おか |
|---|
| 商品D | 20円 | 2週間 | | きく |
|---|
| 商品E | 200円 | 3日 | | けこ |
|---|
| 商品F | 2,000円 | 5日 | | さし |
|---|
比較表②（行頭に申し込みボタン）
