Inline Layout

Inline Layout
高津戸壮 @Takazudo

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

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

このスペースって何？

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

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>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; }

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

vertical‒align: text‒bottom

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

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

img {
vertical-align: middle;
}

img {
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;
}

li {
text-indent: -32px; /* 1行目だけ左に32pxずらす */
}
img {
width: 24px;
height: 24px;
}

li {
text-indent: -32px;
}
img {
width: 24px;
height: 24px;
margin: 0 8px 0 0; /* 32px確保 */
}

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

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

text-indentで戻した部分に
アイコンを置くと便利そう

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

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

ul {
list-style-type: none;
border: 3px solid #000;
}
li {
}

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

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

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

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

li {
}
li:before {
content: ''; width: 8px; height: 8px;
background: url(bullet.png) no-repeat 0 0;
}

li {
text-indent: -16px; /* 左へ */
}
li:before {
}

li {
text-indent: -16px;
}
li:before {
margin: -5px 8px -3px 0; /* マージン調整 */
}

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

<div>Hello! Hello! Hello!</div>

.box {
}
<div>
Hello!
<div class="box">...</div>
Hello!
</div>

<div>
Hello!
Hello!
</div>

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

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

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

display:tableやfloatを使うよりも
良いケースは色々ある

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

CSS再入門 ‒ inline layout 1

ありがとう
ございました

Inline Layout

More Related Content

Inline Layout