コンテンツ内（要素内）でのスクロールを作成・制御する方法【overflowプロパティ】
記述のポイントは、クラスinnerに対して「overflow-x: scroll; 」を命令し、指定した領域の横幅からはみ出た要素をスクロール表示させているところです。またdisplay:flexで並べた要素をjustify-content: flex-start; で左揃えにすることで、左端のコンテンツからきれいに表示されるようになっています（値にcenterなどを入れると表示が崩れてしまうのがわかるかと思います）
ブラウザのスクロールバーアレンジ記述方法としては2通りあり、ひとつはスクロールの領域を指定している要素にCSSプロパティで命令を出す方法、もうひとつは同様の要素に擬似要素を加える方法です。2024年5月現在、ブラウザごとに命令の方法を変える必要があるため注意しましょう。
1.CSSプロパティで命令を出す方法（※Safariは不可）scrollbar-widthプロパティで横幅を設定することができます。値はnone（無し）・thin（細め）・auto（自動）のみとなり、具体的な数値を設定することはできません。
さらに、scrollbar-colorプロパティで色合いを変更します。値を2つ入れることで、先頭の値はスクロールバーの動く部分の色、後ろの値はスクロールバーの背景色を設定することができます。
2.擬似要素を使う方法（※Firefoxは不可）擬似要素にも2種類あり、ひとつはスクロールバーの背景の命令を出すための「::-webkit-scrollbar」、もうひとつはスクロールバーの動く部分の命令を出すための「::-webkit-scrollbar-thumb」です。
スクロールをピタッととめるスクロールスナップ記述のポイントは、スクロールスナップの効果をつけたい親要素に対してscroll-snap-typeプロパティを設定し、子要素に対してscroll-snap-alignプロパティを設定していきます。
上記の例では、親要素にscroll-snap-type: y mandatory;と命令することでy軸方向に次のコンテンツの位置までピタッと表示させ、子要素にscroll-snap-align: start;と命令し、次に表示させるコンテンツの先頭が見えたらそのコンテンツまでピタッと移動させるようになっています。
さらに、CSSプロパティであるscrollbar-width: none; もしくは 擬似要素である::-webkit-scrollbarを追加することで、スクロールバーを非表示にすることも可能です。
プロパティのまとめ
コンテンツ内のスクロールの作成・制御、コンテンツの表示・非表示 プロパティ名説明値overflow-xx軸方向への表示方法の設定visible・・・初期値hidden・・・溢れたものを非表示scroll・・・スクロールを作成overflow-yy軸方向への表示方法の設定overflowoverflow-x、yを一括指定 スクロールバーのアレンジ プロパティ名説明値scrollbar-widthバーの表示を変更auto・・・初期値none・・・無しthin・・・細めscrollbar-colorバーの色を変更auto・・・初期値2つの値・・・先頭＝スクロールバーの動く部分後ろ＝スクロールバーの背景 擬似要素名説明命令するプロパティ例::-webkit-scrollbarスクロール領域である要素に追加し、スクロールバーの背景を設定するwidthbackground-colorborderborder-radiusnoneなど::-webkit-scrollbar-thumbスクロール領域である要素に追加し、スクロールバーの動く部分を設定する スクロールスナッププロパティ名説明値scroll-snap-typexとy、それぞれの軸の方向へスクロールする際の挙動を設定x mandatory・・・x軸方向にピタッと移動y mandatory・・・y軸方向にピタッと移動
まとめ
こちらの記事はいかがでしたか？ Related postsRECENT ENTRIES
- Web制作会社がAIを導入して変わったこと｜実例付きメリット・デメリット
- 【ローカルWordPress】https://localhost に勝手にリダイレクトされる原因と解決法｜SSLエラー「ERR_SSL_PROTOCOL_ERROR」の直し方
- GEO・SGEとは？SEOとの違い | 導入方法や効果など徹底紹介
- コーディング不要でハンバーガーメニュー作成！「Hamburger Menu Generator」の使い方と特徴を徹底解説