TORAT
ブログなどで関連記事を並べて表示したり、動画コンテンツを一覧表示する際などに、タイル状に並べるのも見やすくて良いんですが、記事の投稿数が増えてきたり、テキスト量が多いときなど、場合によっては横スクロールするようにすると便利だったりします。
タイル状に並べて表示
横スクロールできるように表示
CSSだけでスマホの横スクロールを実装
今回はリスト構造を使用して、実装する方法をご紹介します。
ソースコードの記述実例はこちらです。
html
<body>
<ul class="scroll_list">
<li class="list1"><img src="img/image1.jpg" alt="image1"></li>
<li class="list2"><img src="img/image2.jpg" alt="image2"></li>
<li class="list3"><img src="img/image3.jpg" alt="image3"></li>
</ul>
</body>
css
@media screen and (max-width: 480px){
.scroll_list{
margin: 0 auto;
padding: 0;
width: 90%; /* コンテンツが見切れて見えるようにする */
overflow-x: auto; /* 横スクロールの指定 */
white-space: nowrap; /* 横スクロールの指定 */
overflow-scrolling: touch; /* スクロールを滑らかにする */
-webkit-overflow-scrolling: touch; /* スクロールを滑らかにする */
}
.scroll_list li{
display: inline-block; /* 横並びにする指定 */
list-style: none;
height: 450px; /* 横スクロールする範囲の高さを指定 */
}
.list1{
margin-left: 0;
}
.list2, .list3{
margin-left: 30px;
}
}ソースコードの解説
width:90%;を指定
横幅を width:100%; と指定をすると、コンテンツが画面いっぱいの状態でスクロールして見えるので、 width:90%; に指定してコンテンツが見切れて見えるようにしています。
overflow-x: auto;を指定
overflow-x はボックスの範囲内に収まらないコンテンツを水平方向に表示します。 また同様に、ボックスの範囲内に収まらないコンテンツを垂直方向に表示したいときは overflow-y を指定します。
white-space: nowrap;を指定
white-space: nowrap; ではみ出たコンテンツを折り返さないように横並びに指定しています。
スクロールの指定
overflow-scrolling: touch;と-webkit-overflow-scrolling: touch; でスクロールを滑らかにする指定をしています。
最後に
Javascriptなどを導入せず、CSSだけで簡単に指定できます。
アイデア次第でいろいろなページに使えて、場合によっては見てもらいやすくなりますので、ぜひお試しくださいね。
