2020/09/03 Web Design

CSSだけで実装できる横スクロールUI（スクロールバーなし）

CSSだけで実装できる横スクロールUI（スクロールバーなし）

モバイル時のUIで横スクロールのを採用するアプリやWebサービスも増えてきており、デザイナーやコーダーの方は実装する機会もあるかと思います。
今回はCSSだけで横スクロールを実装する方法と気にするべきポイントをご紹介します。

横スクロール(horizontal scroll)とは


上記の画像の様なUIのことです。アプリの方が見る機会は多いと思いますが、WEBサービスでも最近はよく見るかと思います。
横スクロールが見れるWEBサービス（2017/09現在）

・Google
・Airbnb
・TripAdvisor
・Bookingtable
・zomato

実装時の気をつけるポイント

横スクロールだと画面の横にコンテンツを配置するため、縦のスペースを取らずにコンテンツを配置することができます。ですが、アプリなどでよく使用されるUIだとはいえ、まだまだ横スクロールに慣れていないユーザーもいるかと思いますので、実装する際に気をつけるポイントをご紹介します。

・はみ出させる

「横スクロールがある」とユーザーに認識させるために、コンテンツをはみださせます。この時のポイントは各アイテムの途中で途切れているようにみせ、まだ先にも情報があるということをユーザーに認識してもらうことです。

・カード型レイアウト

各アイテムはカード型レイアウトにするとよりスクロール可能ということをユーザーに認識してもらえます。別にカード型レイアウトにする必要はありませんが、他アプリ、サービスが横スクロールUIを採用する際は、ほぼカード型レイアウトで実装しているため（メニューの横スクロールは除く）、ユーザーにとっては親しみのあるUIかと思います。

・イベントトラッキングで計測

実装後に実際に横スクロールが使用されているのかを計測するためにGAを使用している場合はイベントトラッキングをしこみましょう。横スクロールのイベント発火時と、各アイテムのaタグクリック時にイベントが計測できるようにしていれば十分かと思います。数字で説明できると上層部やデザインの決定権を持っている人に対して説得力のある説明ができるかと思います。

・表示アイテムの数

特にこれといった数字はないのですが3~10の間が良いかと思います。3以下の理由は3つしかないアイテムに横スクロールにするには少なすぎる、10個以下の理由は、それ以上ユーザーが求めている場合は横スクロールではなく一覧ページを作成して飛ばした方が良い（と個人的に思っている）からです。イベントトラッキングを仕込むことで最適なアイテム数や横スクロールの使用頻度がわかるのでリリース後の数値をもとに改善していくのが良いかと思います。

コード

CSS

.horizontal_scroll_wrap{
    background: #f1f1f1;
    height: 240px;
    overflow-y: hidden;
    margin: 0 -10px;
}
.scroll_lst {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-bottom: 50px;
    margin: 25px 0 0;
    -webkit-overflow-scrolling: touch;
}
.scroll_item {
    margin-right: 10px;
    display: inline-block;
    width: 220px;
    border: 1px solid #ddd;
    background: #fff;
}
.scroll_item:first-child {
    margin-left: 10px;
}

.scroll_item_inr {
    display: block;
}
.scroll_item_info {
    white-space: normal;
    padding: 8px;
}
.scroll_item_ttl {
    font-size: 12px;
    color: #484848;
    line-height: 1.4;
    margin-bottom: 0;
}

HTML

<div class="horizontal_scroll_wrap">
   <ul class="scroll_lst">
       <li class="scroll_item">
           <a href="" class="scroll_item_inr">
               <div class="scroll_item_thum">
                   <img src="https://admin.begeeek.com/wp-content/uploads/2017/04/click-event-after-add-300x158.jpg" alt="" width="300" height="158" class="alignnone size-medium wp-image-986" />
               </div>
               <div class="scroll_item_info">
                   <h4 class="scroll_item_ttl">clickイベントが効かない？appendで後から追加した要素にクリックイベントを追加する方法</h4>
               </div>
           </a>
       </li>
      <li class="scroll_item">
           <a href="" class="scroll_item_inr">
               <div class="scroll_item_thum">
                   <img src="https://admin.begeeek.com/wp-content/uploads/2017/04/click-event-after-add-300x158.jpg" alt="" width="300" height="158" class="alignnone size-medium wp-image-986" />
               </div>
               <div class="scroll_item_info">
                   <h4 class="scroll_item_ttl">clickイベントが効かない？appendで後から追加した要素にクリックイベントを追加する方法</h4>
               </div>
           </a>
       </li>
      <li class="scroll_item">
           <a href="" class="scroll_item_inr">
               <div class="scroll_item_thum">
                   <img src="https://admin.begeeek.com/wp-content/uploads/2017/04/click-event-after-add-300x158.jpg" alt="" width="300" height="158" class="alignnone size-medium wp-image-986" />
               </div>
               <div class="scroll_item_info">
                   <h4 class="scroll_item_ttl">clickイベントが効かない？appendで後から追加した要素にクリックイベントを追加する方法</h4>
               </div>
           </a>
       </li>
      <li class="scroll_item">
           <a href="" class="scroll_item_inr">
               <div class="scroll_item_thum">
                   <img src="https://admin.begeeek.com/wp-content/uploads/2017/04/click-event-after-add-300x158.jpg" alt="" width="300" height="158" class="alignnone size-medium wp-image-986" />
               </div>
               <div class="scroll_item_info">
                   <h4 class="scroll_item_ttl">clickイベントが効かない？appendで後から追加した要素にクリックイベントを追加する方法</h4>
               </div>
           </a>
       </li>
      <li class="scroll_item">
           <a href="" class="scroll_item_inr">
               <div class="scroll_item_thum">
                   <img src="https://admin.begeeek.com/wp-content/uploads/2017/04/click-event-after-add-300x158.jpg" alt="" width="300" height="158" class="alignnone size-medium wp-image-986" />
               </div>
               <div class="scroll_item_info">
                   <h4 class="scroll_item_ttl">clickイベントが効かない？appendで後から追加した要素にクリックイベントを追加する方法</h4>
               </div>
           </a>
       </li>
</ul>
</div>

・white-spaceとinline-blockで横並び

ulにwhite-space:nowrap;、liにdisplay:inline-block;のスタイルをあてることで横並びにしています。注意点としてwhite-space:nowrap;は子要素にも継承されますので、子要素の方でwhite-space:normal;と解除をしないとテキストがカードからはみ出てしまいます。

・paddingとoverflowで横スクロールバーを隠す

ulの親要素のdivにheightとoverflowを指定し、ulにはpadding-bottomを指定することで、横スクロールバーをulの親要素のdivからはみ出させて見せない様にしています。見せる場合は、height指定しなければ見えま

iframeで読み込むとスマホで正しく動作しない場合

twitterから相談で上記のケースが発生するようで、その場合は下記のようにiframeで読み込むときに外側をdivなどで囲ってあげて、そこにスタイルを指定すると動作します。

<div class="wrapper">
   /*読み込むiframeはここに記述*/
</div>

.wrapper {
   -webkit-overflow-scrolling: touch;
    overflow: auto;
}

関連する記事