【CSS】基礎

# CSSとは

:sunny: HTMLを飾り付けしてくれる。（文字の色を変えてみたり、大きさを変えるなど）
:sunny: HTMLとは別のファイルに記述する。
:sunny: 要素名に対してどういった飾り付けをするのかを指定していく
:sunny: HTMLでは要素名と呼ばれていたがCSSではセレクタと呼ばれる

:sunny: 書き方の説明

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

```書き方.css
h1 {
  color: red;
}
```

セレクタ・・・h1
プロパティ・・・color
値・・・red

セレクタにはHTMLの飾り付けしたい要素を入力。
→ h1を飾り付けてください！宣言
プロパティにはセレクタにどんな飾り付けを注文したいですか？
→ colorを指定するので h1 の文字の色を変えてください！
値にはプロパティの注文に対してどうしたいのかを答える
→ 文字の色は red でおねがいします！

```NGな記入方法.css
h1 {color: red;}
```

上記のような書き方はNGです:no_good:

もし h1 に飾り付けたい注文が文字の色と文字の大きさと・・・と複数の注文になってしまうと冗長になってしまいコードが見づらくなります。
なのでセレクタのあとの { で必ず改行すること。

あとは・・・
プロパティの前は字下げする。
プロパティの末尾に : を記入する。
値の末尾に ; を記入する。


## color
:sunny: 文字の色を変える
:sunny: 16進数のカラーコードで色を指定（#ff0000,#008000など）
:sunny: 主要な色であれば直接色名を指定しても表示される（red,greenなど）

ちなみにカラーコードは[原色大辞典](https://www.colordic.org/)がおすすめ:thumbsup:

```例.html
<h1>16進数で指定した赤色の文字だよ</h1>
<p>直接redと色を指定した赤色の文字だよ</p>
```

```例.css
h1 {
  color: #ff0000;
}

p {
  color: red;
}
```

Web
↓
<img width="491" alt="スクリーンショット 2019-12-24 18.58.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/b81e2e0f-9d77-b6f3-57d9-3d32a7c3e1df.png">

どちらも赤色の文字が指定されました:laughing:

## font-size
:sunny: 文字の大きさを変える
:sunny: 単位はピクセル（px）や％指定（ブラウザの文字基準の何％）などがある

```例.html
<h1>文字の大きさを10pxにしてみました</h1>
<p>文字の大きさを20pxにしてみました</p>
```

CSSを指定しないと通常ではこのようにWebでは表示されます
↓
<img width="531" alt="スクリーンショット 2019-12-24 20.17.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/a7a2e037-dd50-305d-e42b-27d46085095c.png">

CSSで文字の大きさを指定すると・・・

```例.css
h1 {
  font-size: 10px;
}

p {
  font-size: 20px;
}
```

Web
↓
<img width="349" alt="スクリーンショット 2019-12-24 20.22.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/61987d1d-06f1-ec7b-c658-2dede99a6903.png">

文字の大きさが変わりました！:laughing:

## font-family
:sunny: 文字の種類を指定できる
:sunny: font-family: フォント名;　と記入
:sunny: フォント名にスペースがある場合は、 " " で囲む

```例.css
h1 {
  font-family: serif;
}

p {
  font-family: "Avenir Next";
}
```

Web
↓
<img width="417" alt="スクリーンショット 2019-12-24 20.36.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/a3d54e4d-614b-083a-263c-75cd2d9d67a2.png">

## background-color
:sunny: 背景色を指定

```例.css
h1 {
  background-color: #ff0000;
}

p {
  background-color: #ffff00;
}
```

Web
↓
<img width="292" alt="スクリーンショット 2019-12-24 20.42.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/63b3eb17-c5d7-2f82-5d30-2f9da78bc240.png">

## width,height
:sunny: width は横幅を指定する
:sunny: height は高さを指定する
:sunny: 単位はピクセル（px）や％指定（ブラウザの文字基準の何％）などがある

```例.css
img {
  width: 500px;
  height: 100px;
}
```

Web
↓
<img width="363" alt="スクリーンショット 2019-12-24 22.25.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/d274d8d6-e9b8-cb99-06dd-98aa63c6d688.png">

へちゃげたひよこちゃんになりました:sweat_smile:
ちなみに元のサイズはこちら
↓
<img width="252" alt="スクリーンショット 2019-12-24 22.34.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/0ea49338-9883-b8e8-79a4-42cf5a2e8f41.png">

## class

```例.html
<ul>
  <li>りんご</li>
  <li>いちご</li>
  <li>メロン</li>
</ul>
```

```例.css
li {
  color: red;
}
```

上記のように設定するとWeb上では
↓
<img width="139" alt="スクリーンショット 2019-12-24 22.50.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/2f036180-6b27-b724-b5fa-47f8744f62bd.png">


と表示される。
でもわかりやすいようにメロンだけ緑で表示したい。
この一部の要素にのみCSSで飾り付けたいときは class を使用する。

まずはHTMLを・・・

```例.html
<ul>
  <li>りんご</li>
  <li>いちご</li>
  <li class="green-fruits">メロン</li>
</ul>
```

このように記入。
属性名を class とし、属性値を green-fruits とする（属性値に " " をつけ忘れないこと！）
class を使用すると属性値がクラス名になります。
クラス名は好きに決めれますが、わかりやすい名前をつけるほうがいいです。

```例.css
li {
  color: red;
}

.green-fruits {
  color: green;
}
```

Webを確認すると・・・
↓
<img width="119" alt="スクリーンショット 2019-12-24 23.02.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/03bbd184-1efc-ea48-1594-3544f1ab7f05.png">

メロンだけ緑になりました！

cssの書き方は

```
.クラス名 {
　プロパティ: 値;
}
```

となります。
冒頭に . をつけて続けてクラス名を記入したら後の書き方はセレクタのときと同じです。