font-size, line-height, vertical-align, inline-block

1. Inline Layout
高津戸壮 @Takazudo

2. 自己紹介
高津戸壮 (たかつど たけし)
フロントエンドエンジニア
株式会社ピクセルグリッド
@Takazudo

3. 今日話すこと
font‒size
line‒height
vertical‒align
inline‒block

4. <div><img></div>
<div><img></div>

8. img { vertical-align: top; }

10. このスペースって何？

12. うまく位置揃わない

13. 今日のメニュー
1. 画像下部の余白の謎
2. アイコン画像の縦位置調整
3. アイコンを飛び出させる
4. チェックボックスやラジオボタンの配置
5. リストのポッチ
6. カラムレイアウト

14. 1. 画像下部の
余白の謎

15. <p><span>The quick brown...</span></p>
p {
font-size: 16px;
line-height: 16px;
}
span {
background: pink;
}

17. p {
font-size: 16px;
line-height: 24px;
}

20. p {
font-size: 16px;
line-height: 24px;
}

24. <p>The <b>quick</b> <em>brown</em> <i>fox</i> jumps...</p>

25. <p>The <b>quick</b> <em>brown</em> <i>fox</i> jumps...</p>
p { font-size: 12px; line-height: 18px; }
b { font-size: 20px; line-height: 30px; }
em { font-size: 30px; line-height: 40px; }
i { font-size: 40px; line-height: 50px; }

26. p { font-size: 12px; line-height: 18px; }
b { font-size: 20px; line-height: 30px; }
em { font-size: 30px; line-height: 40px; }
i { font-size: 40px; line-height: 50px; }

27. img.A { vertical-align: top; }
img.B { vertical-align: bottom; }

28. img.C { vertical-align: text-top; }
img.D { vertical-align: text-bottom; }

29. img.E { vertical-align: baseline; }
img.F { vertical-align: middle; }

30. img.G { vertical-align: 5px; }

31. img.H { vertical-align: central; }

32. vertical‒align: top

34. vertical‒align: bottom

36. vertical‒align: text‒top

38. +line‒height: 1
※leading部分がなくなるから

39. vertical‒align: text‒bottom

41. vertical‒align: baseline

43. vertical‒align: middle

45. vertical‒align: 10px

47. ちょっとまとめ
vertical-alignの値により色々スペースができる

48. 2. アイコン画像の
縦位置調整

51. <ul>
<li><img src="icon.png" width="10" alt=""> xAhy 鈴</li>
<li><img src="icon.png" width="20" alt=""> xAhy 鈴</li>
<li><img src="icon.png" width="30" alt=""> xAhy 鈴</li>
<li><img src="icon.png" width="40" alt=""> xAhy 鈴</li>
<li><img src="icon.png" width="50" alt=""> xAhy 鈴</li>
</ul>

52. vertical‒align: top

54. vertical‒align: bottom

56. vertical‒align: text‒top

58. vertical‒align: text‒bottom

60. vertical‒align: baseline

62. vertical‒align: 4px

64. vertical‒align: ‒4px

65. vertical‒align: middle

67. img {
vertical-align: middle;
}

68. 微調整の例

69. img {
vertical-align: middle;
position: relative;
top: -0.1em;
}

70. ちょっとまとめ
とりあえずmiddleベースがいいんじゃない？
アイコンのサイズとか決めちゃうと楽

72. 3. アイコンを
飛び出させる

73. <ul>
<li><img>彼は背後に...</li>
<li><img>それはあまり...</li>
</ul>

74. li {
padding: 0 0 10px 32px;
}
img {
width: 24px;
height: 24px;
vertical-align: middle;
}

75. li {
padding: 0 0 10px 32px;
text-indent: -32px; /* 1行目だけ左に32pxずらす */
}
img {
width: 24px;
height: 24px;
vertical-align: middle;
}

78. li {
padding: 0 0 10px 32px;
text-indent: -32px;
}
img {
width: 24px;
height: 24px;
vertical-align: middle;
margin: 0 8px 0 0; /* 32px確保 */
}

