*

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

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

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

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

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

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

表が崩れる原因

表のレイアウトが崩れてしまう原因はいろいろありますが、大別すると主に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をアップデートしたら、エラーが出るように

記事を読む

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

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

記事を読む

lenovo Think Padにもスパイウェア入っていた。削除の仕方の忘備録

前回、lenovoパソコンにスパイウェアが入っているという記事を書きました。過去記事はこちら その

記事を読む

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

前回、ダイアログボックスのチェックディスクについて書きました。 今回はUSBで外付けHDDやU

記事を読む

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

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

記事を読む

NumLockの読み方、存在する理由。パソコン初心者、上級者でも間違えている

パソコンのキーボードについて みなさん、パソコンのキーボードに「NumLock」というキーがあ

記事を読む

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

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

記事を読む

タブレット(ファブレット)買った!7インチ Chuwi Vi7 Andoroid 5.1 レビュー

タブレット購入。 7インチ Chuwi Vi7 スマホを使っていたのですが、少し画面の大きいやつが

記事を読む

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

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

記事を読む

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

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

記事を読む

売れてます

Message

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

売れてます

タカタ 上場廃止決定!

タカタ株式会社(以下「同社」という。)は、本日開催の取締役会におい

no image
キャスターの小林麻央さん、死去。ご冥福をお祈りします

ちょっとあまりにびっくりな速報が飛び込んできました。 2017/

浄水機能の付いた、シャワーヘッドに変えてみた。感想、評価。

浄水器のシャワーを買ってみた 最近、シャワーヘッドを、浄水機能の付い

きれいな夕焼けが撮れました

iPhone6sで撮りました。本当に今のスマホについているカメラは性能

レンズ倍率とmm表示の関係

私が、一眼レフカメラを使うようになって、二年が経ちました。 そこで、

→もっと見る

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