最近わりとよく見る横スクロールするナビゲーションの作り方について解説

今回の記事は、microCMSがCodePenの埋め込みに対応したらしく、ちょっと使ってみたくなったので、HTML・CSS系の記事を書いてみることにしました。

記事の内容は、最近わりとよく見る気がする横スクロールするナビゲーションの作り方についてです。

横スクロールするナビゲーションとは？

HTMLとCSSを文字だけで説明するのは困難なので、コードを書いてみました。

やっていることは、シンプルです。

フレックスボックスで子要素を並列に配置してあげて、overflow-x: auto;で要素が表示領域からはみ出た時はスクロールできるように設定してあげているだけです。

white-space: nowrap;は表示領域が狭まった時に、文字を改行させないようにするために指定しています。

今回のコードであまり見かけないかなと思ったのはこの部分です。

.nav::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbarプロパティを使うと、スクロールバー自体を非表示にすることができます。

スクロールバーをいじれるプロパティは、他にも::-webkit-scrollbar-trackや::-webkit-scrollbar-thumbなどのプロパティがあるのですが、これらのプロパティを使うとスクロールバーの背景や色を変えたりすることも可能だったりします。

【参考記事】

SP時のメニューで代表的なものとしては、ハンバーガーメニューがありますが、一部のユーザーからは「分かりにくい」という声が上がっているようです。

→Google検索のサジェストで「ハンバーガーメニュー　わかりにくい」や「ハンバーガーメニュー　わかりやすく」などが出てきます。

一方で横スクロールナビゲーションは、誰が見ても「これは、ナビゲーションだな」と分かるだろうし、ウェブ製作者（開発者）目線で見ても、PC時とSP時で表示を分ける必要がなかったり、HTML・CSSだけで完結できるので、工数が減ったりと双方にメリットがありそうです。

また、ハンバーガーメニューはHTML・CSSに加え、一般的にはJSも必要になります。（チェックボックスを使えばCSSだけでも作れるけど、、、）

冒頭にも書きましたが、micro CMSのCodePenの埋め込みを試してみたくて、今回の記事を執筆してみました。

CodePenの埋め込み良さげです！

一応元コーダー（デザインも少しやってた）という経歴があるので、HTML・CSS系の記事も定期的に書いていきたいです。