こうへい

クリックしたときに、「+」マークと内容の表示がアニメーションするようにしていきます。 +から× 回答のアニメーション アニメーションプロパティ +から× ・前回まででクリックをしたらアコーディオンが開 ...

JavaScriptでdt要素をクリックしたらアコーディオンUIが動作するように実装していきます。 クリックイベントの実装 dd要素の表示/非表示 「+」マークの変形 クリックイベントの実装 ・前回J ...

開閉できることがわかりやすいように「質問」の右端に「＋」マークを追加します。 ::after疑似要素 絶対配置 JavaScriptファイルの作成 疑似要素 ・前回までで先頭にQやAを追加して見ました ...

質問と回答がわかりやすいように先頭にQやAをつけていきます。 疑似要素 プロパティ スタイリング 疑似要素 ・前回までで簡単なスタイリングをしていきました。 ・今回はさらに見やすくするために質問と回答 ...

CSSを使って説明リストのスタイルを整えていきます。 見出しのスタイリング リストのスタイリング divのスタイリング 見出しのスタイリング ・前回まででHTMLのマークアップをしてCSSのファイルを ...

説明リストを使ってアコーディオンUIをマークアップしていきます。 JavaScriptを使ったアコーディオンメニュー リストタグ スタイリングの準備 JavaScriptを使ったアコーディオンメニュー ...

まずはdetailsタグを使ってアコーディオンUIをマークアップしていく方法を見ていきます。 details summary open属性 detailsタグとは ・JavaScriptを使ってアコー ...

アコーディオンメニューのファイルを作っていきます。 アコーディオンメニューとは？ index.htmlの作成 アコーディオンメニューとは？ ・まずは全体のイメージから掴んでいきたいと思います。 ・アコ ...

PC版メニューのスタイリングを完成させていきます。 リストのスタイル リンクのスタイル ホバーのスタイル リストのスタイル ・前回まででpc版のメニューを作ったので今回はそちらをスタイリングしていきた ...

PC版のメニュー要素を作成し、メディアクエリーを設定していきます。 pc版のメニュー作成 メディアクエリの作成 スタイルリング pc版のメニュー作成 ・これまででモバイル版のスタイリングをしてきて無事 ...