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

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

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

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

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

完成形はこちら。

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

◎HTML

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

◎CSS

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

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

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

完成形はこちら。

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

◎HTML

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

◎CSS

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

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

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

まとめ

以上が、CSSで縦と横にスクロールさせる方法でした。

□参考文献

overflow-y: scroll

overflow-x: auto;

max-content

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事