画像を横並びにする時なぜか空く隙間。
その隙間を埋めてレイアウトする方法をいくつか紹介します。
CSSでのレイアウトで利用しやすいものをご利用ください。
【inline-block】で横並び
要素を横並びにする時よく使うのが「display:inline-block」。
でも「inline-block」で横並びにすると横に隙間ができる。
それを解消して横並びにできるCSSのご紹介。
下記のDEMOでは横並びにする要素を「li」にしましたが、これは「span」や「p」、「a」でも構いません。
横並びにする親要素に、「letter-spacing:-.4em;」「font-size:0;」を指定すると全ブラウザで無駄な隙間が消え、ぴったりと横並びにできます。
さらに横並びにする要素の幅は、「100% ÷ 4 = 25%」にして「display:inline-block;」にします。
DEMO
HTML
<ul class="demo1"> <li></li> <li></li> <li></li> <li></li> </ul>
CSS
.demo1 {
width: 100%;
height: 100px;
display: block;
letter-spacing: -.4em;
font-size: 0;
}
.demo1 li {
width: 25%;
height: 100%;
display: inline-block;
}
【inline】で横並び
「display: inline;」でも横並びにできるが、一つ欠点がある。
それは要素に高さがなくなってしまうことだ。
下のDEMOでは、「font」に高さと幅を持たせているから見えているが、要素の中に何もないといくら「height」や「padding」で高さを出そうとしても、高さは出なくなってしまう。
DEMO
- 1
- 2
- 3
- 4
HTML
<ul class="demo2"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>
.demo2 {
display: block;
letter-spacing: -.4em;
font-size: 0;
}
.demo2 li {
display: inline;
letter-spacing: normal;
font-size: 32px;
padding: 29px 10%;
}
【float】で横並び
全ての要素を「table」で組んでいたはるか昔。
古（いにしえ）より伝わる横並びの伝統技法。
昔から使われる横並び方法だが「float」にも、欠点がある。
横並びする要素のすぐ下の要素には必ず「clear:both;」が必要な点。
横並びし終わったら必ず入れるのはめちゃくちゃ忘れがちなので、「それ以降全て横並びになる現象」がたびたび起こっていた。
DEMO
ここまで
HTML
<ul class="demo3"> <li></li> <li></li> <li></li> <li></li> </ul> <p class="float-end">ここまで</p>
.demo3 {
width: 100%;
height: 100px;
display: block;
}
.demo3 li {
float:left;
width: 25%;
height: 100%;
}
.float-end {
clear:both;
}
コメント