【CSS】スマホ、タブレットで横スクロールする実装サンプル集

【CSS】スマホ、タブレットで横スクロールする実装サンプル集
横スクロールー
横スクロールー

画像を横にスクロールしてみる

幅600px以下は横スクロールに設定してみました。
(スマホでチェックしてみていただくとわかりやすいかと思われますー)

See the Pen 【CSS】スマホで横スクロール(画像) by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<div class="scroll-box">
    <div><img src="https://125naroom.com/demo/img/simple01.jpg" alt=""></div>
</div>

CSS

/*===========
.scroll-box
===========*/
.scroll-box {
  overflow-x: auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.scroll-box div img {
  max-width: 100%;
  min-width: 600px;
  vertical-align: top;
}
 
/*===========
scrollbar
===========*/
/*スクロールバー全体の高さ*/
.scroll-box::-webkit-scrollbar {
  height: 4px;
}
/*スクロールバー全体の背景*/
.scroll-box::-webkit-scrollbar-track {
  background: #eee;
}
/*スクロールバーの動く部分*/
.scroll-box::-webkit-scrollbar-thumb {
  background: #aaa;
  border: none;
}
/*スクロールバーの動く部分のホバー(マウスオーバー)*/
.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #999;
}

テーブルを横にスクロールしてみる

幅600px以下は横スクロールに設定してみました。
(スマホでチェックしてみていただくとわかりやすいかと思われますー)

See the Pen 【CSS】スマホで横スクロール(テーブル) by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<div class="scroll-box">
    <table>
        <tbody>
            <tr>
                <th width="55%">テキスト</th>
                <th width="45%">テキスト</th>
            </tr>
            <tr>
                <td>テキストテキストテキストテキスト</td>
                <td class="t-c">テキスト</td>
            </tr>
            <tr>
                <td>テキストテキストテキストテキストテキスト</td>
                <td class="t-c">テキスト</td>
            </tr>
            <tr>
                <td>テキストテキスト</td>
                <td class="t-c">テキスト</td>
            </tr>
            <tr>
                <td>テキストテキストテキスト</td>
                <td class="t-c">テキスト</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

/*===========
.scroll-box
===========*/
.scroll-box {
  overflow-x: auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
 
/*===========
scrollbar
===========*/
/*スクロールバー全体の高さ*/
.scroll-box::-webkit-scrollbar {
  height: 4px;
}
/*スクロールバー全体の背景*/
.scroll-box::-webkit-scrollbar-track {
  background: #eee;
}
/*スクロールバーの動く部分*/
.scroll-box::-webkit-scrollbar-thumb {
  background: #aaa;
  border: none;
}
/*スクロールバーの動く部分のホバー(マウスオーバー)*/
.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #999;
}
 
/*===========
table
===========*/
.scroll-box table {
  width: 100%;
  min-width: 600px;
  border: 1px solid #ccc;
  margin: 0;
}
.scroll-box table th {
  padding: 15px;
  background: #eaf5fc;
  border: 1px solid #ccc;
  vertical-align: middle;
  font-size: 14px;
  text-align: center;
}
.scroll-box table td {
  padding: 15px;
  background: #fff;
  border: 1px solid #ccc;
  vertical-align: middle;
  font-size: 14px;
  text-align: center;
}

まとめたコンテンツを横にスクロールしてみる

幅1200px以下は横スクロールに設定してみました。
(スマホやタブレットでチェックしてみていただくとわかりやすいかと思われますー)

See the Pen 【CSS】スマホで横スクロール(まとめたコンテンツを) by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<div class="scroll-box">
    <div class="f_area">
        <div class="f_one">
            <a href="https://125naroom.com/web/3510" target="_blank"><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt=""></a>
        </div>
        <div class="f_one">
            <a href="https://125naroom.com/web/3510" target="_blank"><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt=""></a>
        </div>
        <div class="f_one">
            <a href="https://125naroom.com/web/3510" target="_blank"><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt=""></a>
        </div>
    </div>
</div>

CSS

/*===========
.scroll-box
===========*/
.scroll-box {
  overflow-x: auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
 
/*===========
scrollbar
===========*/
/*スクロールバー全体の高さ*/
.scroll-box::-webkit-scrollbar {
  height: 4px;
}
/*スクロールバー全体の背景*/
.scroll-box::-webkit-scrollbar-track {
  background: #eee;
}
/*スクロールバーの動く部分*/
.scroll-box::-webkit-scrollbar-thumb {
  background: #aaa;
  border: none;
}
/*スクロールバーの動く部分のホバー(マウスオーバー)*/
.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #999;
}
 
/*===========
.f_area
===========*/
.scroll-box .f_area {
  display: flex;
  justify-content: center;
}
.scroll-box .f_area .f_one {
  width: 33.333%;
}
.scroll-box .f_area .f_one a {
  display: block;
  overflow: hidden;
  backface-visibility: hidden;
}
.scroll-box .f_area .f_one a img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
  transform: scale(1);
  transition: .5s;
}
.scroll-box .f_area .f_one a img:hover {
  transform: scale(1.1);
}
@media screen and (max-width: 1024px) {
  .scroll-box {
    overflow-x: auto;
  }
  .scroll-box .f_area {
    justify-content: flex-start;
    overflow-x: scroll;
    padding: 0 0 15px;
  }
  .scroll-box .f_area .f_one {
    flex: 0 0 45%;
  }
}
@media screen and (max-width: 767px) {
  .scroll-box .f_area .f_one {
    flex: 0 0 80%;
  }
}

スクロールバーもCSSでカスタマイズできます

CSS

/*===========
scrollbar
===========*/
/*スクロールバー全体の高さ*/
.scroll-box::-webkit-scrollbar {
  height: 4px;
}
/*スクロールバー全体の背景*/
.scroll-box::-webkit-scrollbar-track {
  background: #eee;
}
/*スクロールバーの動く部分*/
.scroll-box::-webkit-scrollbar-thumb {
  background: #aaa;
  border: none;
}
/*スクロールバーの動く部分のホバー(マウスオーバー)*/
.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #999;
}

さいごに

横スクロールっておしゃれですねー
おしゃれっていいですよねー
Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

4

/

14

2024

Googleさんの
おすすめ

4

/

14

2024

デザインの記事

TALKING CITY|柏の葉イノベーションフェス2023
5年経った無印良品窓の家
【jQuery】 ローディング、実装サンプル集