CSSのmargin: auto;の仕組みをおさらい、最近の実装で使用される中央配置やナビゲーションのテクニック

margin: auto;は非常に便利なCSSで、使用することも多いと思います。

そのmargin: auto;の仕組みをおさらいし、最近の実装で使用される中央配置のテクニックを紹介します。また、ナビゲーションでタイトル以外のリンクを右寄せに配置させるなど、便利なテクニックが満載です。

All About 'margin: auto' in CSS: Centering and More
by Ritika Agrawal

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• 「auto」とはどういう意味ですか？
• 「利用可能なスペースを占める」とはどういう意味ですか？
• ブロックレベル要素でautoを使用する
• 絶対要素でautoを使用して中央配置
• CSS GridとFlexboxでautoを使用して中央配置
• Flexboxとautoでナビゲーションを実装する
• 終わりに

はじめに

marginは、Webページ内の要素のスペースとレイアウトを制御するためにCSSで使用される一般的なプロパティです。BootstrapやTailwind CSSなど一般的なCSSフレームワークにも要素のすべての側面、または特定の側面のマージンを設定するためのユーティリティクラスがあります。

marginプロパティの値として通常は長さの単位（rem, px, emなど）や%を使用しますが、marginプロパティには値として「auto」というキーワードも使用できます。

この記事では、この「auto」がどのように機能するのか、どのように使用するのか、詳しく解説したいと思います。

「auto」とはどういう意味ですか？

marginプロパティの値にautoキーワードが使用されている場合、ブラウザは要素の周囲のスペースに基づいて要素に適したマージンを自動的に計算します。autoは基本的に、利用可能なスペースを占めるようにブラウザに指示します。

「利用可能なスペースを占める」とはどういう意味ですか？

たとえば、<section>タグ内に<div>タグがあり、下記のようになっているとします。

<section>タグはブルーのボーダー、<div>タグはオレンジのボックス

ブロックレベル要素は親の幅全体を占めるため、autoが機能するスペースは残されていません。そのため、<div>タグのwidthを100pxの固定幅に設定し、<section>タグのコンテナ内にスペースを作っています。

margin-left: auto;を設定するとどうなるか

このオレンジのボックスにmargin-left: auto;を設定するとどうなると思いますか？ 使用可能なスペースのすべてを左マージンとして使用して、オレンジのボックスは右側に移動します。

margin-left: auto;を設定

autoは、適用されたマージンに使用可能なスペースをすべて占有します。ただし、autoを使用する際に注意すべき点がいくつかあります。

• ブロックレベル要素の場合、margin-leftとmargin-rightでのみ機能します。
• フロート要素とインライン要素には、効果がありません。
• 絶対要素に対しては、特定の条件下で機能します。
• margin-topとmargin-bottomは、CSS GridとFlexboxでのみ機能します。

ブロックレベル要素でautoを使用する

ブロックレベル要素で使用する場合、autoはmargin-leftとmargin-leftでのみ機能します。上記で、marign-left: auto;が要素をコンテナの右側にプッシュする方法を見ました。

margin-right: auto;を追加するとどうなるか

上記のオレンジのボックスにmargin-right: auto;を追加するとどうなると思いますか？ autoは利用可能なすべてのスペースを右マージンと左マージンの両方に均等に与えるため、要素を親コンテナ内で水平方向に中央揃えにします。

margin-right: auto;を追加

これはautoのもっとも一般的な使用例です。
たった一行のCSSで、divをはじめブロックレベル要素を親コンテナ内で水平方向に中央揃えで配置できます。

要素を水平方向の中央揃えにしたい場合、marginのショートハンドまたはmargin-inlineのどちらかを使用します。ただし、固定幅のブロックレベル要素に対してのみ機能することを忘れないでください。

絶対要素でautoを使用して中央配置

position: absolute;で絶対配置された要素はドキュメントの通常フローから外れているため、margin: auto;が機能しないのは当然だと思います。しかし例外があるようで、autoを使用して親要素内の絶対要素を垂直と水平方向の両方で中央揃えにすることができます。

