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

# アジェンダ
* 要素の回り込み
* 要素の配置
* 実践

# 要素の回り込み
## float
要素の回り込みを指定する場合、以下のように書く。

```
float: 値;
```
値は以下の単語で指定する。

<dl>
  <dt>right</dt>
  <dd>右へ回り込む</dd>
  <dt>left</dt>
  <dd>左へ回り込む</dd>
  <dt>none</dt>
  <dd>回り込みなし</dd>
</dl>

## clear
要素の周り込みの解除をする場合、以下のように書く。

```
clear: 値;
```
値は以下の単語で指定する。

<dl>
  <dt>right</dt>
  <dd>右への回り込みを解除する</dd>
  <dt>left</dt>
  <dd>左への回り込みを解除する</dd>
  <dt>both</dt>
  <dd>左右両方の周り込みを解除する</dd>
</dl>

clearを指定した要素以降は、floatを指定した要素による回り込みを解除する。

## ※注意※
float属性を指定した要素があるのに、clear属性を指定した要素が無い場合、float属性を指定した要素が親要素からはみ出てしまう(画像参照)。
![float.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648214/0210adbe-3a6e-b46c-c1b4-c9c3decf136d.png)

# 要素の配置
## position
要素の配置を指定する場合、以下のように書く。

```
position: 値;
```
値は以下の単語で指定する。

<dl>
  <dt>static</dt>
  <dd>配置方法を指定しない</dd>
  <dt>absolute</dt>
  <dd>絶対位置へ配置する</dd>
  <dt>relative</dt>
  <dd>相対位置へ配置する</dd>
  <dt>fixed</dt>
  <dd>絶対位置へ配置し、画面をスクロールしても移動しない</dd>
</dl>
※絶対位置 : static以外を指定した親要素の左上を基準とする位置。
※相対位置 : staticを指定した時に表示される位置を基準とする位置。

## top/bottom/right/left
要素の位置を指定する場合、以下のように書く。

```
# 上
top: 値;
# 下
bottom: 値;
# 左
left: 値;
# 右
right: 値;
```
値は数値で指定する。

## z-index
要素の重ね順を指定する場合、以下のように書く。

```
z-index: 値;
```
値は数値で指定する。
数値が大きいほど、上に表示される。

# 実践
上記の内容を用いて、以下の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="bar"></div>
    <h1>自己紹介</h1>
    <div class="profile">
      <img class="begin_float_left" src="./makoto.jpg" alt="上目遣いの天使">
      <h2>一言</h2>
      <p>
        私の名前はマコトです。天界からやってきた光の使者です。<br>
        私の使命は、この世に安寧をもたらすこと。その為には、どんな手段をも厭わない所存です。<br>
        皆様、私と一緒に安寧の世界を目指しましょう。
      </p>
      <h2 class="end_float">プロフィール</h2>
      <dl>
        <dt>名前</dt>
        <dd>マコト</dd>
        <dt>年齢</dt>
        <dd>秘密</dd>
        <dt>出身</dt>
        <dd>天界</dd>
        <dt>武器</dt>
        <dd>フレイル</dd>
      </dl>
    </div>
  </body>
</html>
```

```css:style.css
img {
  width: 175px;
  height: 175px;
  margin: 15px;
}

div {
  padding: 10px;
}

dt {
  font-weight: bold;
}

.profile {
  background-color: yellowgreen;
}

.bar {
  /* ページ上部に固定する. */
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: turquoise;
  width: 100%;
  height: 20px;
}

.bar + * {
  /* 固定した要素に重なるので、マージンを指定する. */
  margin-top: 50px;
}

.begin_float_left {
  float: left;
}

.end_float {
  clear: both;
}
```
これをWebブラウザに表示させるとこんな感じ。
![index.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648214/143b85bf-3d1f-1ccd-8ab5-eb2fd5374300.png)

画面を小さくしてスクロールしても、画面上部のバーは固定表示される。
![index_scroll.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648214/cc7d0490-4a97-8640-7c7a-4dae59aa03e3.png)

# おわりに
今回は、要素の配置についての内容だった。
少し凝ったことが表現できるようになって楽しい。

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

## 参考
[6-1 floatプロパティ（CSSのボックスの配置）](https://www.youtube.com/watch?v=NETNr7jMhJA&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=26)
[6-2 positionプロパティ（CSSのボックスの配置）](https://www.youtube.com/watch?v=BcDWt06DZIs&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=27)
[6-3 z-index（CSSのボックスの配置）](https://www.youtube.com/watch?v=frbHpXRJYEg&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=28)