2016年2月5日 12:53 pm by

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

しかし、表などどうしても縦並びにできないものも出てきます。

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

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

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; /*スクロールバーの色*/
}

 

これをみればHTMLはわかる。 という前提で書いてしまいました。

一度お試しください。

Categorised in:

This post was written by Gorillaweb