【CSS】リストのスタイル変更と位置変更、そして余白

## list-style: none;
:sunny: リストの先頭のマークを消す

```例.html
    <ul>
      <li>←ここに黒い点が表示されている</li>
      <li>←ここに黒い点が表示されている</li>
      <li>←ここに黒い点が表示されている</li>
    </ul>
```

Web
↓
<img width="301" alt="スクリーンショット 2019-12-25 15.34.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/374198e2-8ab9-a2d4-1298-8840d29b52b9.png">

この黒い点を消すために・・・

```例.css
li {
  list-style: none;
}
```

このCSSを適用させると･･･

<img width="302" alt="スクリーンショット 2019-12-25 15.51.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/3e15ff64-6644-e84f-420e-ddbf1106c106.png">

なくなりました！:laughing:

## float

:sunny: 指定した要素を横並びにする
:sunny: 値を left にした場合は左寄せ、 right にしたら右寄せ

```例.html
    <ul>
      <li>りんご</li>
      <li>みかん</li>
      <li>メロン</li>
    </ul>
```

Web
↓
<img width="127" alt="スクリーンショット 2019-12-25 15.59.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/166df5b7-6ef3-2750-190a-cbbae67e6bcd.png">

通常であれば、このように縦に並んでしまいます。
これを横並びにしたい！・・・というときに float プロパティを使うと・・・

``` 例.css
li {
  float: left;
}
```

Web
↓
<img width="193" alt="スクリーンショット 2019-12-25 16.05.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/0ad09acf-85a0-e684-1bc7-34c95d705ca0.png">

横並びにはなったけど黒い点が邪魔・・・:sweat:
さきほどの list-style: none; を付け加えると・・・

```例.css
li {
  float: left;
  list-style: none;
}
```

Web
↓
<img width="186" alt="スクリーンショット 2019-12-25 16.08.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/d19cb239-6249-80cf-269b-84104645494c.png">

消えました！:laughing:
でも りんごみかんメロン って文字がぎゅうぎゅうで見にくいな・・・:thinking:
余白を取るにはどうしたらいいのだろう。

##余白（paddingとmargin）
:sunny: padding はブロック内側に余白をとる
:sunny: margin はブロック外側に余白をとる

どういうことかというと・・・

<img width="314" alt="スクリーンショット 2019-12-25 17.10.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/6c47381b-68dc-2fe7-6317-5ba9959335d8.png">

まだなにも余白をとっていないときはこのようになります。
この赤と青のあいだに余白を入れたいときには margin プロパティを使用します。

```
margin-bottom: 100px;
```

<img width="316" alt="スクリーンショット 2019-12-25 17.18.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/a38641c2-1364-fbc3-9deb-5db3851d3f79.png">

余白がとれました！:smile:
そして padding はどうなるのかというと・・・


<img width="314" alt="スクリーンショット 2019-12-25 17.23.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/a6fe47f7-239f-0f47-9fc1-b16324ee6192.png">

こうなります。
書き方がいろいろあるのでまとめます。

|書き方　              |説明                       |
|:--------------------|--------------------------|
|margin-top: 10px;    |ブロック上に外側10pxの余白をとる |
|margin-bottom: 10px; |ブロック下に外側10pxの余白をとる |
|margin-left: 10px;   |ブロック左に外側10pxの余白をとる |
|margin-right: 10px;  |ブロック右に外側10pxの余白をとる |

|書き方　               |説明                       |
|:---------------------|--------------------------|
|padding-top: 10px;    |ブロック上に内側10pxの余白をとる |
|padding-bottom: 10px; |ブロック下に内側10pxの余白をとる |
|padding-left: 10px;   |ブロック左に内側10pxの余白をとる |
|padding-right: 10px;  |ブロック右に内側10pxの余白をとる |


他にも書き方があって、複数の余白をとりたいときは下記のほうが便利です！

|書き方　              |説明                       |
|:--------------------|--------------------------|
|margin: 10px;    |ブロックの外側、上下左右に10pxの余白をとる |
|margin: 10px 20px; |ブロックの外側、上下に10px,左右に20pxの余白をとる |
|margin: 10px 20px 30px; |ブロックの外側、上に10px,左右に20px,下に30pxの余白をとる |
|margin: 10px 20px 30px 40px;  |ブロックの外側、上に10px,右に20px,下に30px,左に40pxの余白をとる |

|書き方　              |説明                       |
|:--------------------|--------------------------|
|padding: 10px;    |ブロックの内側、上下左右に10pxの余白をとる |
|padding: 10px 20px; |ブロックの内側、上下に10px,左右に20pxの余白をとる |
|padding: 10px 20px 30px; |ブロックの内側、上に10px,左右に20px,下に30pxの余白をとる |
|padding: 10px 20px 30px 40px;  |ブロックの内側、上に10px,右に20px,下に30px,左に40pxの余白をとる |



これを利用してさきほど見づらかった りんごみかんメロン を変更してみます

```例.css
li {
  float: left;
  list-style: none;
  margin-right: 20px;
}
```

4行目に margin-right: 20px; を追加してみました。

Web
↓
<img width="219" alt="スクリーンショット 2019-12-25 18.20.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/1f3ae8a3-16ac-605c-fcee-2f793ded38ba.png">

りんご　みかん　メロン　となり見やすくなりました:raised_hands: