HTML・CSS よく使うスタイル設定

# 要素の中央揃え

場合分けをして、きちんと使用するようにしましょう。
中央揃えにしたい要素に注目した場合、
- ブロック要素だったら、幅を設定したうえで`margin:0`を使用する。
- テキストや、画像などのインラインボックス要素だったらそれを囲っているブロック要素に`text-algin:center`をつける。

## `margin:0`
- ブロック要素のみ有効
- ブロック要素にさらに幅が設定されて、横方向に余白ができた時に左右の`auto`キーワードを有効にすることによって要素自体が中央揃えになる
```CSS
margin: 0 auto;
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627033/778b2d24-f641-49cb-9f1e-6c9e3a74beb3.png)

例を見ていきましょう。

1:`<section>`はブロックレベル要素なので、デフォルトでは親（`<body>`など）の幅いっぱいに広がろうとします。
2:`width: 400px;`によって、`<section>`の幅が強制的に`400px`になります。これにより、親要素の幅から`400px`を引いた分の「余り」のスペースが生まれます。
3:`margin: 0 auto;`によって、その「余り」のスペースが `<section>`の左右の`margin`に均等に分配されます。

```HTML
<section>
        <img src="work-1.png" alt="" width="400" height="240" />
        <h3>すごいゲーム1</h3>
        <p>すごいゲームです。</p>
</section>
```

```CSS
section {
  width: 400px;
  margin: 0 auto;
}
```

## `text-align:center`
- ブロック要素のみ有効
- ブロック要素の中にあるテキストや、画像などのインラインボックスが中央揃えになる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627033/93423e60-a0bd-4f1e-b032-18e544349154.png)

:::note info
下記のポイントを最低限おさえましょう。
- `margin: 0 auto` も `text-align: center` もブロックボックスにつける
- `margin: 0 auto` は そのブロックボックス自体を 中央揃えにする
- `text-align: center` は そのブロックボックスのなかにあるテキストや画像を 中央揃えにする
:::

# 余白の付け方
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627033/dd080fe6-4c8e-45c8-8f0f-06803a9727d1.png)

- 余白のサイズですが、Web デザインでは 16px の倍数が良く使われる

# 色味設定
## `hsl()`
色を 「色相（`Hue`）・彩度（`Saturation`）・明度（`Lightness`）」 で指定する方法です。
```CSS
hsl(色相, 彩度%, 明度%)
```
- 色相：0〜360度の円。色の種類を決める（赤〜緑〜青など）
- 彩度：色の鮮やかさ（0%はグレー、100%でハッキリ）
- 明度：明るさ（0%は黒、100%は白）


# 画像の縦横比を保つ`width`に応じた`height`の設定
```CSS
  width: 100%;
  height: auto;
```
- `height: auto;` は「画像の縦横比を保ちながら、`width`の値に合わせて高さを自動で計算する」というブラウザへの指示です。

## フレックスアイテムとの組み合わせ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627033/48fb8b78-1f8e-43a2-a948-d2be1dc7a5cf.png)
この`width/height`の設定は上記の画像のように、画像と説明を等幅に配置したい時、よくフレックスアイテムと組み合わせて使用します。

```HTML
<section class="product">
<!-- フレックスアイテム1 -->
  <div>
    <h2>すごい家具</h2>
    <p>
      すごい家具です。
    </p>
  </div>
<!-- フレックスアイテム2 -->
  <div>
    <img src="product-1.png" width="400" height="400" alt="すごい家具" />
  </div>
</section>
```
- フレックスコンテナのなかに、2つの`div`要素があるとします。

- 等幅に配置したい時、下記のようにCSS設定をします。
```CSS
.product div {
  flex: 1; 
}