W3Cの仕様によると、

left, width, rightの3つすべてがautoの場合、まずmargin-leftとmargin-rightのauto値を0に設定します。3つすべてがautoではない場合、margin-leftとmargin-rightの両方がautoの場合、2つのマージンが等しい値をとるという特別の制約の下で方程式を解きます。

W3Cの仕様によると、height, top, bottomプロパティについても同様に定義されています。つまり、絶対要素を中央揃えに配置できることを意味します。

• leftとrightプロパティが同じ値で、幅が固定されている場合は、水平方向に中央揃えできます。
• topとbottomプロパティが同じ値で、高さが固定されている場合は、垂直方向に中央揃えできます。

この特定の条件を使用することで、下記のように絶対要素を親要素内で中央揃えにすることができます。

inset: 0;は、4つのプロパティ（left, right, top, bottom）をすべて0にするショートハンドです。

絶対要素の中央揃え

しかし、この実装方法はW3C仕様の例外のため、親要素内の絶対要素を中央揃えにするのに有効です。これを実現するには、left, top, transformプロパティを組み合わせて使用するのがベストプラクティスです。

CSS GridとFlexboxでautoを使用して中央配置

CSS GridもFlexboxもmarginプロパティにautoを設定することで、要素を水平にも垂直方向にも中央揃えにすることができます。

前述の<section>タグ内に<div>がある例で、今回は<section>タグにdisplay: flex;を設定してみます。

margin: auto;は四方向すべてで機能し、オレンジのボックスをFlexboxの親の中央に配置します。

⚠️ 子のmargin-topとmargin-bottomにautoを使用したい場合は、Flexboxコンテナ（親）にheightを設定する必要があります。

Flexboxでautoを使用

<section>タグのdisplay: flex;をdisplay: grid;に置き換えても、同じ結果が得られます。

Flexboxとautoでナビゲーションを実装する

私が最近見かけたautoの興味深い使用例の一つは、Flexboxとautoで実装されたナビゲーションのバーです。

タイトル、いくつかのリンク、サインアップとログインのボタンがある基本的なナビゲーションです。Flexboxはこれらの要素を一行に配置するために使用します。

Flexboxで実装されたナビゲーション

タイトル以外を右寄せにする

ナビゲーションの右側にすべてのリンクと2つのボタンを配置するにはどうすればよいでしょうか？

その方法の1つが、Flexコンテナでjustify-content: space-between;を使用することです。タイトルが1つのタグ内にあり、すべてのリンクとボタンが<ul>タグ内にあるからです。

また別の方法として、<ul>タグにflex-grow: 1;を追加し、1つ目の<li>タグにmargin-left: auto;を追加します。

デフォルトでは、Flexアイテムはそのコンテンツを収めるのに必要な最小限のスペースしか取りません。そこでautoが取得できるスペースを作成するためにflex-grow: 1;を追加して、Flexコンテナの残りのスペースを埋めるように拡張しました。

タイトル以外を右寄せに

ボタンにもmargin-left: auto;を設定するとどうなるか

すべてのリンクが中央に配置され、2つのボタンは最後に配置されます。たった一行のCSSで別バーションのナビゲーションができました。

ボタンにもmargin-left: auto;を設定

この実装をしようして、ソーシャルアイコンを末尾に、タイトルを上に、すべてのリンクを中央に配置するサイドバーを作ることもできます。Flexコンテナに固定の高さを与え、最初のリンクとアイコン要素にmargin-top: auto;を設定するだけです。

終わりに

この記事では、autoキーワードがmarginプロパティでどのように機能するのかを解説しました。また、Flexboxを使用した実用的なナビゲーションを簡単に実装する方法についても学びました。

記事は以上です。お読みいただきありがとうございました！😊

この記事がお役に立てば幸いです。フィードバックやコメントなどは、@RitikaAgrawal08までお願いいたします。