*

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

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

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

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

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

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

表が崩れる原因

表のレイアウトが崩れてしまう原因はいろいろありますが、大別すると主に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カラム表示に表示する方法の方がいいです。

最後に

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

売れてます

関連記事

no image

WordPressエラー Warning: Invalid argument supplied for foreach() in /wp/wp-content/plugins/head-cleaner/head-cleaner.php on line 2895について

WordPressの脆弱性が発見されたのでWordPressをアップデートしたら、エラーが出るように

記事を読む

NEC VersaPro PC-VY17FLVEU 改造 3 windows8 インストールまで 

NEC VersaPro PC-VY17FLVEU 改造 メモリー交換 HDD交換 2より続きです。

記事を読む

no image

たぶん買うことはないけど、lenovoを買った時のための備忘録

LenovoのPCにはBIOSレベルでWindowsのシステムファイルを上書きする危険な機能

記事を読む

エクセルでヘッダーの日付の表示形式変更の仕方 忘備録

ExcelにもWordにもヘッダーフッターというものがあります。よくヘッダーに日付を入れるこ

記事を読む

yahoo!Japanのメールのログイン後の画面があまりにもひどくて、どこから続けていいかわからないと、苦情のある件について

みなさんyahoo!Japan使ってますか?私も使っていますが、最近のyahooのカード会社に加入し

記事を読む

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

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

記事を読む

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

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

記事を読む

Windows10でスタートアップにアプリを登録する方法

Windows7まではスタートメニューがあり、スタートメニューの中にスタートアップというフォ

記事を読む

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

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

記事を読む

家庭内無線LANの接続が切れやすくなっていたので調べた結果。

どうも家庭内LAnがぶつぶつ切れる症状がしょっちゅう出ていて、ネットにつながりにくかった。 しょっ

記事を読む

売れてます

Message

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

売れてます

2018/11/07 ほんとに異常気象の連続だ

もう11月も一週目が終わり、明日立冬というのに、最高気温20度とか

【午後のロードショウ】三銃士(制作1993年)(キーファー・サザーランド、チャーリー・シーン)を見て

テレビ東京、午後のロードショーというのをやっています。関東ローカル

タスクマネージャーに常駐している synaptics pointing device とはなに?

先に結論「64-bit Synaptics Pointing De

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

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

2018年 中秋の名月はいつ?

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

→もっと見る

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