-本日のアジェンダ-
1限目
学科 CSS基礎③
Chrome検証ツールについて
2限目
学科 CSS基礎③
幅・高さの単位と色の指定方法について
3限目
学科 CSS基礎③
リセットCSSについて
4限目
学科 CSS基礎③
CSSのまとめ
5限目
学科 CSS基礎③
CSSのまとめ
本日のテーマ
セレクタを使いこなしましょう
デベロッパーツール（Chrome検証ツール）について
デベロッパーツールはGoogle Chromeに標準で搭載されているデバッグツールで、WebサイトのHTML構成や表示スピード、通信状況などを確認できます。 特別なツールやプログラムを使わずブラウザのみで手軽に利用でき、エンジニアの私もWebサービスの開発やテスト、デザインのチェックを行うときに頻繁に使っています。
参考サイト
- Google Chromeデベロッパーツールとは？使い方や簡易的な …
- Chromeのデベロッパーツールって何？何が出来るか徹底解説 …
- 初心者向け！Chromeの検証機能（デベロッパーツール）の …
ワンポイントアドバイス
ソースコードは実際に記述したコードの内容で、デベロッパーツールはブラウジングされた内容として出力されます。コードの誤り等を見つけるのに便利ですので、しっかり使いこなせるようにしておきましょう。
セレクタの記載方法について
CSSでスタイルを適用する箇所を指定するセレクタは、色々な記述方法があります。HTMLの特定のタグを指定する場合でも厳密に書くこともできますし、あいまいに書くこともできます。HTMLの記述状況によって適切なセレクタの書き方ができるようになりましょう。
参考サイト
セレクタの得点について
セレクタの記述方法によって点数計算が実施され高い点数を獲得したセレクタに設定されているスタイルが有効になります。同一のプロパティが複数記述されている場合は、点数計算の結果が同じ場合は、後ろに書いてあるプロパティが有効になりますが、前に書いてある方が点数が高い場合は、前に記述したプロパティが有効になりますので注意してください。
参考サイト
幅・高さの単位について
CSSで幅や高さを指定する場合の単位は、複数の指定方法があります。思い通りのレイアウトデザインを構築するためには、適切な幅や高さの記述が必要です。それぞれの指定方法の特徴を理解して適切な単位を使用できるようになりましょう。
参考サイト
色の指定方法について
色の指定には、カラーネーム、16進数、RGB値、HSL値などの指定方法があります。保守性も考慮して適切な指定方法を使えるようになりましょう。また、グラデーション指定を使うことでデザインの幅を広げることもできます。
参考サイト
リセットCSSについて
ブラウザが持っているデフォルトのスタイルを打ち消すCSSをリセットCSSといいます。リセットCSSを使用することでブラウザが持っているスタイルに依存することなく、Webページを自由にデザインすることが可能になります。リセットCSSには、正解のリセットCSSというものはありません。自分のコーディングスタイルに合わせてリセットCSSも成長させてください。
参考サイト
本日の課題
WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。