display:inline-blockこんな便利なものは是非とも使っていただきたい。

#はじめに
どうも、NISHIKIです。
初めてなんで軽く自己紹介します。
<br>

僕は１０月２１日からテックエキスパートに通いはじめて、
１２月２６日に卒業します。
NISHIKIはその間に１回だけ呼ばれたあだ名です。
<br>

一通りHTML、CSS、Ruby、Javascriptなど学び終わったので、
**今から学び始めるテックエキスパート生や
その他駆け出しのエンジニアになりたい人**向けに
わかるように色々書いていきます。
<br>

書いていく内容で、すでに卒業された方や、
受講途中の方でそんなん知っとるわっていう方も
いらっしゃるかと思いますので、
そういう方はトラックパッドを左にシャッとしてください。
<br>
今回は最終課題中に
**「そこdisplay:inline-block;使ったらいいのになー」**
って思うことがあったので
<br>
display:inline-blockの使い方について
書いていきます。
１２月２５日現在の６７期生、６８期生あたり向けです。


#displayプロパティとは、たそ
HTMLを学ばれてる方なら、
要素(h1要素とかp要素)というものがあるということは
ご存知かと思いますが、
<br>
その要素の表示形式を指定する際に
使用します。
<br>
つまりは、blockにしたり、
inlineにしたり、
flexにしたりするときに使うプロパティです。
よく使うのはこの辺りかなと思います。
<br>
例えば以下のようなコードがあったとします。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>display</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="main">
    <p>これは見出しです</p>
    <p>とか言っちゃって〜</p>
  </div>
</body>
</html>
```


```css:styles.css
body{
  margin:0;
  padding: 0;
}

.main{
  background-color: #333;
  padding: 20px;
  margin-top: 10px;
}

.main p{
  color: #fff;
  margin: 0;
}
```

<img width="919" alt="スクリーンショット 2019-12-25 14.49.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526015/97eab774-d1a7-ac34-6d0b-b708a15dcda1.png">


上記のmainクラス内の
ブロック要素である
p要素をサクッと横並びにしたいな〜
ってときは、

```css:styles.css
body{
  margin:0;
  padding: 0;
}

.main{
  background-color: #333;
  padding: 20px;
  margin-top: 10px;
}

.main p{
  color: #fff;
  margin: 0;
  display: inline;
}
```

上記のように
p要素のところに
display:inline;と
書くだけです。

<img width="830" alt="スクリーンショット 2019-12-25 14.52.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526015/d073ff4c-ded3-5219-d69c-747bb12f61f4.png">


こんな感じに横並びに変わります。

これと同じようにインライン要素に
display:block;と書くと
インライン要素のなのに縦に配置できる
みたいな感じです。
<br>
そのへんはp要素をspan要素に変えたりして
試してみてください。

#それで結局inline-blockいつ使うん？

それを説明するためにもうちょっとだけ
block要素とinline要素のwidthとheight
について説明します。
<br>
みなさんは、divタグ全てに
width: 100%;とつけたりしてないですか？
<br>
aタグにheight: 30px;して
高さ変わらんやんみたいな経験ないですか？？
<br>
僕はあります。
わけわからずコード書いてたときは
よくやってました。笑
<br>
実は、block要素、inline要素は
デフォルトで縦幅、横幅が設定されています。
<br>
block要素はデフォルトで
widthは**親要素の幅いっぱい**、 
heightは**コンテンツの高さ**になります。


上記の例の背景をつけると
こんな感じです。

[![Image from Gyazo](https://i.gyazo.com/77f2b3f3d20da5c73cad0b62654b3397.png)](https://gyazo.com/77f2b3f3d20da5c73cad0b62654b3397)
<br>
inline要素は
widthは**コンテンツの幅**、 
heightは**コンテンツの高さ**になります。

[![Image from Gyazo](https://i.gyazo.com/725667cc002e694947611a1d67fca33b.png)](https://gyazo.com/725667cc002e694947611a1d67fca33b)


そして**block要素は
heightとwidthの指定ができるのに対し、
inline要素はheightとwidthの指定ができません**。


上記の例でいくと、
p要素にheightを100px、
widthを150px指定すると、

[![Image from Gyazo](https://i.gyazo.com/e8b876cd4975cd8f6f12e447b963f21e.png)](https://gyazo.com/e8b876cd4975cd8f6f12e447b963f21e)

みたいな感じになります。
でも、p要素をインライン要素のspan要素に
変えるだけで、widthとheight設定してるのに

[![Image from Gyazo](https://i.gyazo.com/725667cc002e694947611a1d67fca33b.png)](https://gyazo.com/725667cc002e694947611a1d67fca33b)

になります。
span要素に変えずに、p要素のままで
display:inline；としても同じ結果です。

#だから、inline-blockはいつ使うん？

お待たせしました。
inline-blockの説明からすると、
両方のいいとこ取りみたいなものです。
<br>
横並びにできつつ、縦横の
サイズが指定できるというものです。
<br>
使いどころでいうと、
こいつインライン要素やけどborderつけて
もっと縦幅伸ばしたいなってときとか
<br>
p要素を横並びさせたいなあ
ってときとかに僕は使っています。
<br>
使いどころがあってるかは
わからないです。笑
<br>
だから上の例でいくと、
p要素にdisplay:inline-block;を
書いてあげると、

[![Image from Gyazo](https://i.gyazo.com/428dc9bb7bdd7b25186d9d99e95f72b1.png)](https://gyazo.com/428dc9bb7bdd7b25186d9d99e95f72b1)

横並びのまま縦横のサイズを
指定してあげることができます。
<br>

使いどころを知ってからは
へービーユーザーですね。笑
<br>
便利なんでみなさん使ってみてください。
最後まで読んでいただきありがとうございました。