JavaScript– category –
-
クリックしたらメニューを表示する
クリックしたらメニューが表示されるようにクラスを操作していきます。 clickイベントの作成 showクラスの作成 hideクラスの作成 clickイベントの作成 ・では前回の続き... -
メニューを閉じる
バツ印アイコンをクリックしたときにメニューが閉じるようにしていきます。 closeにclickイベントの作成 クラスの削除 transitionの設定 closeにclickイベントの作成 ・... -
アニメーションを設定する
個々のメニューも下からふわっとアニメーションさせていきます。 メニューのスタイル メニューバーがクリックされたら 個々のスタイル メニューのスタイル ・ではこれま... -
PC版のメニュー制作
PC版のメニュー要素を作成し、メディアクエリーを設定していきます。 pc版のメニュー作成 メディアクエリの作成 スタイルリング pc版のメニュー作成 ・これまででモバイ... -
ハンバーガーメニュー完成
PC版メニューのスタイリングを完成させていきます。 リストのスタイル リンクのスタイル ホバーのスタイル リストのスタイル ・前回まででpc版のメニューを作ったので今... -
アコーディオンメニューを作る
アコーディオンメニューのファイルを作っていきます。 アコーディオンメニューとは? index.htmlの作成 アコーディオンメニューとは? ・まずは全体のイメージから掴ん... -
簡易版アコーディオンメニュー
まずはdetailsタグを使ってアコーディオンUIをマークアップしていく方法を見ていきます。 details summary open属性 detailsタグとは ・JavaScriptを使ってアコーディオ... -
JavaScriptでアコーディオンメニューの作る
説明リストを使ってアコーディオンUIをマークアップしていきます。 JavaScriptを使ったアコーディオンメニュー リストタグ スタイリングの準備 JavaScriptを使ったアコ... -
先頭にQやAをつけていく
質問と回答がわかりやすいように先頭にQやAをつけていきます。 疑似要素 プロパティ スタイリング 疑似要素 ・前回までで簡単なスタイリングをしていきました。 ・今回... -
右端に+マークを付け足す
開閉できることがわかりやすいように「質問」の右端に「+」マークを追加します。 ::after疑似要素 絶対配置 JavaScriptファイルの作成 疑似要素 ・前回までで先頭にQや...
