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

2017.2.15 Wed. 2023.2.7 Tue.

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

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

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

.nav_list li {
	display: inline-block;
}
.nav_list li:nth-child(n+2) {
	padding-left: 1px;
}

ただ、リンクボタンとリンクボタンの隙間が、ちょっと広い気がしますね…。

妙な隙間をなくす

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

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

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

ul要素への指定で、li要素の文字間が詰まるが、li要素への指定で、a要素内の文字間が元に戻る

.nav_list {
	text-align: center;
	letter-spacing: -.5em;
}
.nav_list li {
	display: inline-block;
	letter-spacing: 0;
}

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

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

.nav_list li {
	display: inline-block;
	width: 20%;
	box-sizing: border-box;
	letter-spacing: 0;
}

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

.nav_list li {
	display: inline-block;
	width: 20%;
	box-sizing: border-box;
	letter-spacing: 0;
	vertical-align: middle;
}

ということはつまり、テーブルレイアウトの時と同じようにやれば、ボタンのサイズを揃えることもできそうです:D！
ただし、テーブルレイアウトの時はli要素の高さが揃っていたけど、インライン・ブロックではli要素の高さもマチマチなので、最後のトリミングのとこはul要素に指定するようにします。

.nav_list {
	overflow: hidden;
	letter-spacing: -.5em;
}
.nav_list a {
	margin-block: -4em;
	padding-block: 5em;
}

レスポンシブにする

スマホでの表示は、テーブルレイアウトの時と同じく、たて並びにしましょう。
よこ並びにするためのスタイルを、メディアクエリで768px以上の時に適用されるように指定し直せばOKですね。あと767px以下の時にはリンクボタンの隙間が上に付くようにしたら完了です;)。

@media screen and (min-width: 768px) {
	.nav_list {
		overflow: hidden;
		letter-spacing: -.5em;
	}
	⋮
}
@media screen and (max-width: 767px) {
	.nav_list li:nth-child(n+2) {
		padding-top: 1px;
	}
}

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

商品一覧でも、おもむろに、li要素にdisplay: inline-blockを指定します。
すると、下のサンプルのように、2つずつで改行されてしまいました。インライン・ブロックにすると改行コードが半角スペースとして表示されるのでしたね…。ナビゲーションの時と同じく、letter-spacingプロパティで半角スペース分が詰まるように調整する必要があります。

.menu_list li {
	display: inline-block;
	width: 33.333%;
	padding: 16px 32px;
	box-sizing: border-box;
}

それから、商品写真の位置がズレてガタガタして見えます。どうやら、li要素が底辺で揃ってる様子。
li要素が上辺で揃うよう、vertical-alignプロパティでtopと指定します。

.menu_list {
	max-width: 1024px;
	margin: 0 auto;
	letter-spacing: -.5em;
}
.menu_list li {
	display: inline-block;
	width: 33.333%;
	padding: 16px 32px;
	box-sizing: border-box;
	letter-spacing: 0;
	vertical-align: top;
}

レスポンシブにする

フロートの時と同じく、767px以下の時には2列、428px以下の時には1列になるようにしましょう。li要素の横幅を指定し直すだけです;D！

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

要領よく指定すると、以下のようになります。
縦1列になったら、よこ並びのためのスタイルは必要ないので、よこ並びのためのスタイルは全て429px以上の時のみ適用されるようにします。429px以上の時によこ並び2列になって、768px以上の時には3列になる、という順番の指定になります。;)

@media screen and (min-width: 429px) {
	.menu_list {
		letter-spacing: -.5em;
	}
	.menu_list li {
		display: inline-block;
		width: 50%;
		letter-spacing: 0;
		vertical-align: top;
	}
}
@media screen and (min-width: 768px) {
	.menu_list li { 
		width: 33.333%;
	}
}

フレックスボックスレイアウトでよこ並び