テーブルレスポンシブ例
パソコン画面では横並びの表で表示、スマートフォンでは縦並びの表で表示させます。スマートフォンで見やすいレイアウト・デザインで表示させます。スッキリ見せることが可能です。CSSでレスポンシブなテーブルデザイン、コーディングを行います。スマホの縦長の画面でユーザビリティを落とさずに横長になってしまうテーブルをスマホで見たときに表示できるようにカスタマイズします。テーブルコーディングを適用します。以下のテーブルレスポンシブはスマートフォンで見ると縦長で表示します。
4.テーブルレスポンシブを使用
| デザイン | コーディング | その他費用 | 小計 | |
|---|---|---|---|---|
| ディレクション | -- | -- |
￥100,000 |
￥100,000 |
| トップページ |
￥70,000 |
￥30,000 |
-- |
￥100,000 |
| 下層ページ |
￥20,000 |
￥10,000 |
-- |
￥30,000 |
| お問合せフォーム | -- |
￥20,000 |
-- |
￥20,000 |
1.テーブルレスポンシブ
| タイトルA | コンテンツ1 | コンテンツ2 | コンテンツ3 |
|---|---|---|---|
| タイトルB | コンテンツ1 | コンテンツ2 | コンテンツ3 |
| タイトルC | コンテンツ1 | コンテンツ2 | コンテンツ3 |
2.テーブルレスポンシブ
| タイトルA | タイトルB | タイトルC | タイトルD |
|---|---|---|---|
| コンテンツ1 | コンテンツ1 | コンテンツ1 | コンテンツ1 |
| コンテンツ2 | コンテンツ2 | コンテンツ2 | コンテンツ2 |
3.テーブルレスポンシブ
| タイトルA | タイトルB | タイトルC | タイトルD |
|---|---|---|---|
| コンテンツ1 | コンテンツ2 | コンテンツ3 | コンテンツ4 |
| コンテンツ1 | コンテンツ2 | コンテンツ3 | コンテンツ4 |
| コンテンツ1 | コンテンツ2 | コンテンツ3 | コンテンツ4 |
| コンテンツ1 | コンテンツ2 | コンテンツ3 | コンテンツ4 |
4.テーブルレスポンシブ
| タイトルA | タイトルB | タイトルC | タイトルD | |
|---|---|---|---|---|
| A | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） |
| B | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） |
| C | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） |
| D | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） |
5.テーブルレスポンシブ
| タイトルA | タイトルB | タイトルC | タイトルD |
|---|---|---|---|
| 見出し01：内容（コンテンツ） | 見出し02：内容（コンテンツ） | 見出し03：内容（コンテンツ） | 見出し04：内容（コンテンツ）内容（コンテンツ） |
| 見出し01：内容（コンテンツ） | 見出し02：内容（コンテンツ） | 見出し03：内容（コンテンツ） | 見出し04：内容（コンテンツ）内容（コンテンツ） |
| 見出し01：内容（コンテンツ） | 見出し02：内容（コンテンツ） | 見出し03：内容（コンテンツ） | 見出し04：内容（コンテンツ）内容（コンテンツ） |
| 見出し01：内容（コンテンツ） | 見出し02：内容（コンテンツ） | 見出し03：内容（コンテンツ） | 見出し04：内容（コンテンツ）内容（コンテンツ） |
6.テーブルレスポンシブ（スクロール）
| タイトルA | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） |
|---|---|---|---|---|---|---|---|
| タイトルB | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） |
| タイトルC | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） |