テーブルレスポンシブ例
パソコン画面では横並びの表で表示、スマートフォンでは縦並びの表で表示させます。スマートフォンで見やすいレイアウト・デザインで表示させます。スッキリ見せることが可能です。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 | 内容(コンテンツ) | 内容(コンテンツ) | 内容(コンテンツ) | 内容(コンテンツ) | 内容(コンテンツ) | 内容(コンテンツ) | 内容(コンテンツ) |