モバイルフレンドリーで「コンテンツの幅が画面の幅を超えています」と表示される場合の対応

ウェブサイトへのアクセスはパソコンよりもスマートフォンで見られる方が増えてきている昨今、従来の HTML と CSS でのデザインではスマホやタブレットで見づらいことがあり、その診断は"Google モバイルフレンドリーテスト"で確認することができる。

1.Google モバイルフレンドリーテスト とは


"Google モバイルフレンドリーテスト"とは Google 社が提供する無料ツールで、入力欄に検査したいサイトの URL を入力するか、HTML のソースをアップロードするとスマホやタブレットなど携帯端末でサイトを見た際に適したレイアウトになっているかチェックしてくれる。
Google モバイルフレンドリーテスト

2.検査結果でよくある問題


"Google モバイルフレンドリーテスト"の検査結果でよく見かける内容が次の3点だ。

 ・コンテンツの幅が画面の幅を超えている
 ・文字サイズが小さすぎる
 ・リンク間の幅が狭すぎる
 ・viewport が無い

3.「コンテンツの幅が画面の幅を超えています」とは


検査結果の内、「コンテンツの幅が画面の幅を超えています」はサイトを表示した際に横スクロールが必要となるほどの横幅がある場合が該当する。
スマホやタブレットなど携帯端末向けに HTML のメタタグに viewport を入れておくとサイトの表示に利用されているブラウザの幅に応じて全幅が画面内に収まるように最適化してくれるのだが、この viewport を入れていても「コンテンツの幅が画面の幅を超えています」と警告される場合がある。

4.「コンテンツの幅が画面の幅を超えています」の対応


メタタグに viewport があるにも関わらず"Google モバイルフレンドリーテスト"で「コンテンツの幅が画面の幅を超えています」と出た場合はウェブサイトの CSS を修正することで対応することができる。

実際にブラウザで確認しながら修正する方が時間がかからないため、まずは「コンテンツの幅が画面の幅を超えています」がどういう状態なのか表示させてみる。

ブラウザ「Firefox」には幅を指定して表示する機能があり、キーボードで Ctrl + Shift + M を押すとサイズ指定でウェブサイトを表示できる。
画面上部に横、縦のサイズを指定することができ、その右にあるカメラボタンでスクリーンショットを取ることもできる。

サイズを横 360px x 縦 480px にしたところ、右端が切れるとともに画面下部に横スクロールバーが出ているのがわかる。
尚、下図のサイトは viewport を入れた状態である。

CSS修正前の幅360pxの場合


次に横幅を広げて横 760px x 縦 480px にしてもまだ右端が切れるとともに画面下部に横スクロールバーが出ている。

CSS修正前の幅760pxの場合


CSS を確認したところ、body にサイトの横幅を最低 960px にする指定があったため、これを 1px に変更する。

/* min-width: 960px; */

min-width: 1px;


この状態で再度ブラウザで確認すると右端まで表示されて、画面下部に横スクロールバーが表示されないようになった。
注意点としては min-width を小さくすることでブラウザの幅によってはパーツが下に回り込んだり、文章幅が狭まったりするのでブラウザを広げたり縮めたりして全体のレイアウトを確認したほうがよい。

CSS修正後の幅760pxの場合


4.Google モバイルフレンドリーテストで再度確認する


再度"Google モバイルフレンドリーテスト"で確認してみると「コンテンツの幅が画面の幅を超えています」が消えて検査に合格しているのがわかる。

モバイルフレンドリーの結果


"Google モバイルフレンドリーテスト"で合格するためには CSS で @media( max-width: ○○px ) を利用してパソコン用と携帯端末用に CSS を用意するとパソコン用と携帯端末用と分ける必要が無く管理しやすくなる。

この記事へのコメント