自己紹介高津戸壮 (たかつど たけし)
フロントエンドエンジニア
株式会社ピクセルグリッド
@Takazudo
<p><span>The quick brown...</span></p>
p { font-size: 16px; line-height: 16px;}span { background: pink;}
<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; }
<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>
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確保 + 上下の高さ殺し */}
<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; 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>のようなインライン置換要素のようにレイアウトされる
インライン要素と違って
矩形領域を維持し行をまたがない
なかなか柔軟に使えるので色々活躍
<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; /* マージン調整 */}
.box { display: inline-block; vertical-align: middle;}
<div> Hello! <div class="box">...</div> Hello!</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%;}