画面オーバーフローの処理方法

画面の小さいスマホや解像度の低いディスプレイなどでは、大きな画像や大きな表やプログラムのスクリプトなどの表示が画面に収まらないことがあります。スマートフォンでは画面の横に空白ができることがあります。画面オーバーフローの処理方法です。

横幅の狭い画面でのコンテンツのオーバーフロー問題

スマートフォンなどでは、ビューポート(viewport)を「device-width」に設定すると画面の横幅は、横幅の最小値の機種では約320ピクセルになります。もし、この範囲にコンテンツが収まらないと、コンテンツがオーバーフローしてしまいます。

レスポンシブWebデザインで適切にページを作成していても、大きな横幅の画像や大きな表(テーブル)やスクリプトなどでは適切な処理をしないと、横幅が画面からはみ出してしまいます。

そうなると、スマートフォンでは右側に空白部分ができて、画面が横に動いて、操作性が悪くなります。以下に記述した対策方法では、スマートフォンだけではなく、全てのブラウザでの対策となります。

画像(img)の表示方法については、今まで色々と試行錯誤しましたが、私は次の表示方法が良いのではないかとの結論に達しました。

それは、CSSで画像に「max-width」を指定する方法です。私は次のように指定しています。また、画像には横幅や縦幅を全く指定していません。

img {margin:4px;max-width:97%;height:auto}

この方法だと、ほぼ全てのブラウザやスマホやタブレット楽天などで、画像が表示範囲を超える場合は超えないように縮小されて表示されます。

HTMLやPHPやJavaScriptなどのスクリプトをpreやcodeなどのタグで表示させた場合の、画面からのはみ出しをどのようにするか、迷うところです。

私は以前は「white-space:pre-wrap;word-wrap:break-word」をCSSに設定して、表示がはみ出さないようにしていました。しかし、次のように「overflow:auto」を使ってスクロールバーを表示することにしました。

code,pre {margin:5px 0;background-color:#ddd;display:block;overflow:auto}

スクロールバーを表示してコンテンツの表示がはみ出さないようにする方法は、印刷する場合には全て印刷できる利点があります。

この場合、スマートフォンではスクロールバーは表示されませんが、スクリプトコード部分では右にスクロールできるようになります。

しかし、下記の、word-wrap:break-wordをbodyタグに追加指定する方法も適用するとスマートフォンではスクロールバーが表示されなくて、全てのコンテンツが表示されます。

大きな表(テーブル)を表示させる時、テーブルに「overflow:auto」などのCSSを適用しただけではうまく表示されません。次のように、特別に大きな表だけテーブルタグをdivタグで囲んでdivタグに「overflow:auto」を記述します。

ちょっと記述は面倒になりますが、特別に大きな表の場合だけなので、大きな問題は無いでしょう。

もちろん、テーブルには横幅や縦幅などを全く記述しません。そうすれば、普通の大きさの表であれば、画面の表示領域に応じて適切に(レスポンシブに)表の大きさが変化して表示されます。

<div style="overflow:auto">
<table>
<tr>
<td>
コンテンツなどの大きな表の場合
</td>
</tr>
<table>
</div>

このようにすると、特別に大きな表の横幅が切れそうになると普通のブラウザでは横幅のみのスクロールバーが表示されます。スマートフォンではスクロールバーは表示されませんが、表の部分だけ横にスクロールできるようになります。

ブラウザでは、ページ全体のスクロールバーは表示されず、また、スマートフォンでも、右側に空白部分ができたりしません。とても操作性が良くなります。

URLなどのアルファベットと数字と記号がスペースを含まないで並んでいる場合は、パソコンのブラウザなどでは全く問題無く表示されます。

しかし、スマートフォンでは、途中で改行されないで表示されるようです。つまり画面をオーバーフローしてしまいます。

そこで、適当な所で改行して表示させる為には、次のようにCSSを適用します。

body {word-wrap:break-word}

つまり、word-wrap:break-wordをbodyタグに追加指定するだけでうまくいくようです。英文表示も問題無いようです。