【CSS】CSSのプロパティについて

# 記事概要
CSSのプロパティについて、まとめる。

# まとめ(プロパティ)
## colorプロパティ
値によって自由に文字の色(色の名前 or カラーコード)を指定することができるプロパティ

```css
h1 {
  color: red;
}

h1 {
  color: #ff0000;
}
```

## font-sizeプロパティ
文字の大きさを指定するプロパティ

```css
.hoge {
  font-size: 50px;
}
```

## font-weightプロパティ
フォントの太さを指定するプロパティ

```css
.hoge {
  font-weight: bold;
}

.hoge2 {
  font-weight: 100;
}
```

## heightプロパティ
HTML要素の高さを指定することができるプロパティ

## widthプロパティ
HTML要素の幅を指定することができるプロパティ

```css
.hoge {
  height: 150px;
  width: 150px;
}
```

## background-colorプロパティ
背景色を指定することができるプロパティ

```css
.hoge {
  background-color: lightgreen;
}
```

## list-styleプロパティ
リストのスタイルを変更することができるプロパティ

| 値 | 装飾結果 |
| ---- | ---- |
| square | ■ |
| none | 黒点を表示しない |

```css
.list-1{
  list-style: square;
}

.list-2{
  list-style: none;
}
```

[サンプルコード](https://github.com/likapantrip/html_css)の`css/list-style.html`を参照

## displayプロパティ
要素の種類(ブロックレベル要素、インライン要素)を変更することができるプロパティ

| 値との組み合わせ | 装飾結果 |
| ---- | ---- |
| display: block; | 指定された要素はブロックレベル要素として表示される |
| display: inline; | 指定された要素はインライン要素として表示される |
| display: inline-block; | 指定された要素はインライン要素とブロックレベル要素の特性を併せ持つ |
| display: flex; | 指定された要素の子要素は横並びになる |
| display: none; | 指定された要素は非表示になる |

### Flexbox
親要素に`display: flex;`を付与することで、子要素の並び順や要素同士の幅を詳細に決める調整方法の総称

### justify-contentプロパティ
`display: flex;`と併せて設定し、子要素における主軸方向(横並び)の配置調整ができるプロパティ
```css
/* 左寄せ(初期値と同じ) */
.justify-content-1{
  display: flex;
  justify-content: flex-start;
}

/* 右寄せ */
.justify-content-2{
  display: flex;
  justify-content: flex-end;
}

/* 中央寄せ */
.justify-content-3{
  display: flex;
  justify-content: center;
}

/* 両端が左右に寄り、等間隔 */
.justify-content-4{
  display: flex;
  justify-content: space-between;
}

/* 両端が左右に寄り、等間隔。両端の余白:要素間余白=1:2 */
.justify-content-5{
  display: flex;
  justify-content: space-around;
}
```

### align-itemsプロパティ
`display: flex;`と併せて設定し、子要素における垂直方向(縦並び)の配置調整ができるプロパティ

```css
/* 上揃え(初期値と同じ) */
.align-items-1{
  display: flex;
  align-items: flex-start;
}

/* 下揃え */
.align-items-2{
  display: flex;
  align-items: flex-end;
}

/* 中央揃え */
.align-items-3{
  display: flex;
  align-items: center;
}
```

### flex-directionプロパティ
`display: flex;`と併せて設定し、子要素の主軸方向や並び順を変更するプロパティ

```css
/* 左から右に並べる(初期値と同じ) */
.flex-direction-1{
  display: flex;
  flex-direction: row;
}

/* 右から左に並べる(並び順を変更) */
.flex-direction-2{
  display: flex;
  flex-direction: row-reverse;
}

/* 上から下に並べる(軸の方向を変更) */
.flex-direction-3{
  display: flex;
  flex-direction: column;
}

/* 下から上に並べる(軸の方向と並び順を変更) */
.flex-direction-4{
  display: flex;
  flex-direction: column-reverse;
}
```

[サンプルコード](https://github.com/likapantrip/html_css)の`css/index_display_flex.html`を参照

### display:block;
- インライン要素をブロックレベル要素に変換できる
- 縦に並べる事ができる

```css
.display-block {
  display: block;
}
```

[サンプルコード](https://github.com/likapantrip/html_css)の`css/index_display_block.html`を参照

## borderプロパティ
要素の境界線の幅や色を変更できるプロパティ

```css
.border-1 {
  border: 1px solid black;
}

.border-2 {
  border: 5px double red;
}
```

[サンプルコード](https://github.com/likapantrip/html_css)の`css/index_border.html`を参照

## border-styleプロパティ
要素の境界線のスタイルを指定できるプロパティ

```css
.hoge {
  border-style: solid;
}
```

## paddingプロパティ
要素の内側に余白を作成するプロパティ

```css
/* [上下左右]の内側の余白をまとめて10pxに指定 */
.padding-1 {
  padding: 10px;
}

/* [上下][左右]の内側の余白をそれぞれ10px・20pxに指定 */
.padding-2 {
  padding: 10px 20px;
}

/* [上][左右][下]の内側の余白をそれぞれ10px・20px・30pxに指定 */
.padding-3 {
  padding: 10px 20px 30px;
}

/* [上][右][下][左]の内側の余白をそれぞれ10px・20px・30px・40pxに指定 */
.padding-4 {
  padding: 10px 20px 30px 40px;
}
```

[サンプルコード](https://github.com/likapantrip/html_css)の`css/index_padding.html`を参照

## marginプロパティ
要素の外側に余白を作成するプロパティ

```css
/* [上下左右]の外側の余白をまとめて10pxに指定 */
.margin-1 {
  margin: 10px;
}

/* [上下][左右]の外側の余白をそれぞれ10px・20pxに指定 */
.margin-2 {
  margin: 10px 20px;
}

/* [上][左右][下]の外側の余白をそれぞれ10px・20px・30pxに指定 */
.margin-3 {
  margin: 10px 20px 30px;
}

/* [上][右][下][左]の外側の余白をそれぞれ10px・20px・30px・40pxに指定 */
.margin-4 {
  margin: 10px 20px 30px 40px;
}

/* 値ではなく'auto'を設定すると、外側の余白を均等に割り振る */
.margin-5 {
  margin: 10px auto;
}
```

- 下記を用いることで、各一方向のみの指定可能
    - margin-topプロパティ
    - margin-bottomプロパティ
    - margin-leftプロパティ
    - margin-rightプロパティ

[サンプルコード](https://github.com/likapantrip/html_css)の`css/index_margin.html`を参照

## positionプロパティ
指定した要素の配置方法を決めることができるプロパティ

| 記述方法 | 装飾結果 |
|---|---|
| position: relative; | 現在の位置を基準に相対的な位置を決める |
| position: absolute; | 特定の地点を基準に絶対的な位置を決める（デフォルトの基準はウィンドウ左上） |
| position: fixed; | 要素を指定した位置に固定する|

- positionプロパティを指定した要素に、基準（上、下、左、右）の距離を指定することができる
    - topプロパティ
    - bottomプロパティ
    - leftプロパティ
    - rightプロパティ

```css
/* 絶対位置(ブラウザの左上)を基準に変更 */
.position-1 {
  position: absolute;
  top: 0;
  left: 0;
}

/* 相対位置の基準に変更(子要素の基準が変わる) */
.position-2 {
  position: relative;
}
```
[サンプルコード](https://github.com/likapantrip/html_css)の`css/index_position-1.html` `css/index_position-2.html` `css/index_position-3.html` `css/index_position-4.html`を参照

## text-alignプロパティ
水平方向における要素の配置を指定するためのプロパティ
値には`left（左寄せ）` `right（右寄せ）` `center（中央寄せ）`などを設定できる

```css
.hoge {
  text-align: right;
}
```

## text-decorationプロパティ
テキストの装飾を指定するプロパティ

|| 装飾結果 |
|---|---|
| none | テキストの装飾を行わない（a要素の初期装飾を無効化できる） |
| underline | テキストに下線を引く |
| overline | テキストに上線を引く |
| line-through | テキストに取り消し線を引く |

## box-sizingプロパティ
要素のボックスサイズをどのように算出するか指定できるCSSプロパティ

```css
/* paddingやborderの設定を行っても、要素の大きさはwidthやheightで指定したサイズのまま変更されない */
.hoge {
  box-sizing: border-box;
}
```

## overflowプロパティ
親要素の範囲から子要素がはみ出た時に、どのように表示するのかを設定するプロパティ

```css
/* 親要素からはみ出た子要素は、スクロールで表示される */
.hoge {
  overflow: scroll;
}
```
[サンプルコード](https://github.com/likapantrip/html_css)の`css/index_overflow.html`を参照

# まとめ(プロパティで使用する単位)
## px(ピクセル)
デジタル画面の最小の単位

```css
/* 文字サイズが50pxとなる */
.hoge {
  font-size: 50px;
}
```

## %(パーセント)
親要素のサイズを100%としたとき子要素のサイズを親要素に対して何%で設定するかを決められる

```css
/* 親要素がwidth100pxの場合、widthは50pxとなる */
.hoge {
  width: 50%;
}
```

## vh(ブイエイチ)
viewportの高さ（height）に対する割合のことを指す
1vhと指定した場合は、ブラウザで表示されている高さの1%になる

```css
/* ブラウザで表示されている高さが1000pxの場合、100pxとなる */
.hoge {
  height: 10vh;
}
```

## vw(ブイダブリュー)
viewportの幅（width）に対する割合のことを指す
1vwと指定した場合は、ブラウザで表示されている幅の1%になる

```css
/* ブラウザで表示されている幅が1000pxの場合、100pxとなる */
.hoge {
  width: 10vw;
}
```

## clac
- 全体の高さや横幅から一定の値を差し引く
- `()`の中の計算結果が値となる

```css
/* ブラウザで表示されている幅が1000pxの場合、980pxとなる */
.hoge {
  width: calc(100% - 20px);
}
```

# ボックスモデル
ボックスは下記で構成されている
- content：ボックス自体
- padding：枠の内側にある余白
- border：ボックスの枠
- margin：枠の外側にある余白

```css
.content-boxmodel {
  margin: 10px;
  border: 5px solid black;
  padding: 20px;
}
```

[![Image from Gyazo](https://i.gyazo.com/2d95ff5061b5d14d379fccfac6d7a3a4.gif)](https://gyazo.com/2d95ff5061b5d14d379fccfac6d7a3a4)

※`padding` `border` `margin`は、ブロックレベル要素のみ設定でき、インライン要素には設定できない

[サンプルコード](https://github.com/likapantrip/html_css)の`css/index_boxmodel.html`を参照

# 参考記事
- [【CSS】CSSについて](https://qiita.com/likapantrip/items/b67d11333f8fda83be79)
- [【HTML】HTMLについて](https://qiita.com/likapantrip/items/394727fefa76a4c487d3)
- [【HTML】HTMLのbody要素について](https://qiita.com/likapantrip/items/5cd8625437aefe0614ef)