inline-blockの使い方

# 記事の前に

　webの勉強で、今はHTML,CSSを学習中。
　そのときは再現できても、
　学んだことをすぐ忘れがちなので、頭の中を整理し、まとめるため作成。
　あと、コメントアウトでの注釈多めです。
　自分のためだが、他の人にも、もしも役に立ったら。

# display: inline-block; を使う理由


1. display:flexでは対応しづらい古いIEなどで横並びさせたい時に使う。
  そうでないときはdisplay:flexが便利

2. floatだと、浮いたりするし、コードが複雑になるため、floatはほぼ使用しない。(経験的にfloatは、かなりかなり複雑、、、)

3floatは、画像の横に文章を回り込ませるときに使用のみ使用を考える。

参考

[CSSで要素を横並びにする方法のメリット・デメリットまとめ](https://webdesign-trends.net/entry/8328)

[float:leftやfloat:rightを使う時に注意する点とその対策について教えてください。](https://teratail.com/questions/109795)

# 1横並び基本　中央寄せ

```html:index.html
<div id="nav">
		<p>inline-blockで横並びにしたもの</p>
  　<ul>
　　   　<li >HOME</li>
　   　　<li>HTML</li>
　   　　<li>CSS</li>
  　</ul>
</div>
```

```css:style.css
@charset "utf-8";

p{text-align: center;}
/*文章を左右中央に揃えたいときは、
1その文章が含まれる要素、
2もしくはその親要素に対してtext-align:centerを指定  */

#nav ul {
  list-style-type: none;
  text-align:center; 
/*
	機能1 ブロックを中央に
	機能2　テキストを真ん中に*/
}

/* id="nav"の中のulの中のliに対してCSSを適用*/
@charset "utf-8";

p{text-align: center;}
/*文章を左右中央に揃えたいときは、
1その文章が含まれる要素、
2もしくはその親要素に対してtext-align:centerを指定  */

#nav ul {
  list-style-type: none;
  text-align:center;
/*
    機能1 ブロックを中央に
    機能2　テキストを真ん中に*/
}

/* id="nav"の中のulの中のliに対してCSSを適用*/
#nav ul li {

    display: inline-block;/*横並びになる、解除すると横並びでなくなる。*/
}

#nav ul li {
	width: 80px;
	padding: 10px 0;
	margin: 10px 0;
	vertical-align: middle;/*縦の表示位置も指定できる*/
	background: blue;
	color: #fff;
	font-size: 14px;
}


```
結果
![スクリーンショット 2019-10-24 0.13.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243378/5bdeae9b-1f77-8dae-9f77-d43fed8509b5.png)

コード参考
[【CSS】displayの使い方を総まとめ！inlineやblockの違いは？
](https://saruwakakun.com/html-css/basic/display)

# 2隙間をなくし、各ブロックをぴったりくっつける方法

1のコードに追加部分のみ記載

```css:style.css
#nav ul {

	font-size: 0;/* inline-block指定時に隙間をなくす*/
}

#nav ul li {

	vertical-align: bottom;/* 高さを揃える*/
}

#nav ul li {
	font-size: 14px;/* font-size0指定したため、　指定必要*/
}
```

上記のコードのそれぞれの意味については、[display: inline-block; と float:
](https://qiita.com/KKKeisuke/items/9dcc9db7467255f48900)で以下のように説明されています。

> display: inline-block; ←子要素に対して
vertical-align: top; または vertical-align: bottom; ←子要素に対して
font-size: 0; ←親要素に対して
※ 2によって高さまたはボトムを揃える。
※ 3によってinline-block指定時に生じる隙間をなくす。子要素にfont-size指定するのを忘れないように。



参考url
[display: inline-block; と float:
](https://qiita.com/KKKeisuke/items/9dcc9db7467255f48900)


header横並び

```html:index.html
	<div class="header">
    <h1>
        サイトタイトル
    </h1>
    <div class="nav">
      　<ul>
    　　   　<li><a href="#">リスト1</a></li>
    　   　　<li><a href="#">リスト2</a></li>
    　   　　<li><a href="#">リスト3</a></li>
      　</ul>
    </div>
     </div>
</body>
</html>

```

```css:style.css
@charset "utf-8";

.header{
  width: 960px;
  background-color: yellow;
}
h1{
  text-align: left;
  /* ブロック要素左寄せ */
  display: inline-block;
  vertical-align: bottom;
}

.nav{
  text-align: left;
  display: inline-block;
  vertical-align: bottom;
}

/* .nav ul{
  font-size: 0;
} */
/* 隙間を消したい時に使う */

.nav ul li{
  display: inline-block;
  vertical-align: bottom;
}

.nav ul li a{
  display: block;
  margin: 15px 30px 15px 0;
  font-size: 14px;
  font-weight: bold;
}

```
結果
<img width="966" alt="スクリーンショット 2019-11-09 12.19.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243378/9490af0d-137e-52d5-9d9b-14c977f4624d.png">