KaoLog

ぽんこつwebデザイナーのスキルのメモ

様々なcssの横並びについてまとめてみた

f:id:s2lybb:20170504131855p:plain

様々なcssの横並びについてまとめてみた。

横並びにするために使うcssはたくさんあります。今回は横並びのcssについてまとめようと思います。

f:id:s2lybb:20170504215701p:plain

今回は上の図のようなレイアウトの作成を目指します。

 

display:inline;での横並び

See the Pen display:inlineでの横並び by Kaorin (@PANbooooo) on CodePen.

li{
display:inline;
}

子要素であるlidisplay:inline;をかけることで、横並びになります。

ただ、display:inline;はinline要素の為、幅の指定や高さの指定などができません。

 

display:inline-block;での横並び

See the Pen inline-blockを使用した横並び by Kaorin (@PANbooooo) on CodePen.

li{
display:inline-block;

子要素であるlidisplay:inline-block;をかけることで、横並びになります。

display:inline-block;display:inline;と違って、幅指定や高さ指定が可能です。

 

しかし、このdisplay:inline-block;display:inline-block;を使うと、要素と要素の間に変な隙間が出来てしまいます。

この隙間を消す方法はいくつかあります。

 

html内で隙間を消す方法

liliを続けて書く書くことで、隙間が無くなります。一番簡単な方法ではありますが、あまり推奨はできません。

See the Pen inline-blockで出来る隙間の消し方 by Kaorin (@PANbooooo) on CodePen.

 

親要素にfont-size:0;をかける

親要素であるulfont-size:0;をかけ、子要素であるliに、指定したいfont-size:14px;(ここでは14pxとする)をかけます。

See the Pen inline-blockで出来る隙間の消し方 by Kaorin (@PANbooooo) on CodePen.

 

親要素にletter-spacingをかける

親要素であるulletter-spacing:-0.25em;(指定する値は自由)をかけ、子要素であるliに、letter-spacing:0;をかけます。

See the Pen inline-blockで出来る隙間の消し方 by Kaorin (@PANbooooo) on CodePen.

この3つの方法によりdisplay:inline-block;display:inline-block;によって出来る変な隙間は消すことができます。

 

display:table;とdisplay:tabl-cell;での横並び

See the Pen display:table;を利用した横並び by Kaorin (@PANbooooo) on CodePen.

ul{
display:table;
}
li{
display:table-cell;
}

親要素であるuldisplay:table;をかけ、子要素であるlidisplay:table-cell;をかけることで、横並びになります。

また、ultable-layout:fixed;をかけることによって、子要素を均等幅になるようにしていができます。しかし、この場合は必ずwidthが必要となります。

See the Pen OmxQJg by Kaorin (@PANbooooo) on CodePen.

 

他にもulborder-collapse:collapse;border-spacing:10px 0;(指定する値は自由)をかけることによって、要素と要素の間に隙間ができます。

See the Pen table-cellの横並びに隙間を開ける by Kaorin (@PANbooooo) on CodePen.

 

floatでの横並び

See the Pen floatでの横並び by Kaorin (@PANbooooo) on CodePen.

横並びさせたい要素にfloatをかけ、その親要素にclearFixをかけることで、回り込みを解除し、うまく横並びができるようにします。

このとき、float:right;とすると右寄せに、float:left;とすると左寄せになります。

 

Flexboxでの横並び

See the Pen Flex boxを利用した横並び by Kaorin (@PANbooooo) on CodePen.

横並びにさせたい親要素にdisplay:flex;をかけるだけで、簡単に横並びになります。このFlexboxはとても便利で奥が深いものです。また別記事でその使いやすさを紹介したいとおもいます。

 

webサイトを作る際に、よく横並びは使われます。少しでもその参考になると嬉しいです。