よこ並びのCSS。
インライン・ブロックでよこ並び

displayプロパティでinline-blockを指定した要素は、その要素自体はblockのように、周囲の要素に対してはinlineのように振る舞います。ブロック要素なのに、テキストのように配置される、そんな、インライン・ブロックな要素を利用して、よこ並びレイアウトを作ります。

インライン・ブロックはカンタン

li要素にdisplayプロパティでinline-blockと指定するだけでよこ並びになります。ul要素に指定したtext-align: centerによって、ボタン自体も画面中央に配置されるので、この方法が一番お手軽かもしれませんね。

ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
li {
	display: inline-block;
}

ただし、ボタンとボタンの間に妙な隙間ができてしまいます。

妙な隙間をなくす

この妙な隙間は、li要素の後の改行コード半角スペースとして表示されてるのが原因。

隙間を埋めるには、HTMLソースで改行しないようにするのが一番手っ取り早いです。

CSSで対応するならば、ul要素の文字間を半角スペースが詰まるくらい狭く指定して、li要素で元の文字間に戻す方法があります。ここではul要素にletter-spacingプロパティで-.5emと指定して、li要素で0に戻しています。

ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
	letter-spacing: -.5em;
}
li {
	display: inline-block;
	letter-spacing: 0;
}
ul要素への指定で、li要素の文字間が詰まるが、li要素への指定で、a要素内の文字間が元に戻る

ページトップへ戻る

横幅いっぱいにレイアウトする

ナビゲーションの横幅を親要素の横幅いっぱいにするのは、フロートの時と同じ方法でできます。ここではli要素に20%と指定しています。相変わらずボタンの大きさは凸凹になっちゃいますが、他のレイアウトと違って、ボタンの底辺で揃ってるのがわかりますね。インライン・ブロックが並ぶ時、縦方向の位置は、テキストと同じようにベースラインに揃うようになるんです。

li {
	display: inline-block;
	width: 20%;
	letter-spacing: 0;
}

ということはつまり、vertical-alignプロパティで中央に揃えることができるということ。

li {
	display: inline-block;
	width: 20%;
	vertical-align: middle;
	letter-spacing: 0;
}

ということはつまり、テーブルレイアウトの時と同じようにやれば、ボタンのサイズを揃えることもできるのでは?

li {
	display: inline-block;
	overflow: hidden;
	width: 20%;
	vertical-align: middle;
	letter-spacing: 0;
}
li a {
	cursor: pointer;
	display: block;
	margin: -4em 0;
	padding: 5em 1em;
	background: #86c0de;
}

あれれ?何も変わってない…。テーブルレイアウトと同じじゃダメみたいです:(
けれど、overflow: hiddenする要素を、li要素からul要素に指定し直したら、うまくいきました!

ul {
	list-style: none;
	overflow: hidden;
	margin: 0;
	padding: 0;
	text-align: center;
	letter-spacing: -.5em;
}
li {
	display: inline-block;
	width: 20%;
	vertical-align: middle;
	letter-spacing: 0;
}

table-cellを指定した時のli要素は、高さが揃ってたんですけれど、inline-blockを指定した時のli要素は、要素の内容に準拠した高さになってるので、うまくいかなかったんですね。

table-cellは同じ列の要素の高さが揃うけど、inline-blockはマチマチのまま

レスポンシブにする

スマホでの表示は、テーブルレイアウトの時と同じく、たて並びにしましょう。
と言っても、よこ並びにするためのスタイルを、メディアクエリで、768px以上の時に適用されるように指定し直すだけでOKですね;)

@media screen and (min-width: 768px) {
	ul {
		overflow: hidden;
		letter-spacing: -.5em;
	}
	li {
		display: inline-block;
		width: 20%;
		vertical-align: middle;
		letter-spacing: 0;
	}
	li:nth-child(n+2) {
		padding: 0 0 0 1px;
	}
	li a {
		margin: -4em 0;
		padding: 5em 1em;
	}
}

ページトップへ戻る

インライン・ブロックで商品一覧

商品一覧でも、おもむろに、li要素にdisplay: inline-blockを指定します。
すると、下のサンプルのように、2つずつで改行されてしまいました。インライン・ブロックにすると改行コードが半角スペースとして表示されるんでしたね…。

.itemlist li {
	display: inline-block;
	width: 33.333333%;
	padding: 10px;
	box-sizing: border-box;
}

それから、商品の縦方向の位置が、li要素の底辺で揃ってるので、写真の位置がガタガタして見えます。

そこで、ナビゲーションの時と同じく、letter-spacingプロパティで半角スペース分が詰まるように指定します。あとは、li要素が上辺で揃うよう、vertical-alignプロパティでtopと指定します。

.itemlist {
	list-style: none;
	max-width: 1024px;
	margin: 0 auto;
	padding: 0;
	letter-spacing: -.5em;
}
.itemlist li {
	display: inline-block;
	width: 33.333333%;
	padding: 10px;
	box-sizing: border-box;
	letter-spacing: 0;
	vertical-align: top;
}

レスポンシブにする

フロートの時と同じく、767px以下の時には2列、414px以下の時には1列になるようにしましょうか。
li要素の横幅を指定しなおすだけです。フロートと違ってclearしなくて良い分とっても簡単にできちゃいましたね!

@media screen and (max-width: 767px) {
	.itemlist li { 
		width: 50%;
	}
}
@media screen and (max-width: 414px) {
	.itemlist li {
		width: auto;
	}
}

効率よく指定すると、以下のようになりますね。
上の逆で、415px以下の時には2列で、768px以上の時には3列になる、という指定になります。

.itemlist li {
	display: inline-block;
	padding: 10px;
	box-sizing: border-box;
	letter-spacing: 0;
	vertical-align: top;
}
@media screen and (min-width: 415px) {
	.itemlist li { 
		width: 50%;
	}
}
@media screen and (min-width: 768px) {
	.itemlist li {
		width: 33.333333%;
	}
}

Comment & Pingback

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください