【HTML,CSS】要素にスクロール機能を実装しよう!【overflow】

HTML-CSS

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

1分で理解できるHTML/CSS講座シリーズです。

今回は要素にスクロール機能を実装する方法について学んでいきましょう!

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!

この記事を読むと・・・
  • 1分でスクロール機能が実装できる
1分で理解できるHTML/CSS講座シリーズはじめっ!

要素にスクロール機能を実装しよう!

スクロール機能を実装する構文1※オススメ!

.クラス名 {
  /* スクロール設定※X軸Y軸ともに自動 */
  overflow: auto;
}
これを使うとX軸Y軸ともに必要な場合のみスクロールバーが表示されるよ!

スクロール機能を実装する構文2

.クラス名 {
  /* スクロール設定※X軸は非表示 */
  overflow-x: hidden;
  /* スクロール設定※Y軸は表示 */
  overflow-y: scroll;
}
この方法は常にY軸のスクロールバーが表示されるよ!

実際に作ってみよう!

See the Pen Untitled by samehack (@samehack) on CodePen.

オススメのoverflow:autoを使っているよ!

まとめ

  • overflow: auto;
  • を使うと要素にスクロール機能が実装できる

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

タイトルとURLをコピーしました