CSS入門（ドットインストール）

# CSS入門
## 03.セレクタとプロパティを理解しよう
### セレクタとプロパティ

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

```

### セレクタの種類


```css
/* universal selector  すべての要素に対して*/
* { color: skybule; }

/* 要素名に対して p h1 div */
h1 { color: orange; }

/* id に対して */
#first { color: skyblue; }

/* class に対して */
.points { color: violet; }

```

## 04.セレクタを使ってみよう
###セレクタ色々

```css
/* カンマ区切り：　h1 と p */
h1, p { color: skyblue; }

/* スペース区切り： div の下にある階層の span 全て */
div span { color: skyblue; }

/* > 区切り： divの直下にあるspanだけ*/
div > span { color: skyblue; }

/* + 区切り： p の次にくる p 要素*/
p + p { color: skybule; }

/* 連結：p要素且つ、pointsクラス*/
p.points { color: skyblue; }

```

## 05.属性セレクタを使ってみよう
###属性セレクタ

HTMLタグの属性有無、属性にある特定の値があるかどうかでスタイルをつけたりできるセレクタ

```css
/* aタグのうちtitle属性があるものに対して*/
a[title] {
  color: skyblue;
}

/* aタグのhref属性がgoogleだった場合 */
a[href="http://google.com"] {
  color: orange;
}

/* aタグのclass属性にsearchが含まれている場合 */
a[class~="search"] {
  color: violet;
}

/* inputタグのtype属性がtextだった場合 */
input[type="text"] {
  color: red;
}
```

## 06.擬似クラスを使ってみよう
###セレクタの擬似クラス
ある要素が特定の状態にある場合にスタイルを指定するための特殊なセレクタ

下記の順番で処理されることに注意！

|優先度|擬似セレクタ|
|:---:|:---:|
|1|link|
|2|visited|
|3|hover|
|4|active|


```css
/* ul階層下の最初のli要素のみ */
ul li:first-child { color: skyblue; }

/* そのサイトを訪問したことがない場合 */
a:link { 
  color: violet;
}

/* そのサイトを訪問したことがある場合 */
a:visited {
  color: orange;
}

/* マウスオーバした際 */
a:hover {
  color: pink;
}

/* クリックした際 */
a:active {
  color: red;
}

/* input要素にフォーカスが当たった際*/
input:focus {
  background-color: skyblue;
}
```

## 07.擬似要素を使ってみよう
###ある要素の一部を指定するときに使う

```css
/* p要素の一行目だけ指定 */
p:first-line { color: skyblue; }

/* 最初の文字だけ */
p:first-letter { color: skyblue; }

/* 要素の直前直後 (contentプロパティ必須) */
p:before { content: "->"; }
p:after { content: "<-"; }
```
## 08.セレクタの詳細度を理解しよう
###セレクタの詳細度
複数のセレクタがあった場合にどのセレクタが優先されるかを決めるルール
(a)の方から比べていって、大きい方が優先される仕組み

|詳細度|内容|
|:---:|:---|
|再優先|値の後に`!important`を記載|
|(a)|style属性にスタイルを書くことで1がカウントされる|
|(b)|セレクタにidが入るたびに1がカウントされる|
|(c)|id以外の属性もしくは擬似クラスが入るたびに1がカウントされる|
|(d)|要素名か擬似要素が入るたびに1がカウントされる|

```css
/* 0, 0, 0, 1 */
a { color: skyblue; }
/* 再優先される */
a { color: skyblue !important; }

/* 0, 0, 1, 1 */
a.link { color: pink; }

/* 0, 0, 1, 1 */
/* 同じ場合は後に書いた方が優先される */
a.search { color: orange; }

/* 0, 1, 0, 1 */
a#site { color: blue; }
```

## 09.プロパティの値を指定しよう
###長さ

|値|説明|
|:---:|:---|
|px|ピクセル|
|em|ベースとなっている親要素のフォントサイズに対して何倍か|
|%|フォントサイズにかぎらず、ベースとなっている親要素の幅や大きさの何％かというのを示す|

```css
body { font-size: 16px; }

