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つ丁寧に解決していきましょう。