テーブルレスポンシブ

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

7.テーブルレスポンシブ(セルの間に余白)

タイトルA 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
タイトルB 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
タイトルC 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
タイトルA 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
タイトルB 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
タイトルC 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)