このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 セレクターの種類を確認しよう (01:16) 無料公開中
- セレクターの概要
- セレクターの種類
- 学習のための準備
-
#02 作業用フォルダを設定しよう (02:15) 無料公開中
- 作業用フォルダの設定
- index.htmlの作成
- style.cssの作成
- 動作確認
-
#03 基本セレクターを見ていこう (02:15) 無料公開中
- 要素セレクター
- 全称セレクター
-
#04 クラスセレクターを使ってみよう (01:47) 無料公開中
- クラスセレクターの概要
- class属性の値の命名規則
- Google社のスタイルガイド
-
#05 クラスセレクターで要素を区別しよう (02:42) 無料公開中
- クラスセレクターの使用例
- class属性の特徴
-
#06 idセレクターを使ってみよう (02:35)
- idセレクター
- id属性の特徴
- idセレクターの使用例
-
#07 属性セレクターを使ってみよう (02:28)
- 属性セレクターの概要
- 属性セレクターの使用例
-
#08 複合セレクターを使ってみよう (02:55)
- 複合セレクターの概要
- 複合セレクターの使用例
-
#09 セレクターリストを使ってみよう (02:09)
- セレクターリストの概要
- セレクターリストの使用例
-
#10 文書構造を理解しよう (01:59)
- 階層構造
- 親要素
- 子要素
- 孫要素
- 子孫要素
- 兄弟要素
-
#11 子結合子､子孫結合子を使ってみよう (03:01)
- 子結合子
- 子孫結合子
-
#12 隣接兄弟結合子を使ってみよう (02:43)
- 兄弟要素間のスタイル
- 隣接兄弟結合子
-
#13 疑似クラスを使ってみよう (02:35)
- 疑似クラスの概要
- :nth-child()
-
#14 :nth-child()を使いこなそう (02:24)
- :nth-child(odd)
- :nth-child(even)
- :nth-chil(3n)
- :first-child
- :last-child
-
#15 :hover､:focus､:activeを使ってみよう (02:30)
- :hover
- :focus
- :active
-
#16 :not()疑似クラスを使ってみよう (02:36)
- :not()
- 使用上の注意点
-
#17 ::before､::after疑似要素を使おう (02:51)
- ::before、::afterの概要
- 使用例
- 開発者ツールでの確認
- 疑似要素を使うメリット
-
#18 詳細度を理解しよう (02:20)
- 詳細度
- 詳細度の計算方法
-
#19 優先されるセレクターを確認しよう (02:47)
- 開発者ツールでの確認方法
- 詳細度の修正
-
#20 優先度をさらに高める方法を確認しよう (02:33)
- 詳細度が同じだった場合
- style属性の利用
- !important
-
#21 次のステップを確認しよう (02:23)
- これまでのまとめ
- 次のステップ
- 256timesの紹介
2022年11月20日
