最近はスマホ時のUIで横スクロールのを採用するアプリやWebサイトをよく見かけます。ある程度のコンテンツ数がある場合に横スクロールを採用する事でスマホの様な小さい画面でも1つ1つの画像をある程度大きく見せる事が出来るというメリットがあります。また、シンプルな横スクロールのUIであれば、CSSのみで実装出来るので覚えましょう。
-webkit-overflow-scrolling: touch
本来、はみ出た要素をスクロールで動かすには「overflow: scroll」で良いのですが、「overflow: scroll」ではIOS系のデバイスでスクロールの動きがぎこちなくなるので、代わりに「-webkit-overflow-scrolling: touch」を指定します。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>cssのみで横スクロール</title> <meta name="viewport" content="width=device-width"> <style> html,body,h1,ul,li { margin:0; padding:0; line-height:1.0; } img { max-width: 100%; } h1 { text-align:center; padding: 10px 0; } .content { max-width:960px; margin: 50px auto 0; } .mask { width:100%; } ul { list-style:none; display:flex; flex-wrap: wrap; justify-content: space-between; } li { width:calc((100% - 30px) / 4); margin-bottom: 10px; } @media screen and (max-width:768px){ .content { max-width:960px; margin: 50px auto 0; overflow-x:auto; -webkit-overflow-scrolling:touch; } ul { display:flex; flex-wrap: wrap; justify-content:space-around; width: 800%; } li { width:calc((100% - 90px) / 8); margin-bottom: 10px; } } </style> </head> <body> <header> <h1>タイトル</h1> <div class="content"> <div class="mask"> <ul> <li><img src="img/01.jpg" alt=""></li> <li><img src="img/02.jpg" alt=""></li> <li><img src="img/03.jpg" alt=""></li> <li><img src="img/04.jpg" alt=""></li> <li><img src="img/01.jpg" alt=""></li> <li><img src="img/02.jpg" alt=""></li> <li><img src="img/03.jpg" alt=""></li> <li><img src="img/04.jpg" alt=""></li> </ul> </div> </div> </header> </body> </html>
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Splitレイアウト</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="contents"> <h1>北海道</h1> <p class="main-copy"> 北海道（ほっかいどう）は、日本の北部に位置する島。また、日本の行政区画及び同島とそれに付随する島を管轄する地方公共団体である。島としての北海道は日本列島を構成する主要4島の一つである。</p> <p class="main-copy"> 地方公共団体としての北海道は47都道府県中唯一の「道」である。ブランド総合研究所による「都道府県の魅力度ランキング」で2019年現在、11年連続で1位に選ばれ、観光意欲度、産品購入意欲度も1位、居住意欲度でも3位となっており、各意欲の面で高い評価を得ている。道庁所在地及び最大の都市は札幌市。 </p> <div class="gallery-wrapper"> <ul class="gallery"> <li><img src="https://placehold.jp/3d4070/ffffff/800x600.jpg" alt=""></li> <li><img src="https://placehold.jp/3d4070/ffffff/800x600.jpg" alt=""></li> <li><img src="https://placehold.jp/3d4070/ffffff/800x600.jpg" alt=""></li> </ul> </div><!--/.gallery-wrapper--> <a href="#" id="to-top"><p class="top-btn">Topに戻る</p></a> <footer> <p><small>© Felica</small></p> </footer> </div><!--/.contents--> <div class="key-visual"> <img src="img/main.jpg" alt=""> </div><!--/.key-visual--> </div> </body> </html>
/*pcレイアウト*/ .container{ display: flex; flex-direction: row-reverse; } .key-visual{ width: 50%; height: 100vh; position: fixed; top: 0; left: 0; } .key-visual>img{ width: 100%; height: 100%; object-fit: cover; } .contents{ width: 50%; } .main{ padding: 0 100px; } h1{ padding: 160px 0; font-size: 60px; text-align: center; font-family: serif; } .main-copy{ line-height: 2; } .main-copy:nth-of-type(2){ margin-bottom: 200px; } .gallery>li{ margin-bottom: 100px; } footer{ height: 100px; background-color: darkslategrey; color: #FFF; text-align: center; } footer>p{ line-height: 100px; } /*トップに戻るボタン*/ .top-btn{ width: 50px; height: 50px; white-space: nowrap; text-indent: 100%; overflow: hidden; background-color:darkslategrey; border-radius: 50%; position:fixed; right: 20px; bottom: 120px; } .top-btn::after{ content:""; display: block; width: 24px; height: 24px; border-top: 1px solid #FFF; border-right: 1px solid #FFF; position: absolute; top: 10px; right: 0; bottom: 0; left: 0; margin: auto; transform: rotate(-45deg); } @media (max-width:959px){ .main{ padding: 0 20px; } } @media (max-width:767px){ /*スマホのレイアウト*/ .container{ display: flex; flex-direction:column-reverse; } .key-visual{ width: 100%; height: 40vh; position:static; } .contents{ width: 100%; } h1{ padding: 40px 0; font-size: 48px; } .main-copy:nth-of-type(2){ margin-bottom: 100px; } /*横スクロール*/ .gallery-wrapper{ width: 300px; margin: 0 auto; overflow-x:auto; -webkit-overflow-scrolling:touch; } .gallery{ display: flex; width: 860px; justify-content: space-between; } .gallery>li{ width:calc((100% - 40px) / 3); } }
