ラボラジアン 1. はじめに
本ウェブサイトは、スマートフォンのサイズだと 1カラムのレイアウトになるのですが、その際、画面全体を表す HTML要素のスタイルに、「overflow:hidden」が指定されるようになっています（WordPress で使っているテーマでそうなっています）。この指定は「はみ出た部分は表示しない」という意味です。
このような状況で、記事の中に <table>タグを使って何か表を作り、その中身が画面幅に収まらない場合、表のはみ出た部分が見られなくなってしまいます。
例えば、こんな表です。
| 環境変数 | 値 |
|---|---|
| HOMEPATH | \Users\{ユーザー名} |
| PATH | C:\Windows\System32\;C:\Windows\;C:\Windows\System32\Wbem;{各プログラムのパス} |
| USERNAME | {ユーザー名} |
| USERPROFILE | C:\Users\{ユーザー名} |
| WINDIR | C:\WINDOWS |
スマートフォンで本ページを見た場合、この表は画面からはみ出てしまい（横方向）、そのはみ出た部分は見られなくなっているのではないでしょうか。
2. 対応策
このような場合は、<table>タグを、<div style="overflow:auto;"> というタグで囲んでみましょう。
これにより、はみ出した部分は横スクロールで見られるようになります。
<div style="overflow:auto;">
<table>
（省略します）
</table>
</div>
先程の表に、この対応を行ったのが以下です。見た目は変わりませんが、スマートフォンでアクセスすると横スクロールができるようになっています。
| 環境変数 | 値 |
|---|---|
| HOMEPATH | \Users\{ユーザー名} |
| PATH | C:\Windows\System32\;C:\Windows\;C:\Windows\System32\Wbem;{各プログラムのパス} |
| USERNAME | {ユーザー名} |
| USERPROFILE | C:\Users\{ユーザー名} |
| WINDIR | C:\WINDOWS |
3. おわりに
ブログを書くだけでも、いろいろと問題が起きるものです。
1つ1つ丁寧に解決していきましょう。
