-本日のアジェンダ-
1限目
学科 HTML/CSS基礎③
HTMLとCSSを記述するための基本事項
2限目
学科 HTML/CSS基礎③
CSSの基本構造について
3限目
学科 HTML/CSS基礎③
CSSの基本構造について
4限目
学科 HTML/CSS基礎③
Chrome検証ツールについて
5限目
学科 HTML/CSS基礎③
本日の講義のまとめ
本日のテーマ
HTMLとCSSを結び付けていきましょう
文字コード・・・HTML・CSSどちらもファイルと文章の２つを変更する。
コメントアウト・・・メモを残せる便利な機能。
囲むことで、ここは読み込まないと指定もできる。
パス・・・絶対パス（道順を全部書く、絶対的な道順）
相対パス（ここから見てどこにあるか、道順を相対的に書く）
画像・・・HTMLのimg(検索にひっかかる・意味を持つもの）
CSSのbackground(意味を持たないもの・あくまでもデザイン）
表示のルール・・・HTMLではタグでインラインかブロックかが決まっているが、CSSでそれを自在に変更することができる。
※よく使うのでまとめサイトの表はよく使うことになる。
セレクタの得点・・・CSSは上から順に読み込まれるので同じ内容であれば下に来た情報が有効になるのが基本ルールだが、
セレクタの得点が高いほうが有効になることがある。
※下にある情報なのに反映されていないときはセレクタの得点の作用
CSSの基本構造について
- HTML ファイルとは別に記述する場合
- HTML ファイル内に記述する場合
- HTML タグにインラインで記述する場合
セレクタ {
プロパティ: 値;
プロパティ: 値;
・
}
（例）
【HTML】
<p class=”abc”>文字列１</p>
<p class=”def”>文字列２</p>
【CSS】
p.abc {
color: white;
background: red;
}
p.def {
color: yellow;
background: blue;
}
※ちなみに・・・書式さえあっていれば空欄があっても、逆に詰まっていてもCSSはあたる。
でも、見やすさや後で見返したときに分かりやすいようにこの形で書くのがおすすめ。
CSS：セレクタの記載方法
- 全称セレクタ
- 型セレクタ
- id セレクタ（#）⇒１個だけしか使えない。唯一無二のもの。
- class セレクタ（.）⇒何個も使いまわせる。
- 子孫結合子セレクタ
Chrome 検証ツール
ブラウザに表示されるWebページの設定情報を参照したり、想定通りに表示されない場合の調査には、Chrome の検証ツールの使用が有効です。また、スマートフォンやタブレットでの表示型式を確認することもできます。
良いサイトがあればこれを使って調べられる！！
【右クリック⇒検証】で表示
ＥＬＥＭＥＮＴ＝タグ・要素・HTMLのこと
左上の↖をクリックしてブラウザをクリックするとその部分のタグがハイライトされる。
また、StylesでCSSが確認できるし、シュミレーターとしてどう反映しているか自在に変更して見ることもできる。
本日の感想
昨日に引き続きHTMLを復習できたので、少し理解が進んだ。
CSSについても概要は理解できたように思う。
次回の来校で実際にどう反映していくのか使用して更に理解を深めていきたいと思う。
コメントを残す