画像や表，文章を横スクロールで表示する方法
概要
スマートフォン向けの表示等において、画像や表が画面の幅より長いは画像を縮小表示させたり表の横幅をスマートフォンの画面サイズに合わせて表示させる方法もあります。しかし、縮小表示をすると見難くなったり、表の幅をスマートフォンの画面サイズに合わせるとセル内の文字が複数行に表示されてしまい見難くなってしまう場合があります。このような場合に横スクロールで表示する方法について説明します。また、文章の場合は幅に応じて自動で改行されますが、これを改行せずにスクロールで表示する方法について説明します。
ソース（画像の場合）
HTML
- <div class="mobile-scroll">
- <img src="images/scroll.gif" height="600" width="800" alt="スクロールで表示します。">
- </div>
CSS
- .mobile-scroll {width: 100%; overflow-x: scroll;}
表示例（画像の場合）
以下のようにはみ出した部分がスクロールで表示されます。
ソースの解説（画像の場合）
HTMLの解説
<div class="mobile-scroll">
スクロールで表示したい画像を「div」タグで囲います。
<img src="images/scroll.gif" height="600" width="800" alt="スクロールで表示します。">
画像を表示するタグを記述します。必要に応じて height や width，altを記入します。例では記入していますが、画像の場合は height と width は記入しなくても問題はありません。
なお、画像の横幅（width）が画面の横幅より短い場合は、横スクロールでは表示されません。
</div>
スクロールで表示したい部分の終わりで「div」タグを閉じます。
CSSの解説
.mobile-scroll {width: 100%; overflow-x: scroll;}
「width」に「px」または「%」で幅を決めます。スマートフォン向けレイアウトの場合は100%でよい。
「overflow-x」に「scroll」を指定して、画面からはみ出した部分は横スクロールで表示するようにします。
ソース（表の場合）
HTML
- <div class="mobile-scroll">
- <table border="2" class="table-width">
- <tr>
- <td class="cell-width">データ1</td>
- <td class="cell-width">データ2</td>
- <td class="cell-width">データ3</td>
- </tr>
- <tr>
- <td class="cell-width">データ4</td>
- <td class="cell-width">データ5</td>
- <td class="cell-width">データ6</td>
- </tr>
- <tr>
- <td class="cell-width">データ7</td>
- <td class="cell-width">データ8</td>
- <td class="cell-width">データ9</td>
- </tr>
- </table>
- </div>
CSS
- .mobile-scroll {width: 100%; overflow-x: scroll;}
- .table-width {width: 900px; border: solid 1px #000000;}
- .cell-width {width: 300px;}
表示例（表の場合）
以下のようにはみ出した部分がスクロールで表示されます。
| データ1 | データ2 | データ3 |
| データ4 | データ5 | データ6 |
| データ7 | データ8 | データ9 |
ソースの解説（表の場合）
HTMLの解説
<div class="mobile-scroll">
スクロールで表示したい表を「div」タグで囲います。
<table border="2" class="table-width">
<tr>
<td class="cell-width">データ1</td>
<td class="cell-width">データ2</td>
<td class="cell-width">データ3</td>
</tr>
<tr>
<td class="cell-width">データ4</td>
<td class="cell-width">データ5</td>
<td class="cell-width">データ6</td>
</tr>
<tr>
<td class="cell-width">データ7</td>
<td class="cell-width">データ8</td>
<td class="cell-width">データ9</td>
</tr>
</table>
表のタグを記述します。横スクロールで表示する場合、table タグに width の指定が必要です。指定しなかった場合、横スクロールでは表示されません。例ではtable タグの width の指定は後述の CSS （table-width）で行っています。なお、セル（td タグ）には width の指定はしなくても問題ありません。
</div>
スクロールで表示したい部分の終わりで「div」タグを閉じます。
CSSの解説
.mobile-scroll {width: 100%; overflow-x: scroll;}
「width」に「px」または「%」で幅を指定します。スマートフォン向けの場合は100%でよい。
「overflow-x」に「scroll」を指定して、画面からはみ出した部分は横スクロールで表示するようにします。
.table-width {width: 900px; border: solid 1px #000000;}
「width」に表の幅を指定します。また、「border」に線の種類，太さ，色を指定します。
なお、「width」を指定しないと横スクロールで表示されません。また、「width」が画面の幅よりも短い場合も横スクロールで表示されません。
.cell-width {width: 300px;}
必要に応じてセルの幅を指定します。指定しなくても横スクロールで表示されます。
ソース（文章の場合）
HTML
- <div class="mobile-scroll">
- <p class="sentence-scroll">ここに文章が入ります。</p>
- </div>
CSS
- .mobile-scroll {width: 100%; overflow-x: scroll;}
- .sentence-scroll {width: 900px;}
表示例（文章の場合）
以下のようにはみ出した部分がスクロールで表示されます。
このようにはみ出した部分はスクロールで表示されます。
ソースの解説（文章の場合）
HTMLの解説
<div class="mobile-scroll">
スクロールで表示したい文章（p タグ）を「div」タグで囲います。
<p class="sentence-scroll">ここに文章が入ります。</p>
文章（p タグ）を記述します。
</div>
スクロールで表示したい部分の終わりで「div」タグを閉じます。
CSSの解説
.mobile-scroll {width: 100%; overflow-x: scroll;}
「width」に「px」または「%」で幅を指定します。スマートフォン向けの場合は100%でよい。
「overflow-x」に「scroll」を指定して、画面からはみ出した部分は横スクロールで表示するようにします。
.sentence-scroll {width: 900px;}
「width」に「px」または「%」で幅を指定します。
なお、「width」を指定しないと横スクロールで表示されません。また、「width」が画面の幅よりも短い場合も横スクロールで表示されません。