html,cssのこつ

## こつ

3つのポイント

1.インライン要素、ブロック要素
2.グルーピング
3.float

## インライン要素ブロック要素

- タグで見るとブロック要素もインライン要素も、縦に並んでいる
- インライン要素は高さを持つことができない

```html
<!DOCTYPE html>
<html>
  <head>
    <title>hello</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h2>ブロック要素</h2>
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
    <h2>インライン要素</h2>
      <span>hello</span>
      <span>hello</span>
      <span>hello</span>
  </body>
</html>

```

### 表示結果

結果はブロック要素は縦に、インライン要素は横になる、
これらの特性を利用してレイアウトを作成していく

![スクリーンショット 2020-01-11 13.34.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286971/2e8b9e47-9f28-fc31-cf2d-f894b9b522eb.png)


## グルーピング


特定の部分だけに適応したいcssは普通にあるその場合にグルーピングの考え方ができると良い


- body要素の中にhtmlがただある状態

![スクリーンショット 2020-01-11 13.34.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286971/a8b14504-8524-6f6d-f24f-dc19e52e9210.png)

- グループ分けをしてみる

goup1のクラスがついたdiv要素で、くくってみる

```html
<!DOCTYPE html>
<html>
  <head>
    <title>hello</title>
    <meta charset="utf-8">
    <style>
      .group1{
        padding: 20px;
      }
    </style>
  </head>
  <body>
　 <div class="group1">
    <h2>ブロック要素</h2>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
   </div>
    <h2>インライン要素</h2>
      <span>hello</span>
      <span>hello</span>
      <span>hello</span>
  </body>
</html>
```

- 結果

group1のエリアだけにpadding適応される

![スクリーンショット 2020-01-11 13.44.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286971/c128b064-bd58-e102-2179-c96e945fa6e3.png)

- インライン要素も、ブロックの中に入れてあげる

```html

<!DOCTYPE html>
<html>
  <head>
    <title>hello</title>
    <meta charset="utf-8">
    <style>
      .group1{
        padding: 20px;
      }
    </style>
  </head>
  <body>
　 <div class="group1">
    <h2>ブロック要素</h2>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <h2>インライン要素</h2>
      <span>hello</span>
      <span>hello</span>
      <span>hello</span>
   </div>
    
  </body>
</html>

```

両方に適応された

![スクリーンショット 2020-01-11 13.49.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286971/19ab4547-b6e8-9696-2ec8-04eca94853e0.png)


## float

ブロック要素を横並びにできる。


```html
<!DOCTYPE html>
<html>
  <head>
    <title>hello</title>
    <meta charset="utf-8">
    <style>
      .group1{
        float: left;
      }
      .group2{
        float: left;
      }
    </style>
  </head>
  <body>
　 <div class="group1">
    <h2>ブロック要素</h2>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
   </div>
　 <div class="group2">
    <h2>インライン要素</h2>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
   </div>  
  </body>
</html>

```

横並びになった

![スクリーンショット 2020-01-11 13.55.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286971/7b9dc666-749d-df04-bc4e-727d4cb8a700.png)


- 問題


```html
<!DOCTYPE html>
<html>
  <head>
    <title>hello</title>
    <meta charset="utf-8">
    <style>
      .group1{
        float: left;
        background-color:red;
      }
      .group2{
        float: left;
        background-color: blue;
      }
      .group3{
        background-color: green;
      }
    
    </style>
  </head>
  <body>
　 <div class="group1">
    <h2>ブロック要素</h2>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
   </div>
　 <div class="group2">
    <h2>インライン要素</h2>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
   </div>  
   <div class="group3">
      <h2>インライン要素</h2>
      <span>hello</span>
      <span>hello</span>
      <span>hello</span>
     </div>  
  </body>
</html>

```

緑色の要素がしたに入り込む

![スクリーンショット 2020-01-11 13.59.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286971/2b5f8b6b-31e5-040d-dd21-628596ac68a9.png)

- 回り込みの解除

```html
<!DOCTYPE html>
<html>
  <head>
    <title>hello</title>
    <meta charset="utf-8">
    <style>
      .group1{
        float: left;
        background-color:red;
      }
      .group2{
        float: left;
        background-color: blue;
      }
      .group3{
        background-color: green;
        clear: both;
      }
    
    </style>
  </head>
```

結果

![スクリーンショット 2020-01-11 14.03.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286971/f2e71e34-2424-785d-1b96-fb59a0e69cae.png)