“なんとなく”で使わない
inline-block
2016-05-20 pixiv社内勉強会 LT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/1694843/hako_new_trans-01.png)
@hakatashi
inline-block
ちゃんと理解してますか?
“なんとなく”で
使ってませんか???
たとえばこういう案件
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2609655/graph01.png)
display: inline-block;
「おっこれ
でいけんじゃん」
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2607501/55e85b074ac65.jpg)
正しく理解して
正しく使おう
第1章
inline-blockとは
は、ひとことで言うと
inline要素と
block要素の中間
display: inline-block;
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2609873/2016-05-14_04_58_12-MouseGestureL.ahk.png)
display: inline-block; は
inlineレベルの要素を形成する
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2613615/2016-05-15_21_29_01-CSS_Display_Module_Level_3.png)
理解してないとハマる
事例1: inline-blockによる
要素の横並び
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.item {
display: inline-block;
width: 80px;
height: 60px;
background: darkcyan;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2613706/2016-05-15_21_59_20-cmd.png)
何pxかの隙間ができる
[CSS 横並び]とかでググると
このinline-blockを使った方法が出てくる
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2613725/2016-05-15_21_43_22-_CSS_______________inline-block_______________________.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2613728/2016-05-15_21_45_31-____________________-_Qiita.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2613731/2016-05-15_21_45_43-_CSS_ul_ol______________float_____display_inline-block________delaymania.png)
謎じゃない!!!!!!!!
は、ひとことで言うと
display: inline-block;
「でかい1文字」
これは……
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
こう書いてるのと同じ
<div class="wrap">
A
A
A
A
</div>
<div class="wrap">
A
A
A
A
</div>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2613835/2016-05-15_22_49_14-cmd.png)
HTML上の文字間の空白文字や改行は、
表示される際にスペースひとつに置き換えられる
この挙動は white-space 属性で制御される
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2613863/2016-05-15_23_00_06-cmd.png)
さっきのは、仮想的にこういう状態
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2613706/2016-05-15_21_59_20-cmd.png)
つまり、この「謎の隙間」はスペース文字1つぶんの空白
文字サイズやフォントによって幅が左右される!!!
<div class="wrap">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
.wrap {
width: 350px;
padding: 5px;
text-align: justify;
text-align-last: justify;
background: skyblue;
.child {
display: inline-block;
height: 50px;
vertical-align: bottom;
background: darkcyan;
&:nth-child(3n+1) {width: 60px;}
&:nth-child(3n+2) {width: 80px;}
&:nth-child(3n+3) {width: 30px;}
}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2614981/2016-05-16_03_34_32-cmd.png)
「文字」なので
text-align: justify; で
均等割り付けもできる
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.wrap {
white-space: pre-line;
}
.item {
display: inline-block;
width: 80px;
height: 60px;
background: darkcyan;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2613880/2016-05-15_23_05_47-cmd.png)
white-spaceの値を変更すると
横に並びすらしなくなる
要点 1
inline-blockは
「でかい1文字」
第2章
vertical-alignとは
事例2: inline-blockの
折り返し
<div class="wrap">
<div class="small"></div>
<div class="big"></div>
<div class="small"></div>
</div>
.wrap {
padding: 5px;
width: 300px;
font-size: 0;
background: skyblue;
& > div {
display: inline-block;
width: 100px;
vertical-align: top;
}
.small {
height: 50px;
background: darkcyan;
}
.big {
height: 100px;
background: green;
}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2613999/2016-05-15_23_41_50-cmd.png)
横幅300pxの要素に
横幅100pxのinline-block要素が
3つ詰め込まれている
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2613999/2016-05-15_23_41_50-cmd.png)
これにもう1つ
.small を詰め込んだら
どこに来る?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2614050/2016-05-15_23_58_58-cmd.png)
ここです。
謎じゃない!!!!!!!!!!!!!!!
「文章」には
「流れ」が存在する
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2614078/graph02-01.png)
- 横方向に進み、
- 端まで来たら折り返して
次の行に向かう
この一連の「流れ」のことを、CSSでは
inline formatting context
と呼ぶ。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2614078/graph02-01.png)
inline要素と
block要素の違いは、
この inline formatting context の流れの中に
「存在するか」
「存在しないか」
の違いである。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2614124/graph03-01.png)
inline-blockは
inline要素なので、
inline formatting context の
中に存在する
図示するとこうなる
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2614202/graph04-02-01.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2614261/graph04-01.png)
それぞれのinline-blockは、
本当にただの文字だと思ったほうがいい。
inline-blockは「行」を形成し、
端まで行ってあふれたinline-blockは
折り返して次の行に進む。
要点 2
inline-blockは
「行」を形成する
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2614300/graph05-01.png)
この「行」内でのinline要素の
位置を決定するのが
vertical-align属性
なんでもかんでも
「縦方向に揃える」属性ではない
block要素に指定してもまったく無意味
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2614359/graph07-01.png)
要点 3
vertical-alignは
「行」内での位置を
決める
第3章
文字を含むinline-blockの挙動
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.wrap {
display: inline-block;
padding: 5px;
background: skyblue;
}
.item {
display: inline-block;
width: 100px;
height: 100px;
background: darkcyan;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2614399/2016-05-16_01_43_11-cmd.png)
inline-blockが空っぽなら
普通の横並びになる
<div class="wrap">
<div class="item"></div>
<div class="item">hogehoge</div>
<div class="item"></div>
</div>
テキストが入ると
どうなる?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2614418/2016-05-16_01_46_17-cmd.png)
!?!?!?!?!?
……謎じゃない!!
vertical-align属性の
初期値は、
vertical-align: baseline;
baselineとは、
アルファベットを記述する際の
「基準線」
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2614509/vertical-align01.gif)
テキストを含む要素では
最終行のbaselineが
その要素のbaselineとなる
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2614538/graph08-01.png)
baseline
テキストを含まない要素には
baselineは存在しない
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2614546/graph0802-01.png)
vertical-alignの仕様によると、
baseline
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.
※下線引用者
仮想的に要素の下端が
その要素のbaselineとなる
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2614568/graph08-03.png)
baseline
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2614587/2016-05-16_01_46_17-cmd-crop.png)
要素ごとのbaselineを揃えるとこうなる
キモい!!!
<div class="wrap">
<div class="item"></div>
<div class="item">hogehoge</div>
<div class="item"></div>
</div>
.wrap {
display: inline-block;
padding: 5px;
background: skyblue;
}
.item {
display: inline-block;
width: 100px;
height: 100px;
vertical-align: bottom;
background: darkcyan;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2614914/2016-05-16_03_19_22-cmd.png)
vertical-alignに
baseline以外の値を指定すると
ちゃんと横に並ぶ
要点 4
vertical-alignの
初期値は
すごくキモい
まとめ
- inline-blockは「でかい1文字」
- inline-blockは「行」を形成する
- vertical-alignは「行」内での位置を決める
- vertical-alignの初期値はすごくキモい
一番重要なこと
inline-blockでできることは
だいたいflexboxでできる
inline-blockが真価を発揮するのは
まさしく要素を「文字のように」扱いたいとき
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2617150/2016-05-16_17_10_48-xss.md.png)
Emojiの画像polyfillやiconなど
flexboxが使える21世紀において
レイアウト用途にinline-blockを
使用するべきではない
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/2617156/2016-05-16_17_15_55-MouseGestureL.ahk.png)
よいinline-blockで
よいCSSライフを
おわり
なんとなくで使わないinline-block
By Koki Takahashi
なんとなくで使わないinline-block
2016-05-20 pixiv社内勉強会 LT
- 2,874