今日の教材：CSS でデザインを始める前に

L3.3.2 ボックスモデルの表示ルール

ボックスモデルの表示ルールはタグの種類によって異なりますが display プロパティを使用することで変更可能です。

インライン
（display: inline;）		インラインブロック
（display: inline-block;）		ブロック
（display: block;）
基本 ： 単語・テキスト　　　　　　　　　　　画像　　　　　　　　　　　　　　レイアウト　　　　　　　

→例：h1を横に並ばせたい
　本来、h1はdisplay: block;だが、display: inline;に変更すれば横にできる！

リセットCSS

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

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

Webページをこんなふうに作りたい、設計図（=デザインカンプ）通りにしたい
→初期状態じゃなくて、自分で決めたい！
→初期状態をリセットする=リセットCSS。

ネットで拾ったリセットCSSを使うと、どこをリセットしたか理解ができなくなるので、
L3.7.1 まるっと新規スタイルシートにコピー＆ペースト。いじらない。ファイル名reset.cssで保存。→リセット完了！
練習問題1の簡易CSSのほうが慣れるまでは良いかも。
あとは＋していくだけ。＝style.css。reset.cssとstyle.cssは分けよう！

練習training-problems_001

ポイント

  • 今回は完成しているCSSに合わせてHTMLを直す。CSSはいじらない。
  • デザインカンプと現状index.htmlを上下に並べ比べる。
  • 画像の表示には2つ方法がある。
    ①HTMLにimgタグ入れる
    ②背景に画像を置く：今回の右上スマホ画像 はこっち

classの使い方について

classやidをつけるのは、CSSとの紐づけのために必要。
CSSで定義している通りのタグにしないといけないから。
例：HTMLは<h4 class=”textcolor03″>（このh4はtextcolor03です、と定義）
→CSSはsection.mainbox03 h4.textcolor03　　空白は「配下の」、class名の前に.（ピリオド）

画像の前にclassをつけるのは、CSSで指定しているからだが、そもそもはその画像にだけ適用させたいから。
classをつけないと、pタグの他の画像にも適用になってしまう。