【エクササイズ】CSS初級編の総復習

課題内容は以下の課題レポジトリのURLに記述しています。

課題解決するために参考になる資料

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つの境界(領域)があることを学びました。

1. コンテンツ境界(領域)
2. パディング境界(領域)
3. ボーダー境界(領域)
4. マージン境界(領域)

CSSの基本セレクター3つを理解する

https://tsuyopon.xyz/learning-contents/web-dev/css/understand-3-basic-selectors-in-css/

よく使う3つの基本セレクターについて学びました。

1. 要素型セレクター
2. クラスセレクター
3. IDセレクター

CSSの3つの基本セレクター以外に見かける4つの書き方を覚える

https://tsuyopon.xyz/learning-contents/web-dev/css/understand-other-selectors-in-css/

前の記事で紹介したよく使う3つの基本セレクター以外でみかけることが多い、4つのセレクターについて学びました。

1. 全称セレクター
2. 子孫結合子
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のほうが早く気づけるので早めに返信できるかと思います。

あわせて読みたい

【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ！プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...

【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか？

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

• Webエンジニアになりたいけど何から学習を始めれば良いかわからない
• 今まで独学で頑張ってきたけど、独学に限界を感じてきた
• プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る