inline layout

127

Upload: takazudo

Post on 14-Jul-2015

3.781 views

Category:

Technology


3 download

TRANSCRIPT

Inline Layout高津戸壮 @Takazudo

自己紹介高津戸壮 (たかつど たけし)

フロントエンドエンジニア

株式会社ピクセルグリッド

@Takazudo

今日話すことfont‒sizeline‒heightvertical‒aligninline‒block

<div><img></div><div><img></div>

img { vertical-align: top; }

このスペースって何?

うまく位置揃わない

今日のメニュー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 { 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とインラインブロックを駆使して頑張りたい所存

CSS再入門 ‒  inline  layout 1

ありがとうございました