.product img {
  width: 100%;
  height: auto; 
}
```
- `{ flex: 1; }`で`div`それぞれ等幅に配置します。
- 上記の設定により、画像が入っている2つ目のdivの幅が、親の利用可能なスペースの半分に設定されました。
    - 次に、このdivの中にある`<img>`要素に `width: 100%;`が適用されます。
これは「親要素（この場合は画像を囲むdiv）の幅いっぱいに広がりなさい」という意味です。
つまり、画像は、`flex: 1;`で幅が決まったそのdivの幅にぴったりと合わせられます。
    - `height: auto;`があるため、画像は元の縦横比を保ったまま、divの幅に合わせて高さが自動調整されます。

# コンテンツの最大値設定
- 画面が広すぎても、コンテンツが横に無限に伸びて読みにくくなるのを防ぐため、最大値を設定することが一般的です。
- 要素の親要素としてラップされることが一般的です。

```CSS
max-width: 800px;
margin: 0 auto;
width: calc(100% - 32px);
box-sizing: border-box;
```
##  `max-width: 800px;`
- 「この要素の幅は、どんなに広くても`800px`までにする」という指示です。
- 一般的に`max-width`で指定するのは`px`指定が多いです。
    - もし `max-width: 80%;` のような指定をした場合、その要素の最終的な幅は、親要素の幅によって常に変動します。これは、多くの場合「最大値は特定の絶対的なピクセル値にしたい」という意図とズレる可能性があります。

## `width: calc(100% - 32px);` 
- 「この要素の幅は、親要素（通常は画面全体）の幅から32ピクセルを引いた値にする」という指示です。
- 左右の余白をあけるために、使用されることが多いです。
- 下記のようにpaddingでも設定されることがあります。
```CSS
padding: 0 20px;
```

## `margin: 0 auto;` 
- 要素を水平方向の中央に配置するという指示です。

## `box-sizing: border-box;`
- 「要素の`width`と`height`の計算に、`padding`と`border`も含める」という指示です。


# リセットCSS
## body
`margin: 8px;`が初期値として設定されている。
そのため、`margin: 0;` を設定。

## h1,h2,h3,pなど
上下に`margin: 8px`が設定されている。
そのため、`margin: 0;` を設定。

## img

```CSS
verticla-algin: bottom;
width: 100%;     
max-width: 100%;  
height: auto; 
/* width・max-widthは例外あり。後述で解説。 */
```
上記を設定しておきましょう。

### 1.`verticla-algin: bottom;`
画像を設定するときに起こりうる問題として、インライン要素ではテキストのベースラインに沿って配置されるためしっぽとして下に余白が設定されています。
解決するために、`verticla-algin: bottom;`というような、baselineを下に合わせ余白をなくす設定をします。

### 2.`width`の設定
下記のどちらかを設定しておきましょう。
- `width: 100%;`+ `max-width: 100%;`
- `max-width: 任意の数字;`

#### `width: 100%;`+ `max-width: 100%;`
- `width: 100%;`と設定しておくことで、親コンテンツから画像がはみ出すのを防ぐことができます。
そして、ビューポート以上に画像幅が伸縮することはありません。

- `max-width: 100%;`と設定しておくことで、画像が元のサイズより大きくならないように伸縮してくれます。

#### `max-width: 任意の数字;`
他のグループ画像よりやや小さく見せたい、または特定のデザイン上のサイズ制限があるときに設定しておきましょう。

## インライン要素をテキスト系のブロック要素で囲った時に発生する余白を削除する
インライン要素をブロック要素で囲んでいるときなどに、画像の上下などに余白ができることがあります。
これは、テキストが設定されていなくても、ブロック要素はテキストのフォントサイズ分の余白を空けようとしてしまうからです。
そのような時は、`font-size: 0;`と設定し、テキストの行の高さをなくすことで解決できます。

- `h1`でlogo画像を表示させる時
```HTML
<h1 class="logo">
    <a href="index.html">
        <img src="img/logo.svg" alt="logo" />
    </a>
</h1>
```

```CSS
header .logo {
  font-size: 0;
}
```

## リスト表示をリセット

リストには、下記のデフォルトスタイルがあります。
- `ul`の上下に`margin`
- 左側に `padding` 
- li 要素の先頭に、箇条書きリストに見えるように黒丸が付く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627033/6b710212-9a98-4e15-83df-d757a89dfdd9.png)

上記をリセットするCSSは、下記の設定です。
- `list-style`は継承できるので、すべて`ul`に設定することが多いです。
```CSS
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
```

## 見出し（`h1`など）太字解除
```CSS
font-weight: normal;
```

## リンク関連
### リンク下線削除
```CSS
text-decoration: none;
```

### リンク文字色変更
```CSS
color: 任意のカラー;
```
または
```CSS
color: inherit;
```
- ブラウザは、`<a>`タグに対して「`color: blue;`」のようなスタイルを適用しています。
- `color: inherit;`を指定することで、このブラウザのデフォルトスタイルよりも優先され、リンクが親要素の文字色を継承するようになります。

# 必ず設定しておくCSS
```CSS
/* common */

body {
  font-family: 'YuGothic', 'Yu Gothic', sans-serif;
  margin: 0;
  background-color: #fdf8f8;
  color: #333;
  font-size: 100%;
}

h1 {
  margin: 0;
}

h2 {
  margin: 0;
}

p {
  margin: 0;
}

img {
  width: 100%; 
  max-width: 100%;
  height: auto; 
  vertical-align: bottom;
}

a {
  display: block;
}

a:hover {
  opacity: 0.7;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
}

```

- `img`の大きさを変更したい場合は、`max-width`の指定を上書きするとよいです。

:::note info
LP制作では必ず、
**各要素にも`width`か`max-width`をつける癖をつけましょう。**
:::

# 内側の余白開け
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627033/17ea8a0f-c5e0-42ea-85a5-caace2c4a098.png)

- 画像のように、背景色を画面幅いっぱいに広げ、中にボックスを配置するデザインをしたい時があります。
- そのような時は下記のコードを参照しましょう。

```HTML
<section class="online-store">
      <div class="box">
        <h2 class="title">HOW TO CHOOSE</h2>
        <a class="link" href="index.html">ONLINE STORE</a>
      </div>
</section>
```

```CSS
  .online-store {
    /* 背景画像は常に幅いっぱいに指定*/
    width: 100%;
    /* 高さはauto */
    height: auto;
    /* 内側に余白を見せるため、padding設定 */
    padding: 20px;
    /* paddingは通常widthに計算されないのではみ出してしまうが、paddingまで入れることで防ぐ */
    box-sizing: border-box;
  }
```

# `clip-path`
要素の表示領域を任意の図形に切り抜くことができる機能です。
写真や画像を四角形だけでなく、円形や多角形、あるいはもっと複雑な形に切り抜いて表示したい場合に非常に便利です。

```CSS
#main {
    background-color: #ffed58;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); 
}
```
この例では、`#main`要素の背景（`background-color: #ffed58;`）が、指定された多角形の形で切り抜かれて表示されます。

- `(0 0)`: 左上
- `(100% 0)`: 右上
- `(100% 80%)`: 右下（高さの80%の位置）
- `(0 100%)`: 左下
この4点を結ぶことで、右下部分が斜めに切り上がったような下記の台形の形状が作成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627033/21a6f679-0ee1-4f3c-8e9e-63ac941c3a1f.png)