本日のアジェンダ
1限目
学科 HTML/CSS基礎④
CSSの記述方法について
2限目
学科 HTML/CSS基礎④
CSSの記述方法について
3限目
学科 HTML/CSS基礎④
Webページ制作実践
4限目
学科 HTML/CSS基礎④
Webページ制作実践
5限目
学科 HTML/CSS基礎④
本日の講義のまとめ
本日のテーマ
CSSの記述を始めましょう
本日のレポート
リセットCSSついて
ブラウザは初期状態でタグ単位のデフォルトのスタイルシートを持っています。
このデフォルトのスタイルシートの内容はブラウザによって異なるためブラウザ環境を変更すると意図しない表示になることがあります。このような現象を防ぐために使用するのがリセット CSS です。
リセット CSS は、ブラウザが持っているスタイルシートをリセット（クリア）するためのスタイルシートですがリセットする範囲はコーディングスタイルに依存するため、これが正解というリセット CSS は存在しません。
各自のコーディングスタイルに合わせて適時変更してください。
CSSの書き方の3パターン
後から読み込まれたタグが優先される。
先にCSSのリンクを書いても、そのあと（後列）に直書きすると、後のタグが反映される。
- 【直書き】HTML タグにインラインで記述（<h1 style“”～>）
優先度が最も高い、後から修正が面倒だからあまりやらない。 - 【直書き】HTML ファイル内に記述（<style>～</style>）
- 【別立て】HTMLファイルとは別に記述（style.cssを作成）
ほかの人も分かりやすく運用することを考えるとこれがベーシック。
コメントアウト
- HTMLのソースコード
<!-- ～ --> - CSSのソースコード
/* ～ */
今日のWebページ制作実践
- テキスト分類タグについて
- コンテンツ埋め込みタグについて
- CSSとの紐付けについて
- セレクタの記載方法
制作物（本日までの途中経過）
※画面キャプチャ撮り方
右クリック→検証→PCアイコン押す→1480サイズ→点3縦並びアイコン→キャプチャフルサイズスクリーンショット
※PC画面にあわせてスクショすると全画面を撮りきれないため、レスポンシブiPhoneSEサイズのスクショを掲載
感想
今日はHTML記述の続きとCSSの記述を開始した。
これからCSSで見た目がどんどん変わっていくのが楽しみ。
