eyecathch_img

スマホサイトでも崩れないテーブルを実装する方法


表制作に便利なテーブルですが、 デバイスの画面サイズの違いからデバイスに
よってデザインが崩れてしまうことがよくありますよね。
今回は、 スマホサイトでもくずれないテーブルの実装方法についてご説明して
いきます。

 

テーブルが崩れる原因

テーブルのレイアウトが崩れてしまう原因は主に以下場合となります。

・テーブルのカラム数が多い場合
・テーブルの幅が使用デバイスの画面より大きく指定されている場合

 

解決方法

原因ごとに解決方法を見ていきましょう。

 

テーブルのカラム数が多い場合

以下のように、HTMLファイルに記述します。

<HTML記述サンプル>

<表示結果>
テーブルが出来ました。

table_base

 

次に、これをスマホサイトで見ても崩れないようにCSSを記述していきます。

<CSS記述>

thとtdの幅を100%に、そして、ブロックレベル表示になるように指定します。

<表示結果>
2カラムの表が1カラムの表になりました。

table_width100

 

通常、項目名と項目の2カラム以上で構成されているテーブルを1カラム表示に
することでデザイン崩れに対応することが可能となります。
とても簡単ですね。

 

テーブルの幅が使用デバイスの画面より大きく指定されている場合

カラム数が少ない場合には、幅のpx指定を%指定にすることで対応が可能とな
ります。

以下のように、HTMLファイルに記述します。

<HTML記述サンプル>

<表示結果>

table_base_2

次に、幅を%で指定するCSSを記述します。

<CSS記述>

<表示結果>
デバイスの画面に合わせて表示されるようになりました。

table_width100_2

 

ただし、 この方法はカラム数によっては表示が小さすぎて見えにくくなること
がありますので、その場合は先程のテーブルを1カラム表示に表示する方法をお
勧めします。

 

まとめ

いかがでしたでしょうか。
近年、  テーブルを使用する機会は減ってきていますが、 まだまだテーブルを活
用しているサイトは多くあります。
デバイスによるレイアウト崩れにできるだけシンプルに対応していきたいですね。

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next ArticlePhotoshopで女性の肌をキレイに見せるテクニックまとめ