本ページはプロモーションが含まれています。jQuery/javascriptを使わずに、CSSだけでドロワーメニューを作ってみます。js)でドロワーメニューを作成する方法を解説しました。今回は以前作ったドロワーメニューと同じものを、jQueryやjavascriptを使用せずにcssのみで作成してみようと思います。以前作成した、jQuery、javascriptでのドロワーメニューの作り方については下記のリンクからご覧いただけます。今回作成する「CSSのみで作るドロワーメニュー」と比較してみると、初心者の方にはより勉強になると思います。使うドロワーメニューをjQueryを使って作成してみます。jQueryを使わずjavascriptのみで全く同じドロワーメニューを作成してみます。...続きを見る作成する「CSSのみで作るドロワーメニュー」の完成サンプルは下記になります。レスポンシブ対応になっているので、パソコンで確認する場合はブラウザの横幅を縮めてご確認ください。見た目は、jQuery、javascriptで作成したドロワーメニューとほぼ一緒です。サンプル今回作成したもののコードは以下になります。ポイントとなる箇所のみを抜粋しています。type="checkbox"]をクリックすると[input]タグ部分に[checked]が追加されます。[checked]がついたり消えたりすることによって、「[checked]がある場合のドロワーメニュー、ハンバーガーメニューのCSS」と、「[checked]がない場合のドロワーメニュー、ハンバーガーメニューのCSS」とを切り替えて表示させています。class="checkbox-hidden">の部分に[checked]を付け加えてみると、ハンバーガーメニューをクリックした後、ドロワーメニューが表示されている状態になると思います。checked>つまり、「ドロワーメニューが表示される前」の状態と「ドロワーメニューが表示された後」の状態を、[input]タグをクリックすることによって切り替えて表示させています。inputタグについてcssでドロワーメニューを作る際にポイントとなるのが[inputタグ]の理解だと思います。簡単に[inputタグ]の使い方について簡単に説明します。inputタグは一般的にお問い合わせなどのようなフォームを作成する時によく使われます。inputにはtype属性があり、例えば[password][radio]など用意されており、今回のドロワーメニューではこのtype属性の[checkbox]を利用します。詳しいinputタグの使用については下記のリンクからご確認できます。<input>の解説|クロノドライブのHTML辞典inputタグは一般的にlabelタグとセットで使用されます。labelタグは、input要素を紐づけるために利用され、「label要素のfor属性」と「input要素のid属性」に同じ値を指定することによってお互いを関連付けします。inputタグのtype属性が[checkbox]や[radio]だった場合、label要素部分をクリックすることでチェックのつけ外しが行われます。テスト上のリンクを開いてもらって、ページ内の「チェック」のテキストをクリックすると上のchekboxにチェックが入ることが確認できると思います。inputタグのid属性で「check」を指定し、labelタグのfor属性で同じように「check」を指定することで、お互いを関連付けています。none]にしてチェックボックスを非表示にしています。labelタグでハンバーガーメニューをくくりinputタグと関連付けています。labelタグでくくられたハンバーガーメニューをクリックすることで、inputタグにチェックが付いたり消えたりする仕組みになっています。100;}ハンバーガーメニューを作るハンバーガーメニューは、htmlとcssを利用して作成しています。0;}上のcssはドロワーメニューが開いていない状態、つまりinputタグにチェックが入っていない状態のハンバーガーメニューのcssです。inputタグにチェックが入りドロワーメニューが開いた状態のハンバーガーメニューのcssは以下になります。「id属性nvTglがcheckedが付いた状態の時、同階層のクラス属性hamburgerの下階層の最初のspan要素」を示しています。ハンバーガーメニューの見た目で言うと、一番上のバーになります。span:nth-child(2)が真ん中のバー、span:nth-child(3)が一番下のバーを示しています。#navTgl:checked~のcssは、ハンバーガーメニューがクリックされた後の見た目のcssを記述しています。上と一番下のバーが回転(rotate)して縦方向に移動(translateY)し色が白に変化(background-color)して、真ん中のバーは横幅が0になり消えるようになっています。cssのセレクタの解説とtansformの解説については別記事でより詳しく書いているので、気になる方はご覧ください。【初心者向け】CSSセレクタとは?基本18パターン使い方解説CSSはHTMLで指定された範囲または要素に対して装飾を適用するものです。CSSによる装飾をどのHTML要素に適用させるかを指定するのに用いられるのが「CSSセレクタ」です。CSSでアニメーションさせる時によくつかう「transition」プロパティの使い方について説明します。...続きを見るドロワーメニューの記述ドロワーメニューについてもハンバーガーメニューと同じように、ハンバーガーメニューがクリックされる前(inputタグにcheckedなし)と、ハンバーガーメニューがクリックされてドロワーメニューが表示された後(inputタグにcheckedあり)のそれぞれの状態のcssを記述します。以下はハンバーガーメニューがクリックされる前のドロワーメニュー部分のhtmlとcssになります。0;で不透明にして見えなくしておきます。次にハンバーガーメニューがクリックされた状態のドロワーメニューのcssを記述します。コードは以下になります。1;}ドロワーメニューのテキストに動きをつける次にドロワーメニューの各テキストに動きをつけていきます。メニュー自体は右から左へ出てくるのに対して、各テキスト左から右へ移動させています(translateX)。テキストの移動も各テキストごとに時差で上からの順番に移動するようにしています(transition-delay)。translateXの値やtransition-delayの値を自分で色々と変えて確認するとより分かりやすいと思います。translateX(0px);}以上で終了です。js)のみでつくったものも別ページで解説しているので、興味ある方は合わせて見てもらうとより理解が深まると思います。使うドロワーメニューをjQueryを使って作成してみます。jQueryを使わずjavascriptのみで全く同じドロワーメニューを作成してみます。cssと言う感じです。言え案件によってはjQueryが使えない場合やjavascriptが使えない場合もあるので、できるに越したことはないと思います。転職を考えた方が良いWEB制作会社の特徴チェックリストそんな疑問を持っている人にお答えします。自分は約15年間WEB業界にいて、これまで2社ほどWEB制作会社を経験してきました。7選mukoWeb制作会社数社でデザイナー/ディレクター/採用担当として働いたのち、今フリーランス。WEB業界歴15年以上。UnityやBlenderとか色々手をだしては忘れていきます。Unityアプリ2本リリースしてます。2022/06/05オススメ記事1【ブラック回避】求人票からみるブラックWEB制作会社の見分け方そんな疑問にお答えします。私は、これまでWEB制作会社を2社経験しており、そのうちの1社では採用担当をしていました。...3【2022】Unity初心者おすすめ本9冊Unity初心者向け書籍の感想とオススメ度をまとめてみました。...4参考にしたい!個人ポートフォリオサイト10選【国内編】フリーランスのWEBデザイナーの方のサイトはモチロン、フォトグラファー、ロゴデザイナー、ダンサーの方のポートフォリオサイトなども合わせてまとめてみました。...6【超初心者向け】ゼロからのHTML/CSS勉強法【独学】そんな人向けに記事を書きたいと思います。