/* 親要素の2倍なので32px */
h1 { font-size: 2em; }

/* 親要素の150%なので32px */
h1 { font-size: 150%; }
```

###色

|指定種別|指定方法|
|:---|:---|
|名前|`h1 { color: blue; }`|
|RGB（16進数）①|`h1 { color: #00f; }`|
|RGB（16進数）②|`h1 { color: #0000ff; }`|
|RGB（％）①|`h1 { color: rgb(0, 0, 255); }`|
|RGB（％）②|`h1 { color: rgb(0%, 0%, 100%); }`|

## 10.ボックスモデルを理解しよう
###ボックスモデルのそれぞれの領域を設定するプロパティ

|プロパティ|説明|
|:---:|:---|
|width|要素の幅|
|height|要素の高さ|
|border|領域につける枠線|
|padding|ボーダーと要素の間にある内側の余白|
|margin|境界の外にある親要素との間の余白|

###width と height

```css
body, html { height: 100%; }

div {
background: silver;
width: 50%;
height: 50%; /* heightは親要素のheightを明示的に指定しないと想定通りの挙動にならない */
}
```

## 11.borderで境界線のスタイルを変えよう
###border

|種類|説明|
|:---:|:---|
|border-color|境界線の色の指定|
|border-width|境界線の幅の指定|
|border-style|境界線のスタイルの指定|

###border-styleの値の種類

|種類|説明|
|:---:|:---|
|solid|実線|
|dotted|点線|
|dashed|破線|
|double|二重線|
|inset/outset|立体的に見せるスタイル|


```css
/* 一行ずつ書く場合 */
div {
border-color: ornage;
border-width: 4px;
border-style: dotted;
}

/* まとめて書く場合（順不同でOK） */
div {
border: orange 4px dotted;
}

/* 上下左右を指定 */
div {
border-top: orange 4px dotted;
border-bottom: orange 4px dotted;
border-left: orange 4px dotted;
border-right: orange 4px dotted;
}
```

## 12.paddingで余白を制御しよう
###paddingプロパティに与える値の数と制御される箇所

|値の数|制御される箇所|例|説明|
|:---:|:---:|:---|:---|
|1|all|`padding: 10px`|全ての幅が10px|
|2|top/bottom  right/left|`padding: 10px 50px`|上下10px、左右50px|
|3|top  right/left  bottom|`padding: 10px 50px 20px`|上10px、左右50px、下20px|
|4|top  right  bottom  left|`padding: 10px 20px 30px 40px`|上10px、下30px、左40px、右20px|

## 13.marginとmarginの相殺を理解しよう

###margin
基本的な指定の仕方はpaddingと同じ

###marginの相殺
下記の場合、marginはbox1のbottomとbox2のtopの合計値ではなく、大きい値がmarginとなる

```css
body { margin: 0; }

div#box1 {
background: silver;
margin: 10px 20px 30px;
}

div#box2 {
background: orange;
margin: 20px;
}
```

## 14.文字に関するプロパティを使ってみよう

|プロパティ|値|説明|
|:---:|:---:|:---|
|color|silver|文字色を銀色にする|
|font-size|24px|フォントサイズを24pxにする|
|font-family|Arial|フォント種類をArialにする|
|font-weight|bold|太文字にする|
|text-align|center|文字の位置を真ん中にする|
|text-decoration|underline line-through|下線、打ち消し線を引く|

```css
p {
  color: silver;
  font-size: 24px;
  font-family: Arial;
  font-weight: bold;
  text-align: center;
  text-decoration: underline line-through;
}
```

## 15. list-styleでリストのスタイルを変えよう

```css
ul {
  list-style: inside decimal;
  list-style: outside lower-alpha;
  list-style: url('smile.png');
}
```

###list-style色々
値は順不同且つ、省略可能

|タイプ|値|説明|
|:---:|:---:|:---|
|type|disc|黒丸|
|type|circle|白丸|
|type|square|四角|
|type|decimal|連番|
|type|lower-alpha|アルファベット|
|image|url('smile.png')|画像|
|position|inside/outside(default)|マーカー位置の指定|

## 16.cursorでカーソルの形状を変えよう
###cursorプロパティ
カーソルがある要素上に乗った際の形状を指定

```css
.help { cursor: help; }
.dragme { cursor: move; }
.clickme { cursor: pointer; }
.smile { cursor: url('smile.png'), auto; }
/* autoとすると画像がなかった際に規定の値が使用される */
```

## 17.backgroundで背景スタイルを変えよう

```css
body {
  background-color: silver;
  background-image: url('bg.png');
  background-repeat: no-repeat;
  background-repeat: repeat-x;
  background-position: 10px 10px;
  background-position: top center;
  background-attachment: scroll;
  background-attachment: fixed;
  /* 値は順不同且つ、省略可能 */
  background: url('bg.png') no-repeat fixed;
}
```

## 18.displayで要素の配置方法を変えよう
###要素の配置
HTMLのそれぞれの要素はどのように配置されるのかが予め初期値としてブラウザによって決められている

* ボックスの種類

|種類|説明|
|:---:|:---|
|ブロックボックス|下に積み重なって配置されるボックス|
|インラインボックス|左につめらていくボックス|

* レベル要素の種類

|種類|説明|
|:---:|:---|
|ブロックレベル要素|ブロックボックスを生成する`h1`, `p` などの要素|
|インラインレベル要素|インラインボックスを生成する`span`, `a`などの要素|

* displayプロパティ

それぞれの要素の配置の方法を変更したい場合に用いる

|値|説明|
|:---:|:---|
|block|ブロックボックスにしたい場合|
|inline|インラインボックスにしたい場合|
|list-item|リストのように左にマーカーを持たせたい場合|
|inline-block|インラインレベル要素のように左に詰められていくが、ブロックレベル要素の性質を持たせたい場合|
|none|表示させたくない場合|

### 19.positionで位置を調整してみよう

* positionプロパティ

|値|説明|
|:---:|:---|
|static|positionプロパティの初期値で普通に配置される|
|relative|staticの位置からずらして表示させたい場合|
|fixed|スクロールしても位置を固定しておきたい要素に使用|
|absolute|親要素のpositionが何かによって配置の基準点が変わる|

## 20.z-index, overflowを理解しよう

### **z-index**
position:static以外の要素に対して有効
値が大きいほど上に来る

### **overflow**
ブロック要素の中のコンテンツがその幅と高さを超えて存在するときに、
どういった表示方法にするかという指定

|値|説明|
|:---:|:---|
|visible|デフォルトの値でそのまま表示する|
|hidden|はみ出た部分を非表示にする|
|scroll|スクロール領域を作ってくれる|

## 21.line-height, vertical-alignを理解しよう

### **line-heightプロパティ**
p要素などに対してボックスモデルが作られた際など、行単位でも四角い領域が確保されていて、それを行ボックスと呼ぶ。
その一つ一つの行ボックスの高さを規定するのが`line-height`プロパティです。

### **font-sizeプロパティとの関係性**
`font-size`はフォントの上から下までの高さを規定するためのプロパティになり、
例えばline-heightの24pxからfont-sizeの18pxを引いた残りの6oxは上下に均等に3pxずづ配置される。
これらによって行の高さを調節し文章を酔いやすくするというのを良くするので覚えておく。

### **vertical-align**
例えば文章の途中とか前後に画像などのインラインレベル要素を表示したい場合に、どの縦位置に表示したいかというのを指定するためのプロパティ。

|値|説明|
|:---:|:---|
|baseline|デフォルトの値、フォントのベース・ラインに揃える|
|top|行ボックスのトップに合わせる|
|bottom|行ボックスのボトムに合わせる|
|middle|行ボックスの中央ではなく、英小文字の中央を通る線とそのインライン要素の中央を揃える|

## 22. float, clearを使ってみよう

### **float**
指定した要素を通常の配置の流れから切り離して、左右に寄せるためのプロパティ
floatを指定した時はwidthをつける癖もつけておく！

### **clear**
floatを解除して、ここから下はfloatした要素の下に配置とするためのプロパティ
clearはブロックレベル要素にしか適用できない！