いうことで、これがハンバーガーボタンです。真ん中の線がお肉、上下の線がバンズに見えることから、そう名付けられたとか・・・?なんせ、このボタンをクリックすると、ドロワーメニューと言って、サイトのメニューがスパーンって横から表示されるのが一般的ですよね。昔は、糞UIと騒がれてましたが、今となってはメニューを開くボタンとして一般的に認知されています。マークアップしています。</span></button>まぁ、id名やclass名などはお好きに変えて下さい。今回僕は、とりあえず深く考えずに、FLOCSSというCSS設計案的に書いたので、「c-」や「p-」って何?って方はFLOCSSというCSS設計案を確認して頂ければと思います。要素だけや、チェックボックスじゃだめなの?よく、ハンバーガーボタンに関してググると、spanタグ3つ並べて作ったり、divタグだけで作ってたりするのを見かけますよね。ドロワーメニューを実装するパターンもありますね。要素がいいと思ってるんです。要素って、フォーカスが当たらないんです。キーでリンク先に移動したり、フォームに入力したりするんです。押すことができないのです。キーを押してみて下さい。クリック出来ないのです。実装しませんか?ってなるとですよ。したら、結局、フォーカスが当たる要素がないんですよ。要素でハンバーガーボタンを実装してみました。キーを押してみて下さい。しちゃうと、結局フォーカスが当たる要素がないんです。属性つけたらフォーカス当てれるじゃんなるほど。確かに、フォーカスは当てれます。チェックボックスのチェックをオンにすることができないのです。要素にフォーカスが当たるようにしてみました。要素、チェックボックスでハンバーガーボタンを作ったとしても、見た目は問題ないが、キーボードのみで操作している人は、メニューを展開することができないのです。マウス使えばいいじゃん!確かに、マウスを使えばいいかもしれません。身体的理由でマウスの操作ができない方もいるかも知れませんし、もしあなたがデスクトップパソコンを使ってたとして、急にマウスが壊れたらどうです?ほら、キーボードのみで操作しなければいけないでしょ?こんな時に、アクセシビリティが低いサイトだと、メニューが展開できず、「他のページに移動できない!」なんてことになるのです。要素が良いと思っています。属性って何?よく見かけるハンバーガーボタンの解説コードでは、こんな属性付いてなかったりしますが、これは一体なんなのかって話です。これも、アクセシビリティを向上させるための属性です。属性この属性が指定されている要素が、コントロールする対象となる要素を指定する属性。属性この要素が操作する対象の要素が、現在表示されているか、表示されていないかを指定する属性。指定すると現在非表示であることを表すという属性たちです。属性を使えば、このボタンがどの要素を操作するボタンなのかを視覚的に見てるユーザー以外にも伝えることが出来ます。することで、視覚的に見てるユーザー以外にも、今メニューがどういう状態になっているかを伝える事ができます。これらの属性のおかげで、Webサイトを視覚的に見ているユーザー以外でも、ちゃんとメニューの表示状態を把握することができるのです。あさ、「メニューを開閉する」ってテキストいるの?多くのハンバーガーボタンのサンプルコードをみると、確かにこんなテキスト書いてないですよね。この様なテキストがないと、音声ソフトなどのスクリーンリーダーを使ってWebサイトを見ているユーザーに、これがメニューを表示するためのボタンであることが伝えられません。属性という属性を使って、指定する方法でもいいと思います。属性を使うことで、音声ソフトなどのスクリーンリーダーでWebサイトの内容を理解しているユーザーにも、このボタンを押せば何が起こるのかが、明確にわかるようになります。このテキストって、視覚的にはいらないですよね?という事で、CSSでそのテキストを非表示にしちゃいます。noneを使うと、音声読み上げソフトも読み上げないです!え!!ってことで、それ以外の方法で非表示にします。具体的にどんなコードで非表示してるかは、後で言うとして、いずれにしても、僕はこんな感じで、ハンバーガーボタンのHTMLを書いています。指定することは忘れないでくださいね。CSSじゃあCSSはどうしてるのかっていうところも、簡単に説明しておきたいと思います。さっきのテキストを非表示する方法から紹介しましょうか。スクリーンリーダー用のテキストを非表示にするスタイル結論から言うと、以下のスタイルを使って非表示にしています。隠す!という、わりと無理矢理テキストを隠すという呪文です。違い、ちゃんと音声ソフトでも読み上げられます。CodePen.36915これで、無事テキストが非表示になりました。スタイルはどんな感じ?そしたら、実際にハンバーガーボタンに関するスタイルを見ていきましょう。要素のスタイルですね。要素には、「c-button」というclassと、「p-hamburger」というclassの2つのクラスを当ててます。ここはFLOCSS的に書いたのでこんな感じですが、別に変えもらって問題ありません。要素には以下のようなスタイルを当てています。このハンバーガーボタンの枠のスタイルを当てています。ハンバーガーでいうと、ハンバーガーを包んでる紙の部分のスタイルって事ですね。特別なことはとくに何もしてないのですが、ボタンの位置やら、サイズやら、角丸やら、色はお好きに変更して下さい。button要素の注意点まぁ、ちょっと注意しておいてほしいポイントがひとつあるので、そこの説明だけしておきますね。それが、フォーカス時のスタイルですかね。*/}これめちゃめちゃよく見かけるんですが、これ個人的には結構危険だと思ってます。確かに付けたくなる意味はわかります。デフォルトのフォーカス時に表示される、あの青いアウトラインって、デザインとマッチしないなどの理由で、使いたくなかったりするんですよね。あのアウトラインが無くなると、キーボードだけで操作してるユーザーは大変です。なんでかって言うと、ハンバーガーボタンにフォーカスが当たっているかどうかが視覚的にわからなくなっちゃうんですよね。使った、ハンバーガーボタンです。選択してくみて下さい。?ちゃんと選択できるけど、フォーカスが当たっているかわからないでしょ?これが、個人的に危険だなぁ。ま、めちゃめちゃ見かけますけどね。使わないようにしましょう!でも、あの青いアウトラインが嫌!ってのもわかります。使ってフォーカスが当たっていることがわかるようなスタイルを当てています。あと、これに、ちょっとアニメーションを加えることで、オシャンティーにしています。);}これで、ハンバーガーを包む紙、つまりボタンの枠の部分ができました。」というclassです。」というclassで、ハンバーガーのお肉とバンズを作っています。この子がハンバーガーですね。お肉の幅と高さを設定し、背景色をつけることで、お肉が完成します。のど真ん中に持っていきます。具体的には以下の様なCSSになります。お肉のボックスを作ってます。要素のド真ん中に持ってきてます。