Inline Layout
高津戸壮 @Takazudo
自己紹介
- 高津戸壮 (たかつど たけし)
- 株式会社ピクセルグリッド
- フロントエンドエンジニア
- @Takazudo
今日話すこと
- font-size
- line-height
- vertical-align
- inline-block
<div><img></div>
<div><img></div>
img { vertical-align: top; }
このスペースって何？
うまく位置揃わない
今日のメニュー
- 画像下部の余白の謎
- アイコン画像の縦位置調整
- アイコンを飛び出させる
- チェックボックスやラジオボタンの配置
- リストのポッチ
- カラムレイアウト
1. 画像下部の
余白の謎
<p><span>The quick brown...</span></p>p {
font-size: 16px;
line-height: 16px;
}
span {
background: pink;
}
p {
font-size: 16px;
line-height: 24px;
}
p {
font-size: 16px;
line-height: 24px;
}
<p>The <b>quick</b> <em>brown</em> <i>fox</i> jumps...</p>
<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; }
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; }
img.A { vertical-align: top; }
img.B { vertical-align: bottom; }
img.C { vertical-align: text-top; }
img.D { vertical-align: text-bottom; }
img.E { vertical-align: baseline; }
img.F { vertical-align: middle; }
img.G { vertical-align: 5px; }
img.H { vertical-align: central; }vertical-align: top
vertical-align: bottom
vertical-align: text-top
+line-height: 1
※leading部分がなくなるから
vertical-align: text-bottom
vertical-align: baseline
vertical-align: middle
vertical-align: 10px
ちょっとまとめ
vertical-alignの値により色々スペースができる
2. アイコン画像の
縦位置調整
<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>vertical-align: top
vertical-align: bottom
vertical-align: text-top
vertical-align: text-bottom
vertical-align: baseline
vertical-align: 4px
vertical-align: -4px
vertical-align: middle
img {
vertical-align: middle;
}微調整の例
img {
vertical-align: middle;
position: relative;
top: -0.1em;
}ちょっとまとめ
- とりあえず
middleベースがいいんじゃない？ - アイコンのサイズとか決めちゃうと楽
3. アイコンを
飛び出させる
<ul>
<li><img>彼は背後に...</li>
<li><img>それはあまり...</li>
</ul>
li {
padding: 0 0 10px 32px;
}
img {
width: 24px;
height: 24px;
vertical-align: middle;
}
li {
padding: 0 0 10px 32px;
text-indent: -32px; /* 1行目だけ左に32pxずらす */
}
img {
width: 24px;
height: 24px;
vertical-align: middle;
}
li {
padding: 0 0 10px 32px;
text-indent: -32px;
}
img {
width: 24px;
height: 24px;
vertical-align: middle;
margin: 0 8px 0 0; /* 32px確保 */
}
li {
padding: 0 0 10px 32px;
text-indent: -32px;
}
img {
width: 24px;
height: 24px;
vertical-align: middle;
margin: -14px 8px -10px 0; /* 32px確保 + 上下の高さ殺し */
}
margin-top: -14px;
margin-bottom: -10px;ちょっとまとめ
text-indentで戻した部分に
アイコンを置くと便利そう
4. チェックボックス
やラジオボタンの配置
- 大きさ微妙に違う
- 高さ幅はブラウザによって違う
インラインブロックが利用できそう
<ul>
<li><label><span><input type="radio"></span>彼は...</label></li>
<li><label><span><input type="checkbox"></span>それは...</label></li>
</ul>
ul {
list-style-type: none;
border: 3px solid #000;
}
li {
padding: 0 0 10px 25px;
}
ul {
list-style-type: none;
border: 3px solid #000;
}
li {
padding: 0 0 10px 25px;
text-indent: -25px;
}
span {
display: inline-block;
width: 20px;
margin: -17px 5px -13px 0;
vertical-align: middle;
background: red;
}
input {
display: block;
margin: 0 auto;
}
インラインブロック
display: inline-block- 中にブロックレベルの要素を入れられる
- 高さと幅指定しなければ自身のサイズは中身次第
- 外からは
<img>のようなインライン
置換要素のようにレイアウトされる - インライン要素と違って
矩形領域を維持し行をまたがない
なかなか柔軟に使えるので色々活躍
5. リストのポッチ
<ul>
<li>彼は背後に...</li>
<li>それはあまり...</li>
</ul>li {
padding: 0 0 10px 16px;
background: url(bullet.png) no-repeat 0 .45em;
}
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;
}
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;
}
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; /* マージン調整 */
}
ちょっとまとめ
擬似要素と組み合わせると<img>
突っ込んだみたいに扱えて便利
6. カラムレイアウト
<div>Hello! Hello! Hello!</div>
.box {
display: inline-block;
vertical-align: middle;
}<div>
Hello!
<div class="box">...</div>
Hello!
</div>
<div>
Hello!
<div class="box">...</div>
<div class="box">...</div>
Hello!
</div>
<div>
<div class="box">...</div>
<div class="box">...</div>
<div class="box">...</div>
</div>
<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%;
}
<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%;
}
IE7以下
.foo {
display: inline-block;
*display: inline;
*zoom: 1;
}ちょっとまとめ
display:tableやfloatを使うよりも
良いケースは色々ある
まとめ
- ミクロなレイアウト制御から
マクロなレイアウト制御まで - インラインのレイアウトの
仕組みを把握すればいろいろ捗る display:tableとインラインブロックを
駆使して頑張りたい所存
ありがとう
ございました
Inline Layout
高津戸壮 @Takazudo