2016年2月5日 12:53 pm

スマホサイト用にレイアウトを組む際、だいたいの部分が横フロートのものをたてに並び替えると思います。

しかし、表などは、縦軸と横軸があって初めて意味を成すことがほとんどなので、どうしても縦並びにできないものも出てきます。

そうしたときに、もともとのレイアウトを保ったまま部分的に横スクロールを発生させ表示してあげると見やすくて便利です。

ウィキペディアなんかがやっていますね。

CSSだけで実装できます。

こんな感じ

HTML

<div class="yoko_scroll">
   <p">テーブルなどのコンテンツはここ</p>
</div>

CSS

.yoko_scroll {
   overflow: auto; /*中身スクロールしますよ*/
   white-space: nowrap; /*テーブルを入れた場合、セル内の文字を折り返ししないようにしますよ*/
   -webkit-overflow-scrolling: touch; /*惰性を与えてスムーズなスクロールにしますよ*/
}
.yoko_scroll::-webkit-scrollbar{
   height: 5px; /*スクロールバーを出しますよ*/
}
.yoko_scroll::-webkit-scrollbar-track{
   background: #F1F1F1; /*スクロールバーの背景の色*/
}
.yoko_scroll::-webkit-scrollbar-thumb {
   background: #BCBCBC; /*スクロールバーの色を変えるなら*/
}

一度お試しください。

Categorised in: