新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 タブメニューを作ってみよう (02:33) 無料公開中
- 完成版の確認
- index.htmlの作成
- styles.cssの作成
- main.jsの作成
-
#02 必要な要素を揃えよう (02:45) 無料公開中
- .containerのマークアップ
- .menuのマークアップ
-
#03 全体のスタイルを整えよう (02:53)
- bodyのスタイリング
- .containerのスタイリング
- .menuのスタイリング
-
#04 選択されたメニューのスタイルを変えよう (02:04)
- displayプロパティの操作
-
#05 細かいスタイルを整えよう (02:04)
- hover疑似クラス
- not擬似クラス
-
#06 メニューにイベントを設定しよう (02:34)
- イベントの設定
- preventDefault()
-
#07 activeクラスを付け替えよう (02:06)
- activeクラスの付け替え
-
#08 タブの内容を切り替えよう (01:38)
- contentからのactiveクラスの削除
-
#09 タブメニューを完成させよう (02:27)
- contentへのactiveクラスの付与
- data属性の利用
