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

課題
  • CSS初級編で学習してきた内容を復習します。
  • GitHubに用意した課題の内容を確認して、課題クリアがこの記事でのゴールです

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

課題レポジトリ

GitHub : css_excercise_for_beginner_part_1

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

CSSの役割を知る

あわせて読みたい
CSSの役割を知るCSSを使うことでWebページのスタイルを変更することが出来ます。実際にHTMLのみのコードとHTMLにCSSを加えたコードを比較して、Webページがどのように変化するか見ていきます。...

HTMLとCSSの役割の違い、CSSを使うことで何が出来るかを学びました。

CSSの基本構造を理解する

あわせて読みたい
CSSの基本構造を理解するCSSの基本的な構造を理解することでスタイルを定義してWebページのスタイル(見た目)を好きに変更できるようになります。CSSを構成する「セレクター」「プロパティ」についてこの記事で理解していきましょう...

CSSでスタイルを定義する方法を学びました。

HTMLとCSSの連携方法を知る

あわせて読みたい
HTMLとCSSの連携方法を知るここまで「HTMLではWebページの構造を定義」、「CSSではスタイルの定義」を行うというのを解説してきました。それでは実際にCSSとHTMLを連携させるにはどうすれば良いでしょうか?また、CSSを使う以外にスタイルを定義するやり方を紹介して、どのやり方が一番良いのか解説します。...

HTMLでのCSSファイルの読み込み方法の他に、styleタグ、style属性を使ったスタイル定義方法について学習しました。

CSSで色を設定するやり方を知る

あわせて読みたい
CSSで色を設定するやり方を知るCSSを使って文字や背景などの色を設定する方法は大きく分けて3種類あります。英単語での指定。16進数での指定。関数での指定。この記事を読むことで色の設定方法と16進数の意味を理解することができます。...

CSSで色を設定する際に、「英単語を使った色の指定」「16進数を使った色の指定」「関数記法での色の指定」の3つのやり方があることを学びました。

CSSのbackgroundとborderを理解する

あわせて読みたい
CSSのbackgroundとborderを理解するCSSのbackgroundプロパティとborderプロパティの解説をします。backgroundプロパティを使うことで背景色や背景画像をセットすることが出来ます。borderを使うことで要素に枠線をつけることが可能です。ボーダーには様々なスタイルが用意されているのでどんな種類があるか理解しましょう。...

背景色、背景画像、さまざま枠線の種類の設定方法について学びました。

CSSボックスモデルを理解する

あわせて読みたい
CSSボックスモデルを理解するWebページを構成する1つ1つのパーツはCSSボックスモデルと呼ばれる長方形の形でブラウザに描画されます。CSSボックスモデルを4つの境界(領域)から構成されています。CSSボックスモデルを構成する4つの境界(領域)について学習しましょう。...

CSSボックスモデルについて、4つの境界(領域)があることを学びました。

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

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

あわせて読みたい
CSSの基本セレクター3つを理解するCSSでスタイルを定義する際に使用するセレクター。指定できるセレクターの種類はいろいろありますが、その中でも基本となる3つのセレクターを解説します。CSSセレクターの基本形を学習していきましょう。...

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

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

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

あわせて読みたい
CSSの3つの基本セレクター以外に見かける4つの書き方を覚える前回記事の学習コンテンツでCSSの3つの基本セレクターを学習しました。今回はその3つの基本セレクター以外でもよく見かける4つのセレクターについて解説します。難しそうな名前が出てきますが、名前を覚える必要はなく「こんな指定方法もあるんだ」と理解することが大切です。...

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

  1. 全称セレクター
  2. 子孫結合子
  3. 隣接兄弟結合子
  4. 属性セレクター

デベロッパーツールを使ってリアルタイムにスタイルを変更する方法

あわせて読みたい
デベロッパーツールを使ってリアルタイムにスタイルを変更する方法CSSでスタイルの変更を行うときに便利なデベロッパーツールの基本的な使い方について学習します。デベロッパーツールを使うことで、ブラウザ上で直接スタイルの変更を行うことが出来るので、毎回CSSファイルを開いて修正する手間が省けます。...

効率よく開発を進めるために便利な「デベロッパーツール」の紹介と、その使い方について学びました。

CSSの継承と優先度を理解する

あわせて読みたい
CSSの継承と優先度を理解するCSSのスタイル定義では「継承」「優先度」「詳細度」という概念があります。特定の要素が複数のスタイル定義に一致する場合に、どのスタイルが反映されるかは、この継承・優先度・詳細度によって変わります。...

特定の要素でスタイル定義がされていないときに、親要素のスタイル定義が継承されることを学びました。

また、複数のセレクターの条件にあてはまるときに、より詳細にセレクター情報を記述したスタイル定義が優先して反映されるということも学びました。

質問・答え合わせ受け付けてます

課題に関して質問や答えの確認をしたい方はお気軽にご連絡をいただけたらと思います。

お問い合わせ・TwitterのDMのどちらでも受けて受けています。TwitterのDMのほうが早く気づけるので早めに返信できるかと思います。

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

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

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

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

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

無料特典を受け取る