このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 タブメニューを作ってみよう (01:51) 無料公開中
- 完成版の確認
- index.htmlの作成
-
#02 学習の準備を整えよう (02:00) 無料公開中
- styles.css
- main.jsの作成
-
#03 必要な要素を揃えよう (02:36) 無料公開中
- .containerのマークアップ
- .menuのマークアップ
- .contentのマークアップ
-
#04 全体のスタイルを整えよう (02:36)
- bodyのスタイリング
- .containerのスタイリング
- .menuのスタイリング
-
#05 選択されたメニューのスタイルを変えよう (02:42)
- .contentのスタイリング
- displayプロパティの操作
-
#06 細かいスタイルを整えよう (01:56)
- hover疑似クラス
- not擬似クラス
-
#07 メニューにイベントを設定しよう (02:48)
- イベントの設定
- preventDefault()
-
#08 activeクラスを付け替えよう (01:54)
- activeクラスの付け替え
-
#09 タブの内容を切り替えよう (01:42)
- contentからのactiveクラスの削除
-
#10 タブメニューを完成させよう (02:24)
- contentへのactiveクラスの付与
- data属性の利用
リリース情報（note）
詳細情報
- 最終更新日
- 2020年3月17日
- バージョン情報
- Chrome80 / Visual Studio Code 1.42.1
