「-webkit-overflow-scrolling: touch;」を使い、スマホでtableの理想的な横スクロールを実現する

こんにちは森山です。

長い前置きが始まります(読み飛ばしてOKです)

レスポンシブウェブデザインの登場により、コーディングの現場は大きく変わりました。
いかに、あの小さいスペースの中でコンテンツを見せていけば良いか、それは今でもウェブデザイナーの至上命題として、毎日ウェブデザイナーは孤独な闘いを続けていたりします。
そんな中、レスポンシブウェブデザインでよくハマるタグがあります。

table

です。
つまり、「」ですね。
これをどうやって、スマートフォンで表示させるか、ウェブデザイナーであれば誰もが、どうやって表現しようか悩んできたのではないでしょうか?

私はこう考えます。
グリッドデザインと表は違うということ。
グリッドデザインは、パズルのようなものだと思っています。
見せるデバイスに合わせ、パズルのようにボックスを並び変えることが出来る。
でも、表は違います。
表は「行」と「列」の繋がりと交差が重要なわけで、グリッドのように器用にCSSを駆使してサイトに収まるように並び変えられるのようなものではないと考えています。

前置きが長くなりましたが、言いたいことはこういうことです。
tableをキチっとスマートフォンの幅に合わせなくていいじゃないかと。
横スクロールさせてしまえばいいじゃないかと。
何かとウェブデザインで、悪とされる横スクロールですが、タッチデバイスであれば、そこまで使い勝手の悪さは感じません。
だから、表は表と割り切って、はみ出していけばいいじゃないか!という気持ちを持てば、私たちウェブデザイナーはこの狭い鳥籠から抜け出し、大空に羽ばたけるのではないかと思う次第です。

ここで登場するのが「overflow: auto;」ですよね

さて、話を進めていきます。
tableがブラウザ幅をはみ出してしまっても、そんなときに都合よく横スクロールは表示されません。
少し面倒ではありますが、横スクロールを実現させるためにtableをdivで囲み、そのdivに「overflow: auto;」と「width」を設定します。

※HTMLの例

<div class="table_container">
  <table>
    <thead>
      <tr>
        <th></th>
        <th>ウェブコンサルティング</th>
        <th>ウェブプロモーション</th>
        <th>ウェブサイト制作</th>
        <th>ウェブ研修</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>概要</th>
        <td>弊社実績豊富なコンサルタントによる、ウェブコンサルティングです</td>
        <td>広告の運用代行から、成果の分析・改善提案までを行うプロモーションサービス</td>
        <td>様々なジャンルに対応が可能な、実績豊富なウェブサイト制作です</td>
        <td>企業のウェブ担当者を育成する、ライトアップのウェブ研修サービスです</td>
      </tr>
      <tr>
        <th>料金体系</th>
        <td>¥100,000~300,000</td>
        <td>¥100,000~300,000円</td>
        <td>¥400,000~1,000,000円</td>
        <td>¥200,000~500,000円</td>
      </tr>
    </tbody>
  </table>
</div>

※CSSの例

.table_container{
  width: 100%;
  overflow: auto;
}

そうすると、こんなテーブルが出来上がります。
実際にスマホでこちらを見てください。

ウェブコンサルティング ウェブプロモーション ウェブサイト制作 ウェブ研修
概要 弊社実績豊富なコンサルタントによる、ウェブコンサルティングです 広告の運用代行から、成果の分析・改善提案までを行うプロモーションサービス 様々なジャンルに対応が可能な、実績豊富なウェブサイト制作です 企業のウェブ担当者を育成する、ライトアップのウェブ研修サービスです
料金体系 ¥100,000~300,000 ¥100,000~300,000 ¥400,000~1,000,000 ¥200,000~500,000

スマホで表示したら、タッチデバイスにて、横スクロールをしてみてください。
感じるかと思うのですが、意外とモサっとしていてあんまり体感した感じは良くないかと思います。
やっぱり、横スクロールはあまり良くないなと思うかもしれませんが、まだ諦めるのは早いです。

「-webkit-overflow-scrolling: touch;」で慣性スクロールを設定する

今日の本題はこちら。
このモサっとしたスクロールをスムーズにする方法があります。
それが「慣性スクロール」です。
慣性スクロールとは、タッチデバイスなどで、画面を素早くスクロールさせた際、指を画面から離しても急に止まらず、スクロールがある程度持続される機能のことです。

こちら、CSSで「-webkit-overflow-scrolling: touch;」を指定するだけで、反映されます。

※CSSの例

.table_container{
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

これでOKです。
さて、それでは実際のテーブルで確認してみましょう。
慣性スクロールを設定したテーブルは以下のようになります。
※スマートフォンでご確認ください

ウェブコンサルティング ウェブプロモーション ウェブサイト制作 ウェブ研修
概要 弊社実績豊富なコンサルタントによる、ウェブコンサルティングです 広告の運用代行から、成果の分析・改善提案までを行うプロモーションサービス 様々なジャンルに対応が可能な、実績豊富なウェブサイト制作です 企業のウェブ担当者を育成する、ライトアップのウェブ研修サービスです
料金体系 ¥100,000~300,000 ¥100,000~300,000 ¥400,000~1,000,000 ¥200,000~500,000

設定はとても簡単ですし、tableが横スクロールでも、ストレスなく見ることが出来るようになったと思いませんか?
もし、クライアント様が横スクロールOKでしたら、是非こちらを提案してみてください。

ちなみに、このcloudconsul.jpのサービスページでは価格表を横スクロールさせています。
決して手抜きではありません。
これがいいのです!

Webデザイナー兼、制作ディレクター。オンライン英会話「ワールドトーク」の立ち上げ、及び40社以上のオンライン英会話、100社以上のオンラインマッチングサイトの立ち上げに関与。毎月SEOとオンラインマッチングビジネスのセミナーで講師として登壇中。

関連記事

PAGE TOP