Designの福田です(笑)前回の記事で「レスポンシブデザイン」のご紹介をしました。その「レスポンシブデザイン」でスマートフォンなどでよく使われる「ハンバーガーメニュー」。「ハンバーガーメニュー」のアニメーション線が回転して「×」になる線が奥行きを持って回転して「×」になるまとめハンバーガーメニューとは?まず「ハンバーガーメニュー」についてご紹介します。「ハンバーガーメニュー」はスマートフォンのWebサイトによく使われるメニューです。名前の通りハンバーガーに似ているため「ハンバーガーメニュー」と呼ばれます。「ハンバーガーメニュー」を押すとメニューが「×」に変わり、右からメニューが出てきました!ハンバーガーメニューを作ってみよう!ここからは「ハンバーガーメニュー」を作っていきたいと思います!まずはHTML・CSSを書いていきます。center;}ブラウザで見るとこのようになります。flex;」で横並びにしています。「ハンバーガーメニュー」の大きさを指定するために「.hamburger」に「width」「height」を書いています。absolute;」を書いて、線の位置を指定しています。メニューを隠す次に、出ているメニューを右側に隠します。translateX(100%);」を追記しました。「transform」は変形という意味です。「translateX」でX軸(横方向)の位置を変えることができます。「(100%);」で画面の右側に見えないように移動しています。「(-100%)」と書くと左側に移動します。hidden;」を追記しました。このCSSは画面外の要素を非表示にできるCSSです。hidden;」がないとこのようになります。メニューが右側にあるのでスクロールできてしまいます。hidden;」を書くことで横のスクロールを停止することができます!ハンバーガーメニューの仕組みここからは「ハンバーガーメニュー」の仕組みを解説します。ハンバーガーメニューの仕組みはこのようになります。「×」になった「ハンバーガーメニュー」を押すと、「active」というクラスを削除という流れになります。「active」というクラスを追加まず、「ハンバーガーメニュー」を押すと「active」というクラスを「hamburger」と「slide-menu」に追加する機能をJavaScriptで書いていきます。});});どちらも同じ動きになります。Javascriptで「.hamburger」をクリックしたときに「toggle」を使って「active」というクラスを追加したり、削除したりします。「toggle」とはある同じ動作を繰り返すことで、スイッチのON/OFFのように切り替えができます。検証ツールで見ると、「.hamburger」と「.slide-menu」に「active」というクラスがついたり、消えたりしているのがわかると思います。「active」がついた箇所を「transform」で変形していきます。「slide-menu」に「active」が追加されるとメニューを出す「hamburger」「slide-menu」の「active」が削除されると元に戻るという動きになります。}「.hamburger」と「.slide-menu」に「active」がついた時のCSSを追加しました。CSSではクラス名が複数ついたときは「.hamburger.active」のようにセレクタをつなげて書きます。span」では「ハンバーガーメニュー」を「×」にするCSSを書いています。「.slide-menu.active」では右に移動したメニューを元の位置に戻して表示しています。ブラウザで見ると「ハンバーガーメニュー」の切りかえと、メニューの表示、非表示ができました。このままだと表示の切りかえが早すぎるので、「transition」をかけてゆっくり変化させたいと思います。translateX(0);}「transition」は要素の変化前と、変化後の間の状態を定義するためのCSSです。.5s;」と書きました。これは変化する時間を0.5秒かけるといったCSSになります。rotate(-45deg);}先ほど書いたCSSをこのように書くと、線が2回転して「×」になります。CodePen.線が奥行きを持って回転して「×」になるもう1つは線が奥行きを持って回転して「×」になるCSSです。CodePen.まとめいかがでしたでしょうか?今回は「ハンバーガーメニュー」の作り方をご紹介しました。「transform」や「transition」はよく使うCSSプロパティなので覚えておくといいでしょう。Desingを立ち上げ。得意分野は、コーディング、CMS構築、ディレクション。現在はブログ、マーケティングなどを勉強中。関連記事キーワードCSSHTMLJavaScriptSEOVue.jsWeb制作WordPressガジェットブログあわせて読みたいWeb制作の費用についてご紹介!2022-07-05Web制作ブログ【初心者の方も安心】Web制作の流れをご紹介!2022-05-18Web制作ブログWebデザインの独学にオススメのツールとオススメの本をご紹介!(デザイン編)2022-05-07Web制作ブログWeb制作のフリーランスになるには?2022-04-30Web制作ブログWebで扱う画像ファイル形式(PNG・JPEG・SVG・WEBP)を理解しよう!2022-04-29Web制作ブログWebサイトのレイアウトについて解説!2022-04-24Web制作ブログSNSでシェアWeb制作に関するお悩みがある方はお気軽にご連絡下さい。ご相談・お問い合わせメールでWeb制作に関して相談や見積もり依頼をされたい方に、お問い合わせフォームよりお問い合わせを承っております。フォームからお問い合わせ下さい。