ホーム(記事一覧)へ

html・CSSで横並びしつつ折り返さないで横スクロールする方法3選

「横並べさせると横幅いっぱいになったところで折り返されてしまう。折り返させないにはどうするんだっけ?」

html・CSSで横並びしつつ折り返さないで横スクロールする方法を3つ紹介します。

【方法1】table

htmlのtableを使うと折り返されません。

1 2 3 4 5 6 7 8 9
<table border="1">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

簡単なものや幅をあまりとらないものであればtableでもいいでしょう。

しかし、スマホではブラウザの横幅が小さくなるため要注意です。

横スクロール

横に並べる要素が多い場合、工夫しないとはみ出してしまいます。

「overflow-x:scroll」を指定して横スクロールさせましょう。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
<style>
.example{
    overflow-x: scroll;
}
.example td{
    white-space: nowrap;
}
</style>
<div class="example">
    <table border="1">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td>18</td>
            <td>19</td>
            <td>20</td>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
            <td>26</td>
            <td>27</td>
            <td>28</td>
            <td>29</td>
        </tr>
    </table>
</div>

「overflow-x:scroll」は横方向にスクロールさせるCSSです。

tableそのものに「overflow-x: scroll」を指定しても効きません。

tableに親要素を用意しそれにoverflow-x: scrollを指定しましょう。

【方法2】flex

CSS display:flexflex-wrap:nowrapをセットで指定すると折り返されません。

1
2
3
4
5
6
7
8
9
<style>
.example2{
    /*コレ*/display: flex;
    /*コレ*/flex-wrap: nowrap;
    border: 1px solid #999;
    background: #e0f5ff;
    padding: 10px;
}
.example2>div{
    border: 1px solid #999;
    padding: 15px;
    background: #faefcb;
}
</style>
<div class="example2">
    <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>

「display:flex」は子要素の位置調整をするCSSです。これを使うとカンタンに子要素を横並べできます。

「flex-wrap:nowrap」はdisplay:flexの子要素の横並べを折り返さないようにするCSSです。なおflex-wrapの初期値はnowrapですので指定しなくても大丈夫です。

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

横スクロール

横に並べる要素が多い場合、工夫しないとはみ出してしまいます。

「overflow-x:scroll」を指定して横スクロールさせましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
.example3{
    /*コレ*/overflow-x: scroll;
    display: flex;
    flex-wrap: nowrap;
    border: 1px solid #999;
    background: #e0f5ff;
    padding: 10px;
}
.example3>div{
    border: 1px solid #999;
    padding: 15px;
    background: #faefcb;
    /*コレ*/white-space: nowrap;
}
</style>
<div class="example3">
    <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>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
</div>

「overflow-x:scroll」は横方向にスクロールさせるCSSです。

パソコンではスクロールバーが表示されるためわかりやすいですが、スマホではスクロールバーは表示されません。わざと途切れさせるようにするなど続きがあることがわかるようにしましょう。

「white-space:nowrap」は文字の折り返しをさせないCSSです。

【方法3】inline-block

CSS display:inline-blockwhite-space:nowrapをセットで指定すると折り返されません。

1
2
3
4
5
6
7
8
9
<style>
.example4{
    /*コレ*/white-space: nowrap;
    border: 1px solid #999;
    background: #e0f5ff;
    padding: 10px;
}
.example4>div{
    /*コレ*/display: inline-block;
    border: 1px solid #999;
    padding: 15px;
    background: #faefcb;
}
</style>
<div class="example4">
    <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>

「display:inline-block」はブロック要素とインライン要素両方の特徴を合わせ持つようにさせるCSSです。

横並べさせつつwidthを指定することなどができます。

ただし、インラインの特性上左右に隙間ができてしまいます。これはhtmlソースの空白も詰めてしまうと消すことができますが、やっかいと感じるのであればflexの方法をおススメします。

「white-space:nowrap」は文字の折り返しをさせないCSSです。

inline-blockの要素を折り返させないようにできます。

横スクロール

横に並べる要素が多い場合、工夫しないとはみ出してしまいます。

「overflow-x:scroll」を指定して横スクロールさせましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
.example5{
    /*コレ*/overflow-x: scroll;
    white-space: nowrap;
    border: 1px solid #999;
    background: #e0f5ff;
    padding: 10px;
}
.example5>div{
    white-space: nowrap;
    display: inline-block;
    border: 1px solid #999;
    padding: 15px;
    background: #faefcb;
}
</style>
<div class="example5">
    <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>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
</div>

まとめ

横並びしつつ折り返さない

  • 横幅をあまりとらないもの、カンタンに済ませたいならtable
  • CSSで調整するならdisplay:flexwhite-space:nowrap
  • 一応コレも可能。display:inline-blockwhite-space:nowrap

横スクロール

overflow-x:scrollを指定

以上、html・CSSで横並びしつつ折り返さないで横スクロールする方法3選でした。

関連記事