*

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

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

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

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

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

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

表が崩れる原因

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

最後に

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

売れてます

関連記事

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

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

記事を読む

web閲覧しているだけで感染する極悪ランサム、vvvウイルスに気をつけろ!

インターネットで閲覧しているだけで感染する極悪ランサムウェアが発見されました。 感染するとすべての

記事を読む

twitter、10周年!あっという間の10周年ですね。

twitterが今日10周年ということでメールが届きました。 早いものですね。 予知予期歩きの赤

記事を読む

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

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

記事を読む

まだまだ現役ブラウザクラッシャー(通称:ブラクラ)Browzer Clasher ブラウザで何もできなくなる

もうブラウザクラッシャー(通称:ブラクラ)なんて死んだと思っていましたがまだまだ現役にあるのですね。

記事を読む

iPhoneでゲーム中でも常に時計を表示する方法

iPhone使ってると、アプリによっては時計が表示されなくなり(特にゲーム)、今何時だ?ってみたいと

記事を読む

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

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

記事を読む

rootディレクトリではなく、特定ディレクトリ(フォルダ)にwordpressをインストールしたときの設定

rootディレクトリではなく、特定ディレクトリ(フォルダ)にwordpressをインストールした

記事を読む

【コマンドプロンプト】ファイルやフォルダのバックアップコマンド

【便利なコマンドプロンプト】 Windowsを使っている人が世界中で80%とも90%とも言われてい

記事を読む

chromeの.exeファイルの保存場所がいつの間にか変わってた。

Chromeなどの最近のブラウザは、管理者泣かせのユーザーフォルダ内の隠しフォルダに「chrom

記事を読む

売れてます

Message

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

売れてます

https://headlines.yahoo.co.jp/h

サッカー日本代表、本田、香川、岡崎選出。ハリルを追い出したかいアリ!

ロシアワールドカップ日本代表に本田、香川、岡崎打選出され、若手

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

いらすとやさんの、発想力にはびっくりします。 どんなイラストでも自由

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

みなさんyahoo!Japan使ってますか?私も使っていますが、最近の

ハリルホジッチ監督電撃解任 何やってるんだ?日本サッカー協会

ハリルホジッチ監督解任のニュースが流れました。 今日の朝か昼にも

→もっと見る

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