これは覚えておきたい！左揃えの要素を中央配置にするCSSの古い書き方とモダンCSSを使用した書き方

Post on:2022年5月11日

sponsors

モダンCSSは今までの記述をよりシンプルにしたり、余分なHTMLを追加する必要なく記述することもできます。

ラッパーとしてdivなどのHTMLを追加せずに、左揃えの要素を中央配置する際に記述するCSSの古い書き方とモダンCSSを使用した書き方を紹介します。

※display: flex;が古いということではなく、モダンCSSだとラッパーは不要という意味です。

IEのサポート終了（6/15）も近づき、これからはIEを気にすることなく、モダンCSSを使用できます。マイクロソフト社でも6/15を待たずにIEを廃止してください、と通達しています。
参考: Don’t wait for June 15th! Set your own IE retirement date.

たとえば、左揃えのリスト要素を中央配置にしたいとします。
HTMLは、下記の通りです。

<ol>
	<li>Foreword</li>
	<li>Chapter 1: The Day I Was Born</li>
	<li>Chapter 2: Childhood</li>
	<li>Chapter 3: Teachers I Admired</li>
	<li>Chapter 4: Teenage Dreaming</li>
	<li>Chapter 5: Look Out World</li>
	<li>Chapter 6: The World Strikes Back</li>
	<li>Chapter 7: Righting My Ship</li>
	<li>Chapter 8: In Hindsight</li>
	<li>Afterword</li>
</ol>

<ol>

<li>Foreword</li>

<li>Chapter 1: The Day I Was Born</li>

<li>Chapter 2: Childhood</li>

<li>Chapter 3: Teachers I Admired</li>

<li>Chapter 4: Teenage Dreaming</li>

<li>Chapter 5: Look Out World</li>

<li>Chapter 6: The World Strikes Back</li>

<li>Chapter 7: Righting My Ship</li>

<li>Chapter 8: In Hindsight</li>

<li>Afterword</li>

</ol>

今までのやり方だと、divなどをラッパーとして追加し、中央配置にしていたと思います。

<div class="toc">
	<ol>
		<li>Foreword</li>
		<li>Chapter 1: The Day I Was Born</li>
		<li>Chapter 2: Childhood</li>
		<li>Chapter 3: Teachers I Admired</li>
		<li>Chapter 4: Teenage Dreaming</li>
		<li>Chapter 5: Look Out World</li>
		<li>Chapter 6: The World Strikes Back</li>
		<li>Chapter 7: Righting My Ship</li>
		<li>Chapter 8: In Hindsight</li>
		<li>Afterword</li>
	</ol>
</div>

<ol>

<li>Foreword</li>

<li>Chapter 1: The Day I Was Born</li>

<li>Chapter 2: Childhood</li>

<li>Chapter 3: Teachers I Admired</li>

<li>Chapter 4: Teenage Dreaming</li>

<li>Chapter 5: Look Out World</li>

<li>Chapter 6: The World Strikes Back</li>

<li>Chapter 7: Righting My Ship</li>

<li>Chapter 8: In Hindsight</li>

<li>Afterword</li>

</ol>

</div>

中央配置にするには、Flexboxが簡単です。

CSSの中央揃えで、最も万能で信頼できる実装テクニック

div.toc {
	display: flex;
	justify-content: center;
}

div.toc {

display: flex;

justify-content: center;

}

モダンCSSを使用したこれからのやり方は、ラッパーを追加する必要はありません。リスト要素に直接スタイルを定義するだけです。

ol {
	max-inline-size: max-content;
	margin-inline: auto;
}

ol {

max-inline-size: max-content;

margin-inline: auto;

}

max-inline-sizeは要素の最大サイズを定義するプロパティで、max-content値はコンテンツの幅に等しくなります。これによりリスト全体のサイズは、最長のアイテムと同じになります。

fit-content, min-content, max-contentの便利な使い方、CSSでコンテンツに依存してサイズを決める

margin-inlineは論理プロパティで、margin-inline-startとmargin-inline-endのショートハンドです。設定されている方向に基づいて、topとbottom、もしくはleftとrightに対応します。上記の場合はmargin-left: auto;margin-right: auto;と同等で、水平方向の中央に配置されます。