「コンテンツの幅が画面の幅を超えています」のエラーの原因はtableタグ

Google Search Consoleのモバイルユーザビリティのエラー WEB全般
スポンサーリンク

Google Search Consoleのモバイルユーザビリティのエラーとは

Google Search Consoleのモバイルユーザビリティのエラーが出ていました。

モバイルユーザビリティとは、サイトをスマホで見た時に、閲覧者が見やすいかどうか、使いやすいかどうかをGoogleの基準に則って教えてくれるサービスです。

今回出たエラーがどんなエラーだったかというと

エラー テキストが小さすぎて読めません
エラー クリック可能な要素同士が近すぎます
エラー コンテンツの幅が画面の幅を超えています

の3つが出ていました。

「エラー コンテンツの幅が画面の幅を超えています」の原因

該当ページはtableタグを使って表示しています。

Google Search Console
Search Console でプロパティに関する Google 検索結果データを監視できます。

スマホの見た目をチェックできる「モバイルフレンドリーテストのページ」でレンダリングテストしてみると、表の横幅が大きすぎて、それをスマホの画面に収めるために、文字や画像が縮小されてしまっていました。

URLの文字列が折り返されなかったので、テーブルが画面からはみ出すほど横に伸びたのが原因です。
なので、テーブルの中身を強制的に折り返し、tableも大きくなりすぎないようにcss設定にしました。

table {
max-width : 100%;
table-layout : fixed;
}
table tr,td {
overflow-wrap: break-word;
word-wrap: break-word;
}
table-layout : fixed;

で整えるかは、好みの問題かもしれません。

URLは単語の途中で折り返しても問題ないです。
そもそも訪問者に読ませる目的ではなくコピペ出来るように載せているので、画面からはみ出してコピペできない事態を避けるために折り返してでもセルに収まるようにしました。

折り返しのcssもググった方が自分で考えるより早いので、検索したところこちらのサイトに分かりやすく書かれていました。

【CSS】 テキストを折り返す方法!自動で改行・レスポンシブにも対応
「テキストが中途半端なところで折り返される」 「英語や文字がはみ出てしまう」 こんな悩みを持ったことはありませんか? 小さなことですが、サイトの印象に関わる深刻な悩みの一つです。 例えば、見出しに英語

こちらのサイトではテーブル幅をpxで指定してましたが、px固定するとテーマを変えた時に困るとイケないので、max-widthを100%にしてやってみたのが上記のコードです。

その結果、上手く画面に収まってくれたので、これでいきます。

「エラー テキストが小さすぎて読めません」の原因

横に伸びすぎたテーブルを画面におさめるために縮小表示のようになってしまったのが原因でした。

今回はテーブルをページの横幅以内に入るように文章を折り返し設定にしたので、このエラーも同時になくなりました。

エラー クリック可能な要素同士が近すぎますの原因

このエラーも画面の文字が小さすぎたので、リンクのテキストも小さくなり、タップするリンクが近づきすぎたのが原因でした。

テーブル内の文字列を折り返して、縮小表示のようにならなくなったので、テキストの大きさが戻ってエラーもなくなりました。

Makoto

リアル坊主。
普段はお寺にいます。

筋肉体操に影響を受けて40才代で筋トレ始めました。

Makotoをフォローする
WEB全般
スポンサーリンク
Makotoをフォローする
Bonz-net | WEBサイトはどう世の中の役に立つか?と考えてみるサイト

コメント

タイトルとURLをコピーしました