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

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

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

左揃えの要素を中央配置にする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は、下記の通りです。

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

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

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

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

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

実際の動作は、デモページでご覧ください。

サイトのキャプチャ

デモページ

max-inline-sizemargin-inlineのサポート状況は、下記の通りです。IEを除く、すべてのブラウザでサポートされています。

サイトのキャプチャ

max-inline-sizeのサポートブラウザ

サイトのキャプチャ

margin-inlineのサポートブラウザ

元ネタは、下記の記事からです。

サイトのキャプチャ

Flexibly Centering an Element with Side-Aligned Content

CSS Resetでも有名なEric Meyer氏のブログです。

sponsors

top of page

©2022 coliss