- CSS初級編で学習してきた内容を復習します。
- GitHubに用意した課題の内容を確認して、課題クリアがこの記事でのゴールです
課題内容は以下の課題レポジトリのURLに記述しています。
GitHub : css_excercise_for_beginner_part_1
目次
課題解決するために参考になる資料
CSSの役割を知る
https://tsuyopon.xyz/learning-contents/web-dev/css/understand-how-css-works/
HTMLとCSSの役割の違い、CSSを使うことで何が出来るかを学びました。
CSSの基本構造を理解する
https://tsuyopon.xyz/learning-contents/web-dev/css/understand-structure-of-css/
CSSでスタイルを定義する方法を学びました。
HTMLとCSSの連携方法を知る
https://tsuyopon.xyz/learning-contents/web-dev/css/how-to-attach-style/
HTMLでのCSSファイルの読み込み方法の他に、styleタグ、style属性を使ったスタイル定義方法について学習しました。
CSSで色を設定するやり方を知る
https://tsuyopon.xyz/learning-contents/web-dev/css/how-to-set-color-in-css/
CSSで色を設定する際に、「英単語を使った色の指定」「16進数を使った色の指定」「関数記法での色の指定」の3つのやり方があることを学びました。
CSSのbackgroundとborderを理解する
https://tsuyopon.xyz/learning-contents/web-dev/css/understand-background-and-border-in-css/
背景色、背景画像、さまざま枠線の種類の設定方法について学びました。
CSSボックスモデルを理解する
https://tsuyopon.xyz/learning-contents/web-dev/css/understand-css-box-model/
CSSボックスモデルについて、4つの境界(領域)があることを学びました。
- コンテンツ境界(領域)
- パディング境界(領域)
- ボーダー境界(領域)
- マージン境界(領域)
CSSの基本セレクター3つを理解する
https://tsuyopon.xyz/learning-contents/web-dev/css/understand-3-basic-selectors-in-css/
よく使う3つの基本セレクターについて学びました。
- 要素型セレクター
- クラスセレクター
- IDセレクター
CSSの3つの基本セレクター以外に見かける4つの書き方を覚える
https://tsuyopon.xyz/learning-contents/web-dev/css/understand-other-selectors-in-css/
前の記事で紹介したよく使う3つの基本セレクター以外でみかけることが多い、4つのセレクターについて学びました。
- 全称セレクター
- 子孫結合子
- 隣接兄弟結合子
- 属性セレクター
デベロッパーツールを使ってリアルタイムにスタイルを変更する方法
https://tsuyopon.xyz/learning-contents/web-dev/css/change-style-with-developer-tool/
効率よく開発を進めるために便利な「デベロッパーツール」の紹介と、その使い方について学びました。
CSSの継承と優先度を理解する
https://tsuyopon.xyz/learning-contents/web-dev/css/understand-inheritance-and-priority-of-css/
特定の要素でスタイル定義がされていないときに、親要素のスタイル定義が継承されることを学びました。
また、複数のセレクターの条件にあてはまるときに、より詳細にセレクター情報を記述したスタイル定義が優先して反映されるということも学びました。
質問・答え合わせ受け付けてます
課題に関して質問や答えの確認をしたい方はお気軽にご連絡をいただけたらと思います。
お問い合わせ・TwitterのDMのどちらでも受けて受けています。TwitterのDMのほうが早く気づけるので早めに返信できるかと思います。
