CSSを何も知らない人がCSSに入門してみた

## セレクター

### #id1

id

### .class1

class

### .class1,.class2

セレクタ複数選択（OR）

### .class1.class2

セレクタ複数選択（AND）
例: .class1.class2

### .class1 .class2

セレクタの子（n階層）要素のセレクタ

### .class1 > .class2

セレクタの直接の子（1階層）要素のセレクタ

### .class1[attr1][attr2]

属性で絞り込み（AND）
例: a[href][title]

### 特定の要素の次にある要素, 特定の要素以降の要素など他にもたくさんある

省略
https://itsakura.com/css-multi-selector 参照

### .class1:nth-child(n)

セレクタにヒットする要素群のn番目の要素

### .class1::before / .class1::after

要素の直前もしくは直後のスタイルを指定する。

### .class1:link

リンクのスタイルを指定する。

### .class1:visited

既に訪れたリンクのスタイルを指定する。

### .class1:hover

マウスカーソルが上に乗った時のスタイルを指定する。

## プロパティ

### display

要素の種類を指定する。
[詳細はこちら。](https://saruwakakun.com/html-css/basic/display)

### font-size

フォントサイズを指定する。単位はrem。

### color

色を指定する。

### font-color

フォントカラーを指定する。

### text-align

テキストのアライメントを指定する。

・left
左寄せ

・right
右寄せ

・center
中央揃え

・justify
均等

### position

ボックスの配置方法を指定する。

・static
位置を指定できなくする（ブラウザに任せる）。

・relative
何もプロパティを設定しなければ、staticと同じ。
top, right, bottom, leftを指定することで、staticでの位置からずらすことができる。

・fixed
[viewport](#viewport)に対する相対位置で配置される。
つまり、ページがスクロールされても、いつでも同じ場所に配置される。
relative同様、top, right, bottom, leftプロパティが使われる。

・absolute
fixedとほぼ同等だが、viewportからの相対位置の代わりに、位置指定有効かつ最も近い世代の祖先要素からの相対位置に配置される。
位置指定有効な要素の祖先を持たなければ、absoluteな要素はdocumentのbodyからの相対位置に配置されるし、ページスクロールで動きもする。 
"位置指定有効な"要素はstatic以外のいずれかの値が指定された場合であったことを思い出してほしい。

### z-index

ボックスの重なりの順序を指定する。
positionにstatic以外が指定されている時のみ有効。

・auto（初期値）
親要素と同じ階層になる。

・数値
0を基準として、値が大きいものほど上になる。

### margin

自分の周りの大きさを指定する。
ショートハンド：http://css-happylife.com/archives/2007/0113_1955.php

### padding

自分の大きさを指定する。
ショートハンド：http://css-happylife.com/archives/2007/0113_1955.php

### top/left

上/左からの距離を指定する。

```css
top: 50%;
left: 50%;
```

と書くと中央になる。

### margin-top/margin-bottom/margin-left/margin-right

上下左右のマージンを個別に指定する。

```css
left: 50%;
margin-left: -330px;
```

と書くと中央から330pxだけ左にずれる。
（左辺から-330px分左にスペース生成）

```css
left: calc(50% - 330px);
```

と書いても同じ意味になる。
（中央よりも330px左の位置に配置）

### width/height

幅/高さを指定する。
widthを%指定すると、その左からその%分だけ表示される（width: 50%だと左半分表示）。
heightでも同様。

### min-width/min-height

幅/高さの最小値を指定する。
[使い道はこちら。](https://saruwakakun.com/html-css/basic/max-min-width)

### background-color

背景色を指定する。

### border

枠のフォーマットを指定する。
[指定方法の詳細はこちら。](http://www.htmq.com/style/border.shtml)

### border-radius

borderの丸みを指定する。
50%で円になる。
[指定方法の詳細はこちら。](http://www.htmq.com/css3/border-radius.shtml)

### box-shadow

ボックスに影を付ける。
[詳細はこちら。](http://www.htmq.com/css3/box-shadow.shtml)

### overflow

ボックスの範囲内に内容が入りきらない場合のはみ出た部分の表示の仕方を指定する。

・visible（初期値）
ボックスからはみ出して表示。

・scroll
入りきらない内容はスクロールして見られるようになる。

・hidden
はみ出た部分は非表示。

・auto
ブラウザ依存（大抵scroll同様の動きになる）。

### content

before/afterセレクター指定時のみ指定可能。
要素の直前または直後に文字列や画像などのコンテンツを挿入する。

### background-size

背景画像のサイズを指定する。

・auto（初期値）
よしなに

・contain
背景領域に収まる最大サイズ（比率保持）

・cover
背景領域に収まる最小サイズ（比率保持）

・長さ
背景画像の幅・高さを指定する

・%
背景領域に対する背景画像の幅・高さのパーセンテージを指定する

### background-position

背景画像の表示開始位置を指定する。

・%
背景画像が表示される領域の左上からの距離を、横方向と縦方向の順で、％で指定する。
例えば、`background-position: 20% 40%;`と指定した場合、表示される領域の左端から20％、上端から40％の位置が背景画像の表示開始位置になる。

・left,center,right/top,center,bottom
それぞれ0%, 50%, 100%と指定してるのと同じ

・px
背景画像が表示される領域の左上からの距離を、横方向と縦方向の順で指定する。

### background-image

背景画像を指定する。

・none（初期値）
背景画像を指定しない。

・url([image-URL])
背景画像に[image-URL]を使用する。

### opacity

1で不透明、0で透明。

## 小技

### 縦を中央揃え

```css
display: flex;
align-items: center;
justify-content: center;
```

## 注釈

### viewport

> viewport（ビューポート）とは、日本語に訳すと「表示領域」という言葉がしっくりくると思います。
> 例えば、デスクトップ環境（PCなど）のブラウザなどでは、ブラウザウインドウの表示領域がviewportになります。