このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#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:22)- これまでのまとめ
- 次のステップ
- 256timesの紹介
プチ問題集にチャレンジ
動画によるインプットだけでは、知識はなかなか定着しません。学習のためのアウトプットを後押しする『256times』で、簡単な課題を解いて手を動かし、知識を定着させましょう（プレミアムプラン、法人向けライセンスをご利用の方は無料でご利用いただけます）。
CSS入門 セレクター編 問題集（全4問）
次におすすめのレッスン
はじめての256times 256times
オンラインで仲間と一緒に実践的に学んでみませんか。ドットインストールの参加型プログラミング勉強会「256times」の無料体験クラスです。
256times
