html･CSSで横スクロールする方法（flex・div・table）

「横スクロールさせたいけど横スクロールにならない！」

html･CSSで横スクロールする方法を解説します。

横スクロール方法

横スクロールさせるにあたり重要なポイントは下記の2点です。

親要素にoverflow-x:scrollを指定

<style>
.example{
    /*コレ*/overflow-x: scroll;
    padding: 10px;
    border: 1px solid #999;
}
</style>
<div class="example">
    これはoverflow-x: scrollを指定したdivです。パソコンで見ると下にスクロールバーらしきものがあります。
</div>

overflowは枠からはみ出した要素をどのようにするか指定するCSSです。

overflow-xと指定するとx方向つまり横方向だけの指定となります。

scrollを指定するとスクロールができるようになります。

よって「overflow-x:scroll」を指定すると横スクロールができるというわけです。

ただし、上記の例ではoverflow-x:scrollを指定しているのに横スクロールができませんね？

これは要素が横方向にはみ出していないためです。

先述したようにoverflowは枠からはみ出した要素をどのようにするか指定するCSSです。はみ出さないと何もしません。

よって中身を横方向にはみ出させる必要があります。

横幅が親要素を超える

htmlやCSSは特に何もしないと、親要素をはみ出ないように縮んだり、要素や文字が折り返されます。

逆に親要素の幅を超えるには下記が重要です。

要素を折り返させない

横スクロールするとき多くの場合は要素が横並びになっています。

要素を折り返さず横並びにしましょう。

【方法1】display:flex

横並びさせるといえばdisplay:flexです。

これを指定した子要素は横並びになります。また勝手に折り返されません。

overflow-x: scrollを指定した要素の子要素に設置しましょう。

<style>
.example2{
    overflow-x: scroll;
    border: 1px solid #999;
    padding: 10px;
}
.example2>div{
    /*コレ*/display: flex;
}
.example2>div>div{
    border: 1px solid #999;
    padding: 10px 20px;
    margin: 10px;
    background: #f2f2f2;
}
</style>
<div class="example2">
    <div>
        <div>セル1</div>
        <div>セル2</div>
        <div>セル3</div>
        <div>セル4</div>
        <div>セル5</div>
    </div>
</div>

display:flexについて詳しくはこちら↓

【方法2】table

横並べというか表としてtableを使うことも多いですね。

とくに横に長い表だと横スクロールさせないと見えないでしょう。

このときは「overflow-x: scroll」の子要素にtableを置きましょう。

<style>
.example3{
    overflow-x: scroll;
    border: 1px solid #999;
    padding: 10px;
}
</style>
<div class="example3">
    <table border="1">
        <tr>
            <td>セル1</td>
            <td>セル2</td>
            <td>セル3</td>
            <td>セル4</td>
            <td>セル5</td>
        </tr>
        <tr>
            <td>セル1</td>
            <td>セル2</td>
            <td>セル3</td>
            <td>セル4</td>
            <td>セル5</td>
        </tr>
    </table>
</div>

tableのスクロールについてより詳しくはこちら↓

子要素の合計widthが100%以上

親要素の幅を超えるにはとうぜん子要素の幅が100%以上になる必要があります。

【方法1】width指定

widthはoverflow-x: scrollを指定した要素の直下の子要素には必ず指定しましょう。

px指定でも%指定でもいいです。内容量を計算して指定しましょう。

<style>
.example2-1{
    overflow-x: scroll;
    border: 1px solid #999;
    padding: 10px;
}
.example2-1>div{
    /*コレ*/width: 250%;
    display: flex;
}
.example2-1>div>div{
    width: 10%;
    border: 1px solid #999;
    padding: 10px 20px;
    margin: 10px;
    background: #f2f2f2;
}
</style>
<div class="example2-1">
    <div>
        <div>セル1</div>
        <div>セル2</div>
        <div>セル3</div>
        <div>セル4</div>
        <div>セル5</div>
        <div>セル6</div>
        <div>セル7</div>
        <div>セル8</div>
        <div>セル9</div>
        <div>セル10</div>
    </div>
</div>

【方法2】white-space: nowrapで文字を折り返さない

white-space: nowrapを指定すると文字が自動で折り返さなくなります。

widthを指定しなくてもOKです。

<style>
.example2-2{
    overflow-x: scroll;
    border: 1px solid #999;
    padding: 10px;
}
.example2-2>div{
    display: flex;
}
.example2-2>div>div{
    /*コレ*/white-space: nowrap;
    border: 1px solid #999;
    padding: 10px 20px;
    margin: 10px;
    background: #f2f2f2;
}
</style>
<div class="example2-2">
    <div>
        <div>セル1</div>
        <div>セル2</div>
        <div>セル3</div>
        <div>セル4</div>
        <div>セル5</div>
        <div>セル6</div>
        <div>セル7</div>
        <div>セル8</div>
        <div>セル9</div>
        <div>セル10</div>
    </div>
</div>

widthとwhite-space:nowrapどっちがいい？

widthとwhite-space:nowrap2つの方法を紹介しましたがどっちがいいのでしょうか？

メリットとデメリットを見ながら考えてみましょう。

	メリット	デメリット
width	マスの幅、横スクロールの幅を制限できる	マスが増減するたびwidthの指定が必要（あるいは子要素が縮む）
white-space:nowrap	マスが増えても調整不要	長文があると横スクロールが非常に長くなる マスごとに横幅が異なる

マスの幅、数が決まっているとき→widthがオススメ

マスが増減する かつ 文字数が短いまたは任意の箇所で改行できる→white-space:nowrapがオススメ

ちなみにoverflow-x:autoでもOK

ここまでoverflow-x:scrollで指定してきました。

これを指定すると子要素が親要素を超えていなくても下部にスクロールバーがでてきます。

「子要素が親要素以下の時はスクロールバーを出したくない！」というときはoverflow-x:autoがいいでしょう。

【まとめ】横スクロールする方法

親要素にoverflow-x:scroll（またはauto）

横幅が親要素を超える

• 要素を折り返させない
  • display:flex
  • table
• 子要素の合計widthが100%以上
  • マスの幅、数が決まっているとき→widthがオススメ
  • マスが増減する かつ 文字数が短いまたは任意の箇所で改行できる→white-space:nowrapがオススメ

以上、html･CSSで横スクロールする方法でした。