TechAcademyが無料公開している「HTML・CSS入門講座」を受講する～CSS第7回～

# アジェンダ
* 背景を表示する
* 背景の表示方法を指定する
* 実践

# 背景を表示する
## background-color
背景の色を指定する。指定方法は以下の通り

```
background-color: 色;
```
値は色(rgb()、16進数、色名)を指定する。

## background-image
背景の画像を指定する。指定方法は以下の通り。

```
background-image: url;
```
urlはurl()を用いて指定する。

# 背景の表示方法を指定する
## background-repeat
背景の繰り返し表示を指定する。指定方法は以下の通り。

```
background-repeat: 値;
```
値は単語で指定する。単語は以下のようなものがある。

<dl>
  <dt>no-repeat</dt>
  <dd>繰り返さない</dd>
  <dt>repeat</dt>
  <dd>縦横両方繰り返す</dd>
  <dt>repeat-x</dt>
  <dd>横方向のみ繰り返す</dd>
  <dt>repeat-y</dt>
  <dd>縦方向のみ繰り返す</dd>
</dl>

## background-position
背景の表示開始位置を指定する。指定方法は以下の通り。

```
background-position: 横位置 縦位置;
```
位置は単語、数値のどちらでも指定できる。
単語は以下のようなものがある。

<dl>
  <dt>center</dt>
  <dd>中央から表示する</dd>
  <dt>right</dt>
  <dd>右端から表示する</dd>
  <dt>left</dt>
  <dd>左端から表示する</dd>
  <dt>top</dt>
  <dd>上端から表示する</dd>
  <dt>bottom</dt>
  <dd>下端から表示する</dd>
</dl>

数値は、要素の左上を基準として、指定した位置に表示される。

## background-attachiment
画面をスクロールした際の背景の動きを指定する。指定方法は以下の通り。

```
background-attachiment: 値;
```
値は単語で指定する。単語は以下のようなものがある。

<dl>
  <dt>fixed</dt>
  <dd>背景を固定し、スクロールしても動かない</dd>
  <dt>scroll</dt>
  <dd>スクロールに合わせて背景もスクロールする</dd>
  <dt>loacl</dt>
  <dd>その要素にあわせて移動、スクロールする</dd>
</dl>

## background-size
背景のサイズを指定する。指定方法は以下の通り。

```
background-size: 値;
```
値は単語で指定する。単語は以下のようなものがある。
<dl>
  <dt>contain</dt>
  <dd>縦横比を維持した状態で、画像全体が背景領域に収まるように拡大縮小して表示する</dd>
  <dt>cover</dt>
  <dd>縦横比を維持した状態で、背景領域を覆うように拡大縮小して表示する</dd>
</dl>

## background-clip
背景をどの領域まで表示するかを指定する。指定方法は以下の通り。

```
background-clip: 値;
```
値は単語で指定する。単語は以下のようなものがある。

<dl>
  <dt>border-box</dt>
  <dd>ボーダー領域まで表示させる</dd>
  <dt>padding-box</dt>
  <dd>パディング領域まで表示させる</dd>
  <dt>content-box</dt>
  <dd>コンテント領域まで表示させる</dd>
</dl>

# 実践
上記内容を用いて、以下のindex.htmlとstyle.cssを作成した。

```html:index.html
<!DOCTYPE html>

<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="./style.css">
    <title>展示会</title>
  </head>
  <body>
    <div class="no-repeat">背景は要素に固定され、スクロールされる。</div>
    <div class="fixed">背景は完全に固定され、スクロールされない。</div>
    <div class="local">
      <p>
        背景は要素と連動している。
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      </p>
    </div>
  </body>
</html>
```

```css:style.css
div {
  width: 250px;
  height: 250px;
  padding: 20px;
  border-style: solid;
  border-width: 15px;
  border-color: silver;
  background-image: url('./SKMT.png');
  color: brown;
}

.no-repeat {
  background-repeat: no-repeat;
}

.fixed {
  background-repeat: repeat;
  background-attachment: fixed;
}

.local {
  background-repeat: repeat-y;
  background-attachment: local;
  overflow: scroll;
}
```

これをWebブラウザに表示させるとこんな感じ。
![index_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648214/1ab1f4c6-70c1-2bdb-5695-e18a8375001c.png)
ブラウザ全体をスクロールしたところ、上と下の背景はスクロールされたが、真ん中の背景はスクロールされない。
![index_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648214/fdf69961-ca29-4673-8b9d-85ca7f857d89.png)
下のボックスをスクロールしたところ、背景がスクロールされた。
![index_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648214/a2793b97-c5a9-4d08-9120-a9ef9d0d7104.png)

イマイチ画像ではわかりにくい。

# おわりに
今回は背景に関する内容だった。
背景をどのように表示させるかは、現代のおしゃれなWebページにおいてはとても重要だ・・・。

次回 >> [ここ](https://qiita.com/MakoMakoMakotsu/items/44d8a82e17f8feed0fa5)

## 参考
[7-1 背景の指定の基本（CSSの背景）](https://www.youtube.com/watch?v=7jhPKhns0xE&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=29)
[7-2 背景の指定の応用（CSSの背景）](https://www.youtube.com/watch?v=qLtkTxXXsR8&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=30)
[7-3 背景を操る（CSSの背景）](https://www.youtube.com/watch?v=RRMHAsu3Jns&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=31)