2021-03-23

【CSS】縦と横にスクロールさせる方法

今回はCSSで縦と横にスクロールさせる方法について紹介します。

WEBサイトにも頻繁に使われている手法なので、是非参考にしてください。

※ Google Chrome、Microsoft edge、Firefox、Safariで動作確認済み

縦にスクロールさせる方法

完成形はこちら。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

◎HTML

<div class="box">
    <p>テキストが入ります。</p>
    <p>テキストが入ります。</p>
    <p>テキストが入ります。</p>
    <p>テキストが入ります。</p>
    <p>テキストが入ります。</p>
    <p>テキストが入ります。</p>
    <p>テキストが入ります。</p>
    <p>テキストが入ります。</p>
    <p>テキストが入ります。</p>
    <p>テキストが入ります。</p>
    <p>テキストが入ります。</p>
    <p>テキストが入ります。</p>
    <p>テキストが入ります。</p>
    <p>テキストが入ります。</p>
    <p>テキストが入ります。</p>
    <p>テキストが入ります。</p>
    <p>テキストが入ります。</p>
    <p>テキストが入ります。</p>
    <p>テキストが入ります。</p>
</div>

親要素であるboxクラスの中に、pタグを複数行用意します。

◎CSS

.box {
    width: 250px;
    height: 250px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid black;
    overflow-y: scroll;
}
.box p {
    font-size: 20px;
    line-height: 1.8;
}

縦スクロールさせるポイントは、heightで高さを指定します。

そして「overflow-y: scroll;」で縦にスクロールさせればOKです。

横にスクロールさせる方法

完成形はこちら。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

◎HTML

<div class="list">
    <div class="items">
        <div class="item">
            <h2>タイトル</h2>
            <p>テキストが入ります。テキストが入ります。</p>
        </div>
        <div class="item">
            <h2>タイトル</h2>
            <p>テキストが入ります。テキストが入ります。</p>
        </div>
        <div class="item">
            <h2>タイトル</h2>
            <p>テキストが入ります。テキストが入ります。</p>
        </div>
        <div class="item">
            <h2>タイトル</h2>
            <p>テキストが入ります。テキストが入ります。</p>
        </div>
        <div class="item">
            <h2>タイトル</h2>
            <p>テキストが入ります。テキストが入ります。</p>
        </div>
        <div class="item">
            <h2>タイトル</h2>
            <p>テキストが入ります。テキストが入ります。</p>
        </div>
    </div>
</div>

親要素listの中にitemsとitemを入れ子にします。

◎CSS

.list {
    overflow-x: auto;
}
.items {
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
}
.item {
    padding: 20px;
    width: calc((100% - 75px)/6);
    margin-right: 15px;
    border: 1px solid black;
}
.item:last-child {
    margin-right: 0;
}
.item h2 {
    margin-bottom: 15px;
}
.item p {
    line-height: 1.5;
}

@media (max-width: 600px) { 
    .list {
        width: 90%;
        margin: 0 auto;
    }
    .items {
        width: max-content;
    }
}

要素を横にスクロールさせるには一番上の親要素に対して「overflow-x: auto;」を指定します。

そして、1つ下のitemsに対して600px以下の時に「width: max-content;」を指定します。

「width: max-content;」を指定することで、要素が改行しないようになり、横にスクロールさせることが出来ます。