CSSだけで出来る横スクロールの実装【webデザイン】

2023年1月13日

横向きにページがスクロールされるサイトをたまに見ますが、今回はCSSだけで横スクロールサイトを再現してみました。参考にしてもらえたら幸いです。

CSSだけで出来る横スクロールの実装【webデザイン】

HTML↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSSだけで出来る横スクロールの実装【webデザイン】</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="outer-wrapper">
        <div class="wrapper">
            <div class="slide one"></div>
            <div class="slide two"></div>
            <div class="slide three"></div>
            <div class="slide four"></div>
        </div>
    </div>
</body>
</html>

CSS↓

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}
.outer-wrapper{
    width: 100vh;
    height: 100vw;
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin: top left;
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
    scrollbar-width: none;
    -ms-overflow-style:none;
}
::-webkit-scrollbar{
    display: none;
}
.wrapper{
    display: flex;
    width: 400vw;
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
}
.slide{
    width: 100vw;
    height: 100vh;
}
.one{
    background: url(spring.jpg) no-repeat center;
    background-size: cover;
}
.two{
    background: url(summer.jpg) no-repeat center;
    background-size: cover;
}
.three{
    background: url(autom.jpg) no-repeat center;
    background-size: cover;
}
.four{
    background: url(winter.jpg) no-repeat center;
    background-size: cover;
}

横スクロールの実装の解説

今回は文字だけの解説では難しいと思いましたので、下手ではありますが、イラストも使って解説していきます。

Step1　100vwと100vh

メインとなるのは.outer-wrapperから下の部分です。

.outer-wrapperのwidthは画面の高さ（100vh）に、heightは画面の幅（100vw）に設定します。

.slideはwidthは画面の幅（100vw）に、高さは画面の高さ（100vh）に設定します。こんな状態です↓

（100vw、100vhは固定値なので、絶対に変化しないことを覚えていてください。）

Step2　transform:rotate();を使う

次に.outer-wrapperを反時計回りに90度回転させます。この時、回転軸をtransform-originで左上に設定しています。.outer-wrapperが回転するので、子要素の.wrapperから下も回転します↓。

次に.sliderだけ元の横長に戻します。それがtransform:rotate(90deg)です。これによって.slideだけが画面に表示される形になります↓。

Step3　transform:translate();を使う

このままでは.outer-wrapperが画面の外にある状態なので、translateX(-100vh)で画面内に表示させます。こうすると.slideも一緒に-100vh分画面の下に押し出されるように下がってしまいます。それを打ち消すために.slideにもtranslateY(-100vh)を付けています。

（各ボックスのX軸Y軸をきちんと把握しておくことが大切です。）