-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

【まとめサイト】

【動画】

リセットCSSついて

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

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

セレクタの得点について

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

Chrome検証ツールについて

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

授業ノート

□memo
・フォルダ作成
・テラパッド起動
・L2.2.2HTML例貼り付ける
・保存UTF8Nで保存
・ファイル名：index.html
・画像入れるとき→…
　※高さと幅は画像のプロパティから見る
・フッターはコピーライト何年～何年更新、著作権と決まってる
・タグをチェックする
・CSSや素材ファイルを作成したファイルに入れる
・UPする

・CSSを書くところは3つある
・ファビコンジェネレーターで拡張子を変換させる
・CSSは検証からコピペで反映させる
・設定→タブの文字数
・classで紐づける
・リセットCSS＝ブラウザが持っている初期値を忘れてもらうこと