【CSS基礎】個人的メモ

#はじめに
CSSに関して、ネットに転がっているソースを朧気な理解のままコピペしてきたが
この度仕組みをきちんと理解しようと基礎から勉強を始めたので、備忘録として残す

#inherit
プロパティには自動で継承するものと継承しないものがある。
例えば…

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .parent{
            color: green;
            border: 1px solid;
        }
        .child{
        }
    </style>
</head>
<body>
    <div class="parent">
        yamada
        <div class="child">
            tarou
        </div>
    </div>
</body>
</html>
```

![スクリーンショット 2021-06-26 11.37.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503230/99ea7965-2456-a143-4a00-b2bed9a45b2d.png)
parentセレクタに指定したcolorプロパティは、小要素の方にも適用されているが、
borderプロパティは親要素にしか適用されない。

そこで、childセレクタを以下のようにすると…

```css
.child{
    border: inherit;
}
```

![スクリーンショット 2021-06-26 12.01.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503230/c158db7a-a9b2-7a66-18c6-1f08ff7bc164.png)
といった具合に、小要素にも適用される。

＊MDNには、borderプロパティには「継承なし」と記載されている
https://developer.mozilla.org/ja/docs/Web/CSS/border


#width, height
##width, heightの値を%指定（ちょっとした注意点）
width, heightともに、**親要素に対する%の値**を指定することができる

```html:sample.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .parent{
            border: 1px solid;
            width: 50%;
            height: 50%;
        }
    </style>
</head>
<body>
    <div class="parent">
        yamada
    </div>
</body>
</html>
```

![スクリーンショット 2021-06-26 15.49.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503230/c1145c92-f83c-136d-7339-94cbf8524892.png)
上記の場合だと、parentクラスセレクタの親要素は`body`であるため、
見た目上、幅は50%になるが、高さは変わらないように見える
（開発者ツールで見るとcssはきちんと効いていることがわかる）

##実際の例

```html:sample.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .parent{
            border: 1px solid;
            width: 500px;
            height: 500px;
        }
        .child{
            border: inherit;
            width: 50%;
            height: 50%;
        }
    </style>
</head>
<body>
    <div class="parent">
        yamada
        <div class="child">
            tarou
        </div>
    </div>
</body>
</html>
```

![スクリーンショット 2021-06-26 15.54.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503230/742e85ab-326b-72b8-b49d-24696bd8cd2e.png)

childクラスセレクタに関して、parentクラスセレクタに対してwidth50%, height50%が適用されていることがわかる

#display
displayプロパティの主な値は以下の通りで、サイズの変更の有無は以下の通りである

| 値 | サイズの変更 |
|:-:|:-:|
| block  | 可  | 
| inline  |  不可 |
| inline-block  | 可  | 

```css:sample.css
        .block{
            border: 1px solid;
            width: 100px;
            height: 10px;
        }
        .line{
            border: 1px solid;
            width: 30px;
            height: 10px;
            display: inline;
        }
```

![スクリーンショット 2021-06-26 17.11.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503230/81463ce4-e8a3-aaa4-dee1-df2ebcd46fc8.png)

lineクラスセレクタは`display: inline;`よりインライン要素となる。
lineクラスセレクタのwidthプロパティには30px、heightプロパティには10pxを指定しているが、
コンテンツ（a）の幅に添ったサイズとなってしまっている。

これを解消するには、displayプロパティに`inline-block`を指定する

![スクリーンショット 2021-06-26 17.23.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503230/ddad00b0-9ce4-0306-0d93-c6e6a9579081.png)

これで、セレクタで指定した値が反映される

#position

その要素の位置を調整する際に用いる

↓基準となる位置

```css:sample.css
        .pos1{
            border: 2px solid red;
            width: 100px;
            height: 10px;
        }
        .pos2{
            border: 2px solid blue;
            width: 100px;
            height: 10px;
        }
        .pos3{
            border: 2px solid green;
            width: 100px;
            height: 10px;
        }
```

![スクリーンショット 2021-06-26 17.43.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503230/a0f0d57b-d16b-b6a7-eb06-db3cb052313c.png)

##relative
基準となる位置と比較して、どの位置となるかを指定する

```css:sample.css
        .pos2{
            position: relative;
            top: 5px; left: 5px;
        }
```

![スクリーンショット 2021-06-26 17.51.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503230/8588c634-f29b-b405-b906-cc4bdab570dd.png)

##fixed
基準となる位置(ページの左上端)と比較して、どの位置となるかを指定し、固定する

```css:sample.css
        .pos2{
            position: fixed;
            top: 5px; left: 5px;
        }
```

![スクリーンショット 2021-06-26 17.56.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503230/8d00f656-fb30-bbf7-f5c8-bb7f06984ce2.png)

pos3クラスセレクタが詰められていることにも注目


##absolute
基準となる位置と比較して、位置を指定する
しかし、親要素のpositionの値によって挙動が変わる

```html:sample.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .pos1{
            border: 2px solid red;
            width: 100px;
            height: 10px;
        }
        .pos2{
            border: 2px solid blue;
            width: 100px;
            height: 10px;
        }
        .pos3{
            border: 2px solid green;
            width: 100px;
            height: 10px;
        }
        .abs{
            background:plum;
            width: 10px;
            height: 10px;
        }
    </style>
</head>
<body>
    <div class="pos1"></div>
    <div class="pos2">
        <div class="abs"></div>
    </div>
    <div class="pos3"></div>
</body>
</html>
```

![スクリーンショット 2021-06-26 18.40.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503230/05656cdd-dbf5-67b9-e531-eac9166df955.png)

###親要素のpositionがstatic（指定なし）のとき

ウィンドウの左端上を基準に、位置を指定する

```css:sample.css
        .pos2{
            border: 2px solid blue;
            width: 100px;
            height: 10px;
            position: static;
        }
        .abs{
            background:plum;
            width: 10px;
            height: 10px;
            position: absolute;
            top: 5px; left: 5px;
        }
```
![スクリーンショット 2021-06-26 18.45.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503230/5b5593d7-927d-982b-f0dc-8814668906da.png)

###親要素のpositionがrelativeのとき

親要素の位置を基準に、位置を指定する

```css:sample.css
        .pos2{
            border: 2px solid blue;
            width: 100px;
            height: 10px;
            position: static;
        }
        .abs{
            background:plum;
            width: 10px;
            height: 10px;
            position: absolute;
            top: 5px; left: 5px;
        }
```

![スクリーンショット 2021-06-26 18.51.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503230/21d0c835-22e5-3e5c-2acf-4bdefb78a2d3.png)

#verical-align
垂直方向の位置の調節を行う

例えば、文字とアイコンを並べて表示したいとき…

```html:sample.html
<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .back{
            background: aqua;
        }
    </style>
</head>
<body>
    <div class="back">Yamada Tarou<i class="material-icons">insert_chart</i></div>
</body>
</html>
```

![スクリーンショット 2021-06-26 19.27.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503230/404ea44f-76d2-924f-2729-261c35192dc4.png)

アイコンが少し浮いてしまう。
文字やアイコンなどの要素は、ベースライン(baseline)と呼ばれる基準線を元に配置されるため、
このような現象が起こる

これを直すためには、アイコンの方のベースラインをいじる必要がある

```css:sample.css
        .pos{
            vertical-align: bottom;
        }
```
![スクリーンショット 2021-06-26 19.40.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503230/c2e57d6f-7134-43bd-0b38-1457e557baf5.png)