これは覚えておきたい！ コンテナ・ラッパーを定義するCSSの古い書き方とモダンCSSを使用した書き方

Post on:2022年3月15日

モダンCSSは今までJavaScriptが必要だったことやできなかったことを可能にしてきましたが、今までの記述をよりシンプルにすることもできます。

コンテナ・ラッパーを定義する際に記述するCSSの古い書き方とモダンCSSを使用した書き方を紹介します。

コンテナ・ラッパーを定義するCSSの古い書き方とモダンCSSを使用した書き方

CSSの古い書き方

まずは、CSSの古い書き方。
ぱっと見で、何が設定されているのか分かるのがよいところです。コンテナの幅を100%にし、最大幅をmax-widthで設定し、paddingが上下左右に2remあって、margin: 0 auto;で中央に配置します。

autoキーワードは、いろいろと便利ですよね。
参考: CSSのプロパティの値に「auto」を使ったテクニックのまとめ、マージンやサイズや配置やFlexboxなど

モダンCSSを使用した書き方

続いて、モダンCSSを使用した書き方。
最近のプロジェクトで見かけるのは、min()とmargin-inlineを使用してコンテナ・ラッパーの幅を設定する方法です。

こちらもぱっと見で何が設定されているのか分かるようにならないとですね。

min()に、古い書き方の3行分（幅・最大幅・パディング）が設定されています。
CSSのmin()は、2つの値を比較する数学関数です。
参考: CSSの数学関数min()、max()、clamp()の基本的な使い方
参考: CSSの比較関数が便利すぎる！min(), max(), clamp()の使い方を詳しく解説

min(100% - 2rem, 70rem);は、100% - 2remと70remの2つの値を比較して、小さい値が採用されます。これで、幅100%と最大幅70remが設定されます。そしてパディング2remも含まれており、この1行で古い書き方の3行分が設定されています。

min()は、すべてのエバーグリーンブラウザにサポートされています。
※エバーグリーンとは、最新版に自動アップデートされるブラウザのこと

サイトのキャプチャ

min()のサポートブラウザ

margin-inlineはmargin: 0 auto;と比べると、あまり変わらないじゃないかと思うかもしれませんが、CSSを書けば書くほど、このショートハンドが別のマージンと衝突して問題を引き起こすことがあることに気付くでしょう。
参考: marginの相殺を正しく理解しておこう！相殺はいつ起こるのか、相殺を回避するテクニック

margin-inlineは、margin-inline-startとmargin-inline-endのショートハンド（省略形）です。margin-leftやmargin-rightのような物理プロパティではなく、論理プロパティです。
参考: CSSのmargin-block-start, margin-inline-endなど、論理プロパティの使い方を徹底解説

stratの先頭とendの末尾は、writing-modeやdirectionにより、rightとleftに、あるいはtopとbottomになります。

margin-inlineは、すべてのエバーグリーンブラウザにサポートされています。

サイトのキャプチャ

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

また、このコンテナ・ラッパーを定義するCSSは、CSSの変数（カスタムプロパティ）を使用すると、カスタマイズがさらに簡単になります。

参考: CSSの変数（カスタムプロパティ）便利な使い方を詳しく解説

記事の元ネタは、下記のツイートからです。

sponsors

top of page

©2024 coliss