*

スマホで表が見切れてしまうときの対処法 最も簡単に!

公開日: : パソコン , , ,

スマホで表が見切れてしまうときの対処法

ホームページで表を使うと文章などが読み手にきれいに見え、読みさすくなるので便利に使っている人も多いと思います。
とても便利な表ですが、 デバイスが多様になるにつれ、ホームページを見る側の画面サイズが変わるようになりました。
それに伴いデバイスによって表が見切れてしまうことがあります。

今までのパソコンサイトのように普通に表を作ってしまうとこんな感じに右が見切れてしまう場合があります。
スマホで表が見切れる

スマホ用サイトでもくずれない表(テーブル)の実装方法について確認していこうと思います。

表が崩れる原因

表のレイアウトが崩れてしまう原因はいろいろありますが、大別すると主に2種類あります。
1.表のカラム(列)数が多い場合
2.表の幅が使用デバイスの画面より大きく指定されている場合

1.の解決方法

テーブルのカラム(列)数が多い場合
以下のように、HTMLファイルに記述します。

<HTMLサンプル>

<table style="border-style: none;" border="1">
<tbody>
<tr>
<th>見出し 1</th>
<td>データ 1-1</td>
<td>データ 1-2</td>
<td>データ 1-3</td>
</tr>
<tr>
<th>見出し 2</th>
<td>データ 2-1</td>
<td>データ 2-2</td>
<td>データ 2-3</td>
</tr>
<tr>
<th>見出し 3</th>
<td>データ 3-1</td>
<td>データ 3-2</td>
<td>データ 3-3</td>
</tr>
</tbody>
</table>

見出し 1 データ 1-1 データ 1-2 データ 1-3
見出し 2 データ 2-1 データ 2-2 データ 2-3
見出し 3 データ 3-1 データ 3-2 データ 3-3

表をタグで普通に記入するとこうなります。
スマホで見ても崩れないようにCSSを記述していきます。

<CSS記述>

th,td {
width: 100%;
display: block;
}

thとtdの幅を100%に、そして、ブロックレベル表示になるように指定します。
こうすることにより4カラム(列)の表が1カラム(列)の表になりました。

<解説>

項目名と項目が2カラム(列)以上で構成されているテーブルの場合、
1カラム表示に変更することでデザイン崩れを防ぎきれいに読むことができるようになります。
ただし表の上と左に項目がある場合の表ではこれはうまくいきません。
下のやり方のほうで設定すると、上と左に項目のある場合きれいに見えます。

2.の解決方法

テーブルの幅が使用デバイスの画面より大きく指定されている場合
カラム数が少ない場合には、幅のpx(ピクセル)指定を%(パーセント)指定にすることで対応できます。
以下のように、HTMLファイルに記述します。

<HTMLサンプル>

<table style="border-style: none;" border="1">
<tbody>
<tr>
<th>見出し 1</th>
<td>データ 1-1</td>
</tr>
<tr>
<th>見出し 2</th>
<td>データ 2-1</td>
</tr>
<tr>
<th>見出し 3</th>
<td>データ 3-1</td>
</tr>
</tbody>
</table>

見出し 1 データセル 1-1
見出し 2 データセル 2-1
見出し 3 データセル 3-1

表の幅を「%」で指定するCSSを記述します。

<CSS記述>

table {
width:100%;
}
th,td {
width:50%;

こうすることによりデバイスの画面に合わせて表示されるようになります。

「%」で設定する方法はカラム数が多すぎたり、記入内容が多く表がもともと大きい場合などは、表示が小さくなりすぎて読みにくくなることがありますので、1.の表を1カラム表示に表示する方法の方がいいです。

最後に

最近はパソコンが横長でスマホが縦長なので、表を使ってホームページを作ると前述のように見栄えが悪くなる場合が多くなり、表の仕様は減ってきました。しかし、横に羅列するより、明らかに読みやすくなる場合はまだまだ表は活躍すると思われます。しかし、難しく考えていくとデバイスによって見にくくなることがあるので、あまり深く考えず、シンプルに作ることを心掛けるといいと思います。

売れてます

関連記事

NEC VersaPro PC-VY17FLVEU 改造 メモリー交換 HDD交換 2

NEC VersaPro PC-VY17FLVEU 改造 メモリー交換 HDD交換2 参考はこちら

記事を読む

iPhone 8.2にしたらwifiが途切れる。。。

いろいろあり、iOS7.1からiOS8.2にアップデートしました。 本当は7.1のままにしたか

記事を読む

HDDエラー「ファイルまたはディレクトリが壊れているため、読み取ることができません」 復旧作業1

記憶媒体にアクセスできなくなったときの復旧方法 外付けHDDやUSBメモリ等ストレージに保存してい

記事を読む

Windows10のダブル設定画面わかりづらい。

Windows10になって何が一番使いづらくなったかというと、私は設定・setting画面です。

記事を読む

アプリケーションソフトをスタートアップに登録する方法 Windows8 Windows8.1

アプリケーションソフトのスタートアップ登録 Windows8 windows8.1 Windows

記事を読む

グーグル、重たいコンテンツもサクサク見られる「AMP HTML」を発表

google 「AMP HTML」発表 グーグルから新技術の発表!英語は読めないけど、あたらしいH

記事を読む

Windows10、Windows8.1、Windows8でIMEパッドを出す方法

windowsが8になってから言語バーの作りが変わりました。 それによって今までわからない漢字を入

記事を読む

SIM Free iPhone6sを海外から購入し、格安SIMを使う レビュー

私は毎回、キャッシュバックが多く、基本本体無料になったときに携帯を買い替えたりしてきました。 しか

記事を読む

iPhoneで撮った写真をWordPressにアップロードするとファイル名が「image.jpg」になる。変更できるか

ファイル名がimage.jpgになる 私はブログをWordPressを使って投稿しています。 最

記事を読む

いらすとや、こんなイラストまで作るw。何でもある

いらすとやさんの、発想力にはびっくりします。 どんなイラストでも自由に使えて、もちろん無料。 最

記事を読む

売れてます

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

売れてます

イラストやさん、これなにに使う?

あまりに限定的で面白すぎwww。 説明にも「簡易書留を送るときな

2018年 中秋の名月はいつ?

今年の中秋の名月は、9月24日です。 今年は満月と、中秋の名月が

台風21号上陸中!

みなさん雨、風注意してください。海や川に様子見には行かないでください。

今年は台風がすでに2個くらい来ましたが、水不足は大丈夫?

今日の関東の水源情報です。例年の平均くらいは水はあるようです。

連日のOCN通信障害 OCN回線が繋がらない

今日もネットがブツ切れ状態。まともに動画が見れませんな。連日こんな

→もっと見る

%d人のブロガーが「いいね」をつけました。
PAGE TOP ↑