ちょっと昔僕がはまった単純なHTMLの罠の話です。
ブロック要素は通常連続して書くと横幅の設定値に限らず改行されて縦に並びます。
displayプロパティに inline-block を設定すると、ブロック要素のようだけどテキストなどのように横に並ぶようになります。
しかし、widthで50%を指定して横に2つずつ並べようとすると何故か並びません。
49%だったら並びましたけど気持ち悪いです。
今回は inline-block で横にすっきり並べる方法と、それ以外にきれいに並べる方法をご紹介します。
inline-blockで横に並ばない原因
HTMLは基本的に半角スペースやタブは認識しないと僕は覚えています（いました）。
半角スペースを表示させるためにはエスケープされた文字「 」を使います。
でもここにちょっとした罠があります。
例えば以下のようなHTMLの要素と文章があります。
<div>TEXTTEXT</div>
これを表示されると以下のようになります。
これは普通ですね。
では、以下のようなHTMLの場合はどうでしょう。半角スペースを入れてみました。
<div>TEXT TEXT</div>
これを表示したらこうなります。
半角スペースとして入れたわけではないのに入ってしまいます。
<div class="element1">要素1</div> <div class="element1">要素2</div> <div class="element1">要素3</div> <div class="element1">要素4</div>
上の４つのブロック要素にも間に改行があります。
スペースやタブが入ることも多いでしょう。
これがスペースになり、widthで50%を指定してもスペースの分50％以上になってしまいきれいに並ばないのです。
inline-blockで横に並ばせる方法
改行を取り除く
<div class="element1 color1">要素1</div><div class="element1 color2">要素2</div><div class="element1 color3">要素3</div><div class="element1 color4">要素4</div>
なんだか乱暴な方法ですが、上のコードの様に改行せずにHTMLを1行で記載すればきれいに並びます。
改行部分をコメントなどで隠しても大丈夫です。
CSSで改行を無視する
<div id="wrap2"> <div class="element2 color1">要素1</div> <div class="element2 color2">要素2</div> <div class="element2 color3">要素3</div> <div class="element2 color4">要素4</div> </div>
#wrap2 {
letter-spacing: -1em;
}
.element2 {
display: inline-block;
width: 50%;
letter-spacing: 0em;
}
letter-spacing とは、文字の間隔を指定するプロパティです。
親要素の文字間隔を1文字分マイナス(-1em)にしてスペースを消し、横並びにする子要素で通常(0em)に戻すことで間のスペースを消すことが出来ます。
でも、これもちょっと強引ですけど、CSSで対応出来るのでありかと思います。
floatで並ばせる方法
<div id="wrap4"> <div class="element4 color1">要素1</div> <div class="element4 color2">要素2</div> <div class="element4 color3">要素3</div> <div class="element4 color4">要素4</div> </div>
#wrap4:after {
clear: both;
content: '';
display: block;
}
.element4 {
display: inline-block;
width: 50%;
float: left;
}
個人的にはfloatを使うのが一番無難な感じがします。
だけどfloatってなんだか扱い辛いイメージもあります。
使うときには親要素も用意して、:after でfloatをクリアする記述も追加した方がよいです。
ちなみにfloatを使う場合は、inline-block である必要はありません。blockでよいです。
flexを使う方法
<div id="wrap5"> <div class="element5 color1">要素1</div> <div class="element5 color2">要素2</div> <div class="element5 color3">要素3</div> <div class="element5 color4">要素4</div> </div>
#wrap5 {
display: flex;
flex-wrap: wrap;
}
.element5 {
display: inline-block;
width: 50%;
}
親要素でdisplay: flex;を指定することで横並びにさせることも出来ます。
でも通常だと要素が1行に並ぶようになるので、flex-wrap: wrap; で折り返し出来るようにします。
子要素はこれもinline-blockである必要はありません。blockでよいです。
flexはCSS3からの新しい機能だし、非常に便利です。
僕は最近はHTMLなどは外注しちゃうのでよく分かりませんでしたが、一般的にはこれが一番良い方法なのかもしれません。
まとめ
今回は横に並べる方法というより、HTMLのスペースの罠について注意してほしいということを伝えたいです。
inline-block はその罠の影響を受けるので注意してください。
横に並べる方法は縦列の数が決まっているならテーブルを使ってもよいかもしれないです。
コメント