学科 CSS基礎①

-本日のアジェンダ-

1限目
学科 CSS基礎①
マークアップの練習について

2限目
学科 CSS基礎①
マークアップの練習について

3限目
学科 CSS基礎①
リセットCSSとセレクタの得点について

4限目
学科 CSS基礎①
Chrome検証ツールについて

5限目
学科 CSS基礎①
本日の講義のまとめ

本日のテーマ

検証ツールを活用しましょう

【まとめサイト】

• HTMLとCSSの基礎をまとめたサイト
  https://samplesdl.me/training_html-css/

【動画】

• CSSの記述方法とプロパティ・検証ツールの活用
  https://youtu.be/j-LrqX5K9SM（6分43秒）

リセットCSSついて

ブラウザは初期状態でタグ単位のデフォルトのスタイルシートを持っています。このデフォルトのスタイルシートの内容はブラウザによって異なるためブラウザ環境を変更すると意図しない表示になることがあります。このような現象を防ぐために使用するのがリセット CSS です。

リセット CSS は、ブラウザが持っているスタイルシートをリセット（クリア）するためのスタイルシートですがリセットする範囲はコーディングスタイルに依存するため、これが正解というリセット CSS は存在しません。各自のコーディングスタイルに合わせて適時変更してください。

セレクタの得点について

セレクタには優先順位があり点数計算をして高得点のものが採用されます。同じ得点の場合は後ろに書いてあるものが採用されます。点数計算の結果によっては前に書いてあるセレクタが採用されてしまうことがありますので意図したスタイルにならない時は点数を確認してください。

Chrome検証ツールについて

ブラウザに表示されるWebページの設定情報を参照したり、想定通りに表示されない場合の調査には、Chrome の検証ツールの使用が有効です。また、スマートフォンやタブレットでの表示型式を確認することもできます。

本日の課題

本日学んだ内容を復習して整理しておきましょう。
ポートフォリオサイトの投稿ページ作成が出来る方は投稿ページにまとめておくと良いです。