スマホで表(テーブル)の表示がはみ出る、見切れる場合の横スクロール対処法

スマホで表(テーブル)の表示がはみ出る、見切れる場合の横スクロール対処法

スポンサーリンク



今回は、特に横長の表(テーブル)の場合で多くあるスマホで見た時の見切れやはみ出し等でレイアウトが崩れている場合の対処法です。

【注意】
今回は超初心者の方でも対応可能ですが、少し知識が必要な内容となっております。
慎重に行えば問題ありませんが、バックアップなどを取り、いつでも元に戻せられる状態で作業を行いましょう。

パソコンでは問題なく表示されている表(テーブル)ですが、スマホで見た時の表示が見切れてしまっていたり、はみ出してレイアウトが崩れている等の対処法として、横にスクロールさせる方法をご紹介します。

この問題はよく価格表などで表が横長になってしまう場合におこる問題です。
WordPressでは表のレスポンシブが対応されていない場合があります。
(※テーマや設置状況により異なりますので確認してみましょう)

※実はパソコンでしか確認したことが無く、スマホで見て気づいたなんてことは良くあり
ます。

パソコンで表(テーブル)を見た場合

既に画面幅いっぱいですが、問題なく表示されてます。(当ブログ内の記事を参考に表示)

パソコンで表(テーブル)を見た場合

スマホで表(テーブル)を見た場合

スマホで見ると画面の右側途中で見切れて表示されてます。
右に動くのでずらしてみると、表がはみ出してしまっております。
見れないわけでありませんがレイアウトが崩れてしまってますの印象は良くないです。

スマホで表(テーブル)を見た場合

スマホの画面を右にずらした場合の画像(右に動くが枠からはみ出している)

スマホの画面を右にずらした場合の画像

 

横スクロールによる対処法

今回はCSSのコードを追加して対応します。
CSSと聞くと難しそうですが、コピペで対応できますので安心してください。

横スクロール用のコードをCSSに貼り付けます

■WordPressの場合

左側メニューの「外観」から操作を行います。
以下のどちらかの方法でスタイルシートCSSにコードを追加入力します。
※WPのテーマや、WPの設置状況により異なります。

左側メニューの「外観」から操作を行います。

画像は「外観」→「テーマエディター」→「スタイルシート(style.css)」

上記以外では「外観」→「カスタマイズ」→「追加CSS」

または、FTPで操作が可能な場合、FTPより対象のCSSファイルを開きます。

どちらの方法でも問題ありません。
一番作業を行いやすい、わかりやすい方法でスタイルシート(CSS)へ入力しましょう。

横スクロール用のコードをCSSに貼り付けます

以下のコードをCSS内に(コピペ)で貼り付けます。

/*表(テーブル)横スクロールCSS ここから*/
 table{ 
width:100%;
}
.scroll{
overflow: auto;
white-space:nowrap;
}
.scroll::-webkit-scrollbar{
height: 15px;
}
.scroll::-webkit-scrollbar-track{
background: #f1f1f1;
}
.scroll::-webkit-scrollbar-thumb{
background: #bbb;
}

「表(テーブル)の横スクロールCSS」用コードを貼り付けた後は保存、更新を行ってください。

コードを貼り付けた後は保存、更新をクリック

 

表(テーブル)を表示している記事ページでコードを追加します

CSSでの作業が完了しましたら、次に表(テーブル)を表示しているページを編集します。

WordPress(ワードプレス)の場合、記事ページまたは、固定ページを編集します。

ポイント
編集時のポイント!
WordPressの場合、コードなどのタグを追加する場合は表示タブを「ビジュアル」から「テキスト」に変更してください。

WordPressの場合表示を「ビジュアル」から「テキスト」に変更

ページ内の表(テーブル)が表示されている部分を探します。
テキスト表示で見ると <table> と表示されてます。

ページ内の表(テーブル)が表示されている部分を探します

<table> の表示部分を探しましたら、<table>~</table>を囲むように下記のコードを追加します。

<div class="scroll">
<table>
~省略~ここには表(テーブル)の内容が表示されるように~省略~
</table>
</div>

コードを貼り付けたイメージはこちら↓。

コードを貼り付けたイメージ

貼り付けた後は保存、更新を行ってください。

更新をクリック

記事ページ(固定ページ)ではこれだけで終了です。

確認してみましょう

パソコンでも表(テーブル)の表示で問題がないか確認します。
次に、スマホの表示で見切れやはみ出し等の表示崩れがないか、また横スクロールの対応が反映されているかを確認しましょう。

スマホで表示確認

横スクロールを右にスライドしてみました。枠内に表示され崩れやはみ出しはありません!

横スクロールを右にスライドしてみました

確認時はブラウザのキヤッシュが残っている場合がありますので、スーパーリロードなどを行い確認しましょう。

スーパーリロードの方法はこちら

webページの更新を確認する方法(ブラウザ上での更新方法)ご紹介

webページの更新を確認する方法(ブラウザ上での更新方法)ご紹介

2018年2月18日

スポンサーリンク



コメントを残す

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