tedateコンテンツへスキップ夜の帳がおりています。良い時間をすごせますように。ドロワーメニュー(ハンバーガーメニュー)をCSSだけで作る方法[css]ドロワーメニュー(ハンバーガーメニュー)をCSSだけで作る方法[css]今後、定期的に「基礎的なUIパーツのつくりかた」の記事を書いていこうと思っています。最初にお届けするのは、Webサイトのヘッダーでよく見かける、3本線のあのUIパーツについてです。「ハンバーガーメニュー」の事です。)とも呼ばれています。ユーザーが手にするデバイスが多様化した現代のWeb制作において、モニタ幅が小さい端末に、項目の多いメニューを効率よく配置するのに定番のUIパーツですね。今回は、そんな定番のUIパーツであるドロワーメニュー(ハンバーガーメニュー)をcssだけで作る方法についての記事になります。htmlについてまずはhtml。最低限必要なhtmlとしては、次の通りとなります。見てわかる通り、html側は比較的少ない記述で済みます。その同じ階層にドロワーメニュー本体、トリガーとなる3本線のマークが並列で存在していると言う点です。同じ階層に並列で存在している、と言うことは「共通の親要素を直前に持っている」と言うことになります。詳しくは続くcssの部分で書きますが、cssのみでドロワーメニューを作る場合、これがとても重要なポイントになります。cssについてさて、本題となるcssは、次にご紹介するコードの通りとなります。大きく分けて次の項目についての記述となります。なったことにより連動する各パーツそれでは実際のcssコードに続いて、各[1]〜[7]について説明します。前述の通り、上記のcssは次の7つの項目に分類できます。個々に分けて見ていくとそれほど難しくはありませんので、[1]〜[7]がそれぞれどんな役割をしているか、説明していきたいと思います。ヘッダーの定義この部分は、単純にドロワーメニューとそのトリガーとなる3本線アイコンを配置するための、ベースのヘッダーについての記述になります。見た目は必ずしもこの様にする必要はなく、一例として記載しています。*/これで出来上がるのは、次のキャプチャの様な状態になります。持ったシンプルなヘッダーですね。・トリガーとなる3本線アイコン・ドロワーメニューを開閉する挙動の肝となるチェックボックスを子要素に持つ、共通の親要素について書いている記述になります。「スライドインしてくるドロワーメニュー」の本体部分です。スライドインしてくるドロワーメニューの土台部分になります。0.3s;あたりでしょうか。ドロワー内部のコンテンツです。これはお好みで自由にスタイリングして大丈夫な部分です。.drawer-background。下に全画面で敷く半透明のグレー背景になります。方が大きくなる様に指定します。この記述で、ドロワーメニュー本体を形づくる事ができます。続いて、3本線アイコンについてです。この部分は3本線アイコンをラップ(包括)するための親要素になります。使用されるケースも想定されます。ここは特に全く難しい事なく、この位置に親要素を配置してくださいね、と言う様なことを書いている記述です。「要素の中央」が置きたい座標となるようにしている部分になります。続いて、3本線アイコンについての記述です。コメントアウトに記載の通り、あの3本線アイコンは実体としては「spanタグ1個のみ」でつくる事が可能です。使用してアニメーションのための設定を定義しておきます。*/↑この[4]〜[5]の部分で、次のキャプチャの様にヘッダー内に3本線アイコンが配置できるわけですね。起点となる続いて、チェックボックス部分です。このチェックボックスがとても重要です。)が、ドロワーメニューの開閉挙動を決める重要な点となるためです。説明しますが、まずはここでは、ガワの部分のcssです。指定した値がヒット領域(クリック/タップに反応する領域)の大きさになります。「cssのみでドロワーメニューを開閉」という挙動について記述している部分になります。上の[6]同様、最も重要な部分になります。それでは内容について、順番に説明を書いていきます。ここに着目してください。.header-navigation-icon-container↑この様に、この部分のcssは全て.header-navigation-check:checked↑チェックボックスがチェックされた状態(:checked)を対象としています。」は「後続兄弟結合子(後続兄弟セレクター)」と呼ばれるものになります。」の後に続く要素に対して変化を与える事ができる機能を持ちます。これを使う事で、「チェックボックスがチェックされた状態(:checked)の時に変化する対象」を指定する事ができるというわけです。今回のサンプルの様に「チェックボックスがチェックされた状態(:checked)の時に変化する対象」を指定する事ができる様になります。.header-navigation-icon-container↑3本線アイコンに対する変化の指定です。それを指定しています。.header-navigation-icon::before↑これは、3本線アイコンの上の線に対する変化です。ドロワーが開いた時に、3本線アイコンを閉じるアイコンに変化させるための動きを指定しています。.header-navigation-icon↑これは、3本線アイコンの真ん中の線に対する変化です。ドロワーが開いた時に、3本線アイコンの真ん中の線は見えなくして、閉じるアイコンに変化させるための動きを指定しています。.header-navigation-icon::after↑これは、3本線アイコンの下の線に対する変化です。他の2本の線と同様、ドロワーが開いた時に、3本線アイコンを閉じるアイコンに変化させるための動きを指定しています。なり、ドロワー本体が画面に入ってきます。.drawer-background↑そしてこの部分の指定は、ドロワーの下に敷く、全画面のグレー背景になります。この部分の指定で、ドロワーの下に敷く、全画面のグレー背景が出現します。*/↑以上、[1]〜[7]のcssを記述する事で、次のキャプチャの様に「cssだけでドロワーメニューをつくる」事ができるわけです。「cssだけでドロワーメニューをつくる」事について書いてきました。「ドロワーメニューの下の、背景の半透明グレーを押した時に閉じる機能」でしょうか。これを実現するためにはさすがにcssだけでは不可能なので、JavaScriptの登場です。「半透明のグレー背景が押されたらチェックボックスのチェックを外す」という処理を書いてあげれば実現できます。});</script>↑これを、htmlのbodyの閉じタグ直前あたりに記述してあげれば「ドロワーメニューの下の、背景の半透明グレーを押した時に閉じる」ようになり、より使いやすいドロワーメニューの完成です。詳しい解説があります。MDN↑このMDN、Webの仕様そのものを決めている団体のひとつ、Mozillaが運営しているリファレンスサイトの解説ですのでやはり一番正確かつ、一番わかりやすいと思います。「ドロワーメニュー(ハンバーガーメニュー)をcssだけで作る方法」について記事を書いてみました。覚えておくと、cssだけで実現できることが意外とたくさんあることに気がつくかと思います。色々な場面で応用が効く仕組みになりますので、覚えておくと、実際のWeb制作の際に役立つことと思います。この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。※この記事は内容の品質向上を目的に、随時更新を行う場合があります。この記事をシェアする:このカテゴリーの他の記事もご覧ください印象的な文字表現が簡単にできる。JSON]素のJavascript(VanillaJS)で、要素に複数classを一括付与する方法[JavaScript]スムーススクロール時の遷移先を、cssだけで意図した位置に設定する方法[scroll-margin]新しい画像形式を使ってWebサイトを高速化する方法。srcsetによる分岐方法も。stickyの活用とGrid.jsの場合]私の修行時代のお話。