【すぐ出来る！】HTML＆CSSテーブルスクロールバーの作り方(コピペOK！)

皆さんこんにちは新米です。

皆さんはスクロールバーをご存知ですか？

知っている方がほとんどだと思おいますが、ざっくり説明します。

スクロールバーとは画面内に内容が収まりきらない時、スクロールして収まりきらなかった情報を見れるようにするための機能です。例えば、グーグルのやブログ記事など多くの場所で使われています。また、スクロールバーは2種類あり基本的に画面の右に付いている「縦スクロールバー」と画面の下についている「横スクロールバー」があります。縦は上下にスクロールするためにあり、横は右左にスクロールするためにあります。

本記事ではそんなスクロールバーの作り方について紹介していきたいと思おいます。

【すぐ出来る！】HTML＆CSSスクロールバーの作り方
ポイントを解説
まとめ

【すぐ出来る！】HTML＆CSSスクロールバーの作り方

今回は生徒の成績テーブル表を作成し、そこにスクロールバーを付けたいと思います。

HTML[サンプルコード]

<div class="listScroll">
        <table>
            <tr>
                <!--テーブルの項目名作成-->
                <th>選択</th>
                <th>名前</th>
                <th>国語</th>
                <th>数学</th>
                <th>英語</th>
                <th>社会</th>
                <th>理科</th>
            </tr>
            <tr>
                <!--項目に沿って初期設定-->
                <td><input type="checkbox"></td>
                <td class="column">一郎</td>
                <td class="column">50</td>
                <td class="column">25</td>
                <td class="column">70</td>
                <td class="column">100</td>
                <td class="column">35</td>
            </tr>
            <tr>
                <!--項目に沿って初期設定-->
                <td><input type="checkbox"></td>
                <td class="column">次郎</td>
                <td class="column">100</td>
                <td class="column">70</td>
                <td class="column">70</td>
                <td class="column">100</td>
                <td class="column">80</td>
            </tr>
            <tr>
                <!--項目に沿って初期設定-->
                <td><input type="checkbox"></td>
                <td class="column">三郎</td>
                <td class="column">30</td>
                <td class="column">20</td>
                <td class="column">40</td>
                <td class="column">10</td>
                <td class="column">35</td>
            </tr>
            <tr>
                <!--項目に沿って初期設定-->
                <td><input type="checkbox"></td>
                <td class="column">四郎</td>
                <td class="column">60</td>
                <td class="column">60</td>
                <td class="column">70</td>
                <td class="column">55</td>
                <td class="column">65</td>
            </tr>
            <tr>
                <!--項目に沿って初期設定-->
                <td><input type="checkbox"></td>
                <td class="column">五郎</td>
                <td class="column">100</td>
                <td class="column">100</td>
                <td class="column">100</td>
                <td class="column">100</td>
                <td class="column">100</td>
            </tr>
        </table>
</div>

１[縦スクロールバー]

[サンプル結果]

CSS[サンプルコード]

     /* スクロールバーの調整 */
    .listScroll{
        /*テーブルの横幅が250px以上の場合スクロール*/
        width: 250px;
　　　　 /*テーブルの縦幅が100px以上の場合スクロール*/
        height: 100px;
        /*縦スクロール*/
　　　  overflow: scroll;
        /*横スクロール*/
        overflow-x: hidden;
        margin-left: auto;
        margin-right: auto;
        white-space: nowrap;
    }

    /* 一覧表の調整 */
    td {
        border-bottom: 1px solid black;
        border-left: 1px solid black;
        border-right: 1px solid black;
        text-align: center;       
    }
    th {
        background-color: #ddffeb;
        border-bottom: solid black;
        border-left: solid black;
        border-right: solid black;
        border-top: solid black;
        border-width: 2px;
        position: sticky;
        top: 0;
        text-align: center; 
    }
    /* カラムの調整 */
    .column {
        overflow: hidden;/*スクロール時にカラム名を固定*/
        text-overflow: ellipsis;
    }

２[横スクロールバー]

サンプル結果

CSS[サンプルコード]

     /* スクロールバーの調整 */
    .ListScrollx {
        /*テーブルの横幅が100px以上の場合スクロール*/
        width: 100px;
　　　　 /*テーブルの縦幅が150px以上の場合スクロール*/
        height: 150px;
        /*縦スクロール*/
        overflow: hidden;
        /*横スクロール*/
        overflow-x: scroll;
        margin-left: auto;
        margin-right: auto;
        white-space: nowrap;
    }
/* 以下省略*/

３[縦横スクロールバー]

[サンプル結果]

CSS[サンプルコード]

     /* スクロールバーの調整 */
    .listScroll{
        /*テーブルの幅が100px以上の場合スクロール*/
        width: 100px;
        /*テーブルの縦幅が100px以上の場合スクロール*/
        height: 100px;
        /*縦スクロール*/
        overflow: scroll;
        /*横スクロール*/
        overflow-x: scroll;
        margin-left: auto;
        margin-right: auto;
        white-space: nowrap;
    }
/* 以下省略*/

新米太郎

サンプルコードを見本に自分なりにアレンジしてみましょう！

ポイントを解説

■スクロールバーは「overflow: scroll;」を使う。

overflow: scroll;を指定すると、はみ出た部分が隠れ、スクロールにより表示することができるようになります。しかし「overflow: scroll;」のみだと縦スクロールバーが表示されるので、横スクロールバーを表示したい場合は、「overflow: scroll;」と「white-space: nowrap;」セットで定義してください。

■「overflow: hidden;」でスクロールバーを隠す。

overflow: hidden;を指定すると、スクロールバーが非表示になります。あくまで非表示になるだけであって実際に存在しないわけではないのでそこの所を押さえときましょう。
もちろん収まりきらない部分は非表示になります。

■「overflow-x: scroll;」「overflow-ｙ: scroll;」を理解しよう。

今回はoverflow-x: scroll;しか使用していませんが、別の方法でもスクロールバーは作れます。
overflow-x: scroll;は横スクロールバーに対してoverflow-ｙ: scroll;は縦スクロールバーが作れます。基本的に「overflow: scroll;」と同じです。

■「overflow: auto;」は縦スクロールと同じ

今回は使用していませんが、overflow: auto; も縦方向にスクロールすることができます。

縦スクロールも横スクロールも表示の仕方は様々あることを押さえておこう！