price_008
横に広いテーブルがスマホで画面幅に収まらない時、横にスクロールして見られるということを知らせる表示。
スクリプトと詳細設定タブに、スクリプトとCSSを記述してあります。
ブロックをコピペして、これらスクリプトとCSSの記述もそれぞれコピペしてください。
price_007
項目と金額を…でつなぐ設定の料金表
リスト：テーブル式で作成した表で、…が表示される設定をDRESSとCSSの組み合わせで作成しています。
price_006
大見出しとリード文の下に、小見出しと説明・バリエーションのある料金
パーマという大見出しとパーマに対する説明をリード文に表示。
この下に小見出しとしてパーマの中の種類ごとに説明と料金を表示するような時のパターン。
小見出しごとに横線で区切りを入れて、スマホでの料金表示はバリエーションごとに改行して表示されるように改行コントロールを入れています。
price_005
横に項目が複数あるテーブル
横に複数の列が必要な表は「表・テーブル」パーツからtableタグで作成することになります。tableで作る表はスマホで見た時、画面幅に無理やり収めて表示されるため各セルでは改行だらけでみにくくなりがちです。
そして、以外な盲点が、連続する半角英数字は改行されない ということです。横に並ぶ項目数が多く、それが半角数字の料金だった時、各セルないで改行されないため、表が画面幅（スマホ時）に収まりきらずに、本来の画面幅からはみ出しようになってしまいます。
このテーブル幅がはみ出すとき、テーブル部分だけを横スクロール処理になるように設定してあります。
price_003
美容室の料金表などに使えるリスト・テーブル式
リスト・テーブル式での見え方をDRESSで設定し、料金表などの利用を想定したブロックデザイン。
罫線は横のみとし、thは左寄せ、tdは右寄せの設定。
説明などが入る時は、th・td外に注釈として入力し、罫線や余白で調整をしています。スマホで見た時は、金額下に説明が入ります。
price_002
美容室の料金表などに使えるリスト・テーブル式
リスト・テーブル式での見え方をDRESSで設定し、料金表などの利用を想定したブロックデザイン。
罫線は横のみとし、thは左寄せ、tdは右寄せの設定。
説明などが入る時は、th内で改行して入力していまるため、スマホでは項目と金額の間に入ります。
price_001
プラン別の料金などで比較しやすい横並びのレイアウト
提供しているサービスに幾つかのプラン（バリエーション）があるような時に、上から順に仕様を並べるよりも横に並べたほうが比較がしやすくわかりやすくなります。
極力項目は横に揃うほうが比較がしやすいため、改行がされない文字数で作成できることが見やすく作るコツです。プランに含まない項目も記載しないのではなく薄いグレーなどに設定して含まれないことを表現することで横に同じ項目が並ぶようにしています。