81. li {
padding: 0 0 10px 32px;
text-indent: -32px;
}
img {
width: 24px;
height: 24px;
vertical-align: middle;
margin: -14px 8px -10px 0; /* 32px確保 + 上下の高さ殺し */
}

82. margin-top: -14px;
margin-bottom: -10px;

83. ちょっとまとめ
text-indentで戻した部分に
アイコンを置くと便利そう

84. 4. チェックボックス
やラジオボタンの配置

86. 大きさ微妙に違う
高さ幅はブラウザによって違う
インラインブロックが利用できそう

87. <ul>
<li><label><span><input type="radio"></span>彼は...</label></li>
<li><label><span><input type="checkbox"></span>それは...</label></li>
</ul>

88. ul {
list-style-type: none;
border: 3px solid #000;
}
li {
padding: 0 0 10px 25px;
}

89. ul {
list-style-type: none;
border: 3px solid #000;
}
li {
padding: 0 0 10px 25px;
text-indent: -25px;
}

91. span {
display: inline-block;
width: 20px;
margin: -17px 5px -13px 0;
vertical-align: middle;
background: red;
}
input {
display: block;
margin: 0 auto;
}

93. インラインブロック
display: inline-block
中にブロックレベルの要素を入れられる
高さと幅指定しなければ自身のサイズは中身次第
外からは<img>のようなインライン
置換要素のようにレイアウトされる
インライン要素と違って
矩形領域を維持し行をまたがない
なかなか柔軟に使えるので色々活躍

94. 5. リストのポッチ

95. <ul>
<li>彼は背後に...</li>
<li>それはあまり...</li>
</ul>
li {
padding: 0 0 10px 16px;
background: url(bullet.png) no-repeat 0 .45em;
}

98. li {
padding: 0 0 10px 16px;
}
li:before {
content: ''; width: 8px; height: 8px;
display: inline-block;
background: url(bullet.png) no-repeat 0 0;
vertical-align: middle;
}

99. li {
padding: 0 0 10px 16px;
text-indent: -16px; /* 左へ */
}
li:before {
content: ''; width: 8px; height: 8px;
display: inline-block;
background: url(bullet.png) no-repeat 0 0;
vertical-align: middle;
}

101. li {
padding: 0 0 10px 16px;
text-indent: -16px;
}
li:before {
content: ''; width: 8px; height: 8px;
display: inline-block;
background: url(bullet.png) no-repeat 0 0;
vertical-align: middle;
margin: -5px 8px -3px 0; /* マージン調整 */
}

106. ちょっとまとめ
擬似要素と組み合わせると<img>
突っ込んだみたいに扱えて便利

107. 6. カラムレイアウト

108. <div>Hello! Hello! Hello!</div>

109. .box {
display: inline-block;
vertical-align: middle;
}
<div>
Hello!
<div class="box">...</div>
Hello!
</div>

110. <div>
Hello!
<div class="box">...</div>
<div class="box">...</div>
Hello!
</div>

111. <div>
<div class="box">...</div>
<div class="box">...</div>
<div class="box">...</div>
</div>

114. <div class="items">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>
.item {
float: left;
width: 25%;
}

117. <div class="items"><!--
--><div class="item">...</div><!--
--><div class="item">...</div><!--
--><div class="item">...</div><!--
--><div class="item">...</div><!--
...
--></div>
.item {
display: inline-block;
vertical-align: top;
width: 25%;
}

120. IE7以下.foo {
display: inline-block;
*display: inline;
*zoom: 1;
}

121. ちょっとまとめ
display:tableやfloatを使うよりも
良いケースは色々ある

122. まとめ

123. ミクロなレイアウト制御から
マクロなレイアウト制御まで
インラインのレイアウトの
仕組みを把握すればいろいろ捗る
display:tableとインラインブロックを
駆使して頑張りたい所存

126. CSS再入門 ‒ inline layout 1

127. ありがとう
ございました