使って切り替えているのです。これで、スクリーンリーダーなどを使っているユーザーに、メニューが表示されたことを知らせるサポートができます。CodePen.36915ドロワーメニュー展開中のハンバーガーボタンのスタイルじゃあ、最後にハンバーガーボタンをクリックして、ドロワーメニューが表示されている時の、ハンバーガーボタンのスタイルについて解説したいと思います。結論からいうと、以下の様なスタイルを僕はよく書きます。rotate(-45deg);}こんな感じです。」というclassをつけるって言っていいました。それを活用しても良かったんですが、今回は、属性セレクタも活用しちゃいました。時という属性セレクタでスタイルを当てています。やっていることは、シンプルで、真ん中のお肉の背景色を透明にして、バンズは真ん中に戻して、45度回転させて、「☓」にしています。アニメーションの感じとかは、自由に変えちゃってくださいね。これで、ハンバーガーボタンの完成です。授業でも、僕なりのハンバーガーボタンの作り方をこんな感じでガッツリ作り込む授業してるんですが、今回はそれを記事にして解説してみました。僕のこだわりポイントとしては、アクセシビリティを意識したハンバーガーボタンを作るってことですかね。アクセシビリティにこだわることもできる気もしますが・・・wなにわともあれ、このハンバーガーボタンの作り方がみなさんの参考になれば幸いです。ちなみに、Shibajukuでは、こういうアクセシビリティを意識したコーディングを結構授業でやってるので、興味がある方は一度覗いてみてください。「Shibajuku」では。+PocketLineこの記事を書いた人しばひろどうも。だいたいなんでもやってます。フロントエンド周りが専門です。あと専門学校やスクール、訓練などで講師もやってます。ちなみに、CreatorQuestという無料のWeb制作スキル学習サイトの中の人です。何で作ってる?僕なりの作り方を解説してみる。何で作ってる?僕なりの作り方を解説してみる。Shibajuku.。