ホームへ

html・CSSで横スクロールする方法(flex・div・table)

2021年07月15日
セル1
セル2
セル3
セル4
セル5
セル6
セル7
セル8
セル9
セル10

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

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

横スクロール方法

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

  1. 親要素にoverflow-x:scrollを指定
  2. 横幅が親要素を超える

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

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

これはoverflow-x:scrollを指定したdivです。パソコンで見ると下にスクロールバーらしきものがあります。
<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は特に何もしないと、親要素をはみ出ないように縮んだり、要素や文字が折り返されます。

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

  • 要素を折り返させない
  • 子要素の合計widthが100%以上

要素を折り返させない

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

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

【方法1】display:flex

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

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

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

セル1
セル2
セル3
セル4
セル5
<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を置きましょう。

セル1 セル2 セル3 セル4 セル5
セル1 セル2 セル3 セル4 セル5
<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指定でも%指定でもいいです。内容量を計算して指定しましょう。

セル1
セル2
セル3
セル4
セル5
セル6
セル7
セル8
セル9
セル10
<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です。

セル1
セル2
セル3
セル4
セル5
セル6
セル7
セル8
セル9
セル10
<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で横スクロールする方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