HTML基礎④

CSSでデザインをするために

①htmlファイルのあるフォルダ内にCSSファイルを作る
　→10P全部適用などが楽、外部CSSとして紐づけしないといけない
②html内のheadに<style>で書く
　→紐づけしなくていい、何ぺージもある場合は面倒
③タグに直接書く
　→そのstyleを記述したタグ1個のみに適用、ただし1000点

〇CSSは後ろに書いたものが適用される（同じ点数の場合）

p.red{color: red;}
p.red{color: blue;}　→　こちらが適用

〇点数が買った方が適用される

p.red{color: red;}　→　こちらが適用
.red{color: blue;}

※外部CSSとhtml内のCSS記述を併用するのはあまり良くない

CSS の基本構造

1.CSSの構造（外部CSSの場合）

〇外部CSSをhtmlに紐づけする（<head>~</head>内に記述する）

<link href="CSSファイルのパス名" rel="stylesheet" type="text/css">

2.CSSの構造（html外に記述する場合）

@charset "utf-8";

セレクタ{
  プロパティ: 値;
}


/*コメント*/

p{
  color: red;
}

.class-1{
  padding: 10px;
}

#id{
  margin: 20px;
}

文字コード宣言

セレクタ：スタイル対象
プロパティ：スタイル種別
値：スタイル値

コメント

対称をタグで指定


対称をクラスで指定


対称をID名で指定

3.CSSの構造（html内に記述する場合）

<style>


セレクタ{
  プロパティ: 値;
}


/*コメント*/

p{
  color: red;
}

.class-1{
  padding: 10px;
}

#id{
  margin: 20px;
}

</style>

CSSの開始


セレクタ：スタイル対象
プロパティ：スタイル種別
値：スタイル値

コメント

対称をタグで指定


対称をクラスで指定


対称をID名で指定

CSSの終了

〇CSSの記述

・まず頭にリセットCSS
・同じｐに指定する場合は同じ{}に入れて良い
・「;」を入れないと次の行の命令が効かない場合がある（できれば入れる）

①通常

p{
  color: red;
}

②class指定の場合

p.red{
  color: red; 
}

③id指定の場合

p#red{
  color: red;
}

セレクタの記載方法

1.全称セレクタ

*{プロパティ: 値;}

2.型セレクタ

要素名{プロパティ: 値;}

３.idセレクタ

#id名{プロパティ: 値;}　例） div#box2{color: red;}

4.classセレクタ

#class名{プロパティ: 値;}　例） p.text2{color: red;}

5.結合子セレクタ

セレクタ セレクタ{プロパティ: 値;}　→　セレクタごとに区切って指定できる

例） headerの中のp
　　 header p{color: red;}

 　　mainの中のp
　　 main p{color: red;}

 　　header/nav/ul/li　→　全部headerの中（子孫）
　　 header li{color: red;}

〇nav/ulを省略しても効果あり

6.子結合子セレクタ

セレクタ > セレクタ{プロパティ: 値;}　例） selector2 > div{color: red;}

・「>」で区切る指定で特定の要素にのみ指定
・例）はdivだけが赤くなる

7.隣接結合子セレクタ

セレクタ + セレクタ{プロパティ: 値;}

8.一般兄弟結合子セレクタ

セレクタ ~ セレクタ{プロパティ: 値;}　例） .selector4 .c2 ~ div{color: red;}

・ある要素に後続している要素に指定
・例）はc2以降の兄弟が赤くなる

〇親子兄弟関係をわかりやすくするために入れ子構造になっている部分は先頭を下げる（わかりやすい）
注：半角スペースが入ると子孫の意味になるので注意