スマホで、横並びの要素をスワイプで表示する方法です。
HTML
<div class="p-scroll">
<div class="p-scroll__content">
<div class="p-scroll__item">
<img src="画像のパス" alt="" />
</div>
<div class="p-scroll__item">
<img src="画像のパス"" alt="" />
</div>
<div class="p-scroll__item">
<img src="画像のパス"" alt="" />
</div>
</div>
<!-- p-scroll__content -->
</div>
<!-- p-scroll -->
CSS(Sass)
/* .p-scrollクラスはスクロール可能なコンテナの基本スタイルを設定 */
.p-scroll {
width: 100%; /* コンテナの幅を親要素の100%に設定 */
overflow-x: scroll; /* 横スクロールを可能にする */
-ms-overflow-style: none; /* Internet Explorerでのスクロールバーを非表示にする */
scrollbar-width: none; /* Firefoxでスクロールバーを非表示にする */
/* Chrome, Safari, Operaでスクロールバーを非表示にする */
&::-webkit-scrollbar {
display: none;
}
}
/* .p-scroll__contentクラスはスクロールする子要素を格納するためのフレックスコンテナ */
.p-scroll__content {
display: flex; /* 子要素をフレックスボックスとして配置 */
}
/* .p-scroll__itemクラスは各スクロールアイテムの基本スタイルを設定 */
.p-scroll__item {
flex: 0 0 320px; /* flex-growは0、flex-shrinkは0、flex-basisは320pxに設定 */
}
