【CSS3】フロント経験ゼロのインフラエンジニアがフロントを勉強してみた②

# 目次
* はじめに
* 記法
* セレクタ、プロパティ
   - 文字
     + 文字色`color`
     + 文字大きさ`font-size`
     + 文字種類`font-family`
     + 文字太さ`font-weight`
     + 文字間隔`letter-spacing`
     + 行間隔`line-height`
 - 背景
     + 背景色`background-color`
     + 背景画像`background-image`
     + 背景大きさ`background-size`
  - 幅`width`
  - 高さ`height`
  - 枠線`border`
  - 角を丸める`border-radius`
  - 余白
     + 枠線内の余白`padding`
     + 枠線外の余白`margin`
  - リストスタイル`list-style`
  - ポジショニング
     + `float`
     + `text-align`
     + `position`
     + `vertical-align`
  - 重なる順番`z-index`
  - 透明度`opacity`
  - 要素指定`display`
  - アニメーション`transition`
  - 影をつける`box-shadow`
  - カーソルの形変更`cursor`
* おわりに 

---
# はじめに
普段はインフラエンジニアをやっています、
[やしうり](https://twitter.com/yashiuri01)と申します。
Webアプリを作りたいと思いフロント系言語を学習中です。
今回は学習したCSS3の基礎について記載します。  

---
# 記法
```CSS
/* コメント */
要素 {
  セレクタ: プロパティ;
}

/* クラスを指定する時はドットをつける */
.クラス名 {
  セレクタ: プロパティ;
}

/* カーソルが乗った時に適用する */
.クラス:hover{
  セレクタ: プロパティ;
}

/* 要素がクリックされている間だけ */ 
クラス:active{
  セレクタ: プロパティ;
}
```

---
# セレクタ、プロパティ
## 文字
### 文字色`color`
```CSS
/* all red */
color: red;
color: #ff0000;
color: rgb(255,0,0);
color: rgb(100%,0%,0%);
color: hsl(0, 100%, 50%);

/* 50%透過 */
color: rgba(255, 0, 0, 0.5);
color: hsla(0, 100%, 50%, 0.5);
```
[参考MDN](https://developer.mozilla.org/ja/docs/Web/CSS/color)

### 文字大きさ`font-size`
```CSS
/* デフォルトは16px */
font-size: 10px;

/* 50% = 親要素のフォントサイズ * 50% */ 
font-size: 50%;

/* 0.5em = 親要素のフォントサイズ * 50% */
font-size: 0.5em;
```
[参考MDN](https://developer.mozilla.org/ja/docs/Web/CSS/font-size)

### 文字種類`font-family`
```CSS
/* Georgiaを適用、ない場合はserifを適用 */
font-family: "Georgia", "serif";
```
[参考MDN](https://developer.mozilla.org/ja/docs/Web/CSS/font-family)

### 文字太さ`font-weight`
```CSS
/* normal bold ... */
font-weight: bold;
```
[参考MDN](https://developer.mozilla.org/ja/docs/Web/CSS/font-weight)

### 文字間隔`letter-spacing`
```CSS
letter-spacing: 10px;
```

### 行間隔`line-height`
```CSS
/* 行の高さを10pxに指定 */
line-height: 10px;
```

## 背景
### 背景色`background-color`
```CSS
/* 指定の仕方はcolorと同等 */
background-color: red;
background-color: #ff0000;
background-color: rgb(255,0,0);
```
[参考MDN](https://developer.mozilla.org/ja/docs/Web/CSS/background-color)

### 背景画像`background-image`
```CSS
background-image: url("画像URL")
```
[参考MDN](https://developer.mozilla.org/ja/docs/Web/CSS/background-image)

### 背景大きさ`background-cover`
```CSS
/* 画像の拡大
要素の空き領域が残らないように表示される
画像の切り取り有り、縦横比の崩れ無し) */
background-size: cover;

/* 画像の拡大
(画像の切り取り無し、縦横比の崩れ無し) */
background-size: contain;
```
[参考MDN](https://developer.mozilla.org/ja/docs/Web/CSS/background-size)

## 幅`width`
```CSS
width: 100px;
```
[参考MDN](https://developer.mozilla.org/ja/docs/Web/CSS/@media/width)

## 高さ`height`
```CSS
height: 100px;
```
[参考MDN](https://developer.mozilla.org/ja/docs/Web/CSS/@media/height)

## 枠線`border`
```CSS
/* 太さ 種類 色 */
border: 5px solid red;
```

## 角を丸める`border-radius`
```CSS
border-radius: 10px;
```

## 余白
### 枠線内の余白`padding`
```CSS
/* borderの内側の余白 */
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;

/* まとめてだとtop right bottom leftと時計回り*/
padding:20px 10px 20px 10px

/* top&bottom right&left */
padding: 20px 10px; 
```

### 枠線外の余白`margin`
```CSS
/* borderの外側の余白
 * 記述規則はpaddingと同様*/
margin: 1em;
```

## リストスタイル`list-style`
```CSS
/* <li>の先頭の黒点をなくす */
list-style: none;
```

## ポジショニング
### `float`
```CSS
/* ブロック要素を横並びにする
   left center right */
float: left;
```
[参考MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning)  
※横並びにするならFlexboxもあるという記事もあり。

### `text-align`
```CSS
/* インライン要素、インラインブロック要素の配置指定
   left center right */
text-align: left;
```

### `position`
```CSS
/* デフォルトはposition: static */
/* 絶対位置指定 初期の包括ブロックに対して配置
top left rigt bottom から何pxのところに配置と指定する */
position: absolute;
top: 0px;
left: 0px;

/* 相対位置指定 親要素に対して配置する */
position: relative;
top: 0px;
left: 0px;

/* 要素を指定した画面に固定する */
position: fixed;
top: 10px;
left: 10px;
```

### `vertical-align`
```CSS
/* インライン要素、テーブルボックスの垂直方向配置の指定 */
/* baselineがデフォルト */
/* top middle bottom */
vertical-align: middle;
```

## 重なる順番`z-index`
```CSS
/* position: staticの時は無効 */
z-index: 10;
```

## 透明度`opacity`
```CSS
/* 透明度70% */
opacity: 0.7;
```

## 要素指定`display`
```CSS
/* デフォルトはinline */
display: block;
display: inline-block;
display: inline;
```

## アニメーション`transition`
```CSS
/* transition: 変化対象プロパティ名 変化時間, 変化対象プロパティ名 時間 */
transition: all 1s;
transition: margin-right 2s, color 1s;
```
[参考MDN](https://developer.mozilla.org/ja/docs/Web/CSS/transition)

## 影をつける`box-shadow`
```CSS
/* 水平方向 垂直方向 色 */
box-shadow:10px 10px #000000 ;
```

## カーソルの形変更`cursor`
```CSS
/* ポインターに変更 */
cursor: pointer;

/* テキストバーに変更 */
cursor: text;
```
---

# おわりに
もっといい書き方があるよ等ございましたらご連絡頂けますと幸いです。
Grid LayoutやFlexbox、レスポンシブデザインについても学習していきたいと思います。
ここまでお読み頂きありがとうございました。