こんにちは！キャメルです！
現在Web制作会社で働きながらWeb制作のことについて情報発信をしています。
今回はブロック要素を左右中央に寄せる「margin-inline: auto;」の解説をしていきます。
わりと新しいプロパティで、僕も最近使い始めたのですが便利なので紹介します！
それではいきましょう！
さらっと解説：これまでの左右中央寄せの方法
「margin-right」と「margin-left」を使った個別指定
これは左右を個別に指定する方法です。
.box {
margin-left: auto;
margin-right: auto;
}それぞれの余白をautoに指定することで左右均等に余白が振り分けられるので、
結果として中央に寄ります。
「margin」での一括指定
一括指定の方法です。
使っている人も多いのではないでしょうか。
.box {
margin: 0 auto;
}- 1つ目の値で上下の余白を0に指定
- 2つ目の値で左右の余白をautoに指定
もしくは
.box {
margin: auto;
}- 上下にautoを指定した場合には上下の余白は0となる
上記2つはどちらも同じ結果になります。
上下にも余白を指定したい場合には
.box {
margin: 10px auto 20px;
}このように書いてもOKです。
これだと上に10px、左右中央寄せ、下に20pxの余白が空きます。
「 margin-inline : auto ; 」はここが便利！
上下の余白に気を使わなくて良い
marginで一括指定をする場合
.box {
margin: auto;
}
指定していた上下の余白が0で上書きされてしまった…
こんなことになる可能性もありますよね。
でも
.box {
margin-inline: auto;
}margin-inline:auto; なら左右のみの指定になるので上下の余白に気を使う必要がありません。
一行で書くことができる
個別に指定している人もいると思いますが
.box {
margin-left: auto;
margin-right: auto;
}2行書くのちょっと面倒くさい…
と感じる人もいると思います。
margin-inline: auto; なら一行で済むのでラクですし、
コードもスッキリします。
.box {
margin-inline: auto;
}さらっと解説！「 margin-inline」の概要
2つのCSSの一括指定プロパティ
margin-inlineは
- margin-inline-start
- margin-inline-end
この2つのCSSの一括指定プロパティです。
最初の値で margin-inline-start（先頭の margin）を、2つ目の値でmargin-inline-end（末尾の margin）を指定します。
.box {
margin-inline: 10px 20px;
}上記では先頭に10px、末尾に20pxの余白が空きます。
論理プロパティのため書字方向に従う！
margin-inlineは論理プロパティと呼ばれるものに分類されます。
論理プロパティは書字の方向に依存するというものです。
要するに
横書きなら左右中央に、縦書きなら上下中央に寄ります！
全てのブラウザで対応している
全てのブラウザで対応しているため問題なく使えます。
参考サイトはこちら↓
まとめ：ブロック要素の左右中央寄せには『margin-inline : auto ;』は有用！
いかがでしたでしょうか？
今回は margin-inline:auto; について解説をしてきました。
CSSプロパティは時代と共にどんどん新しいものが出てきます。
新しいプロパティを積極的に取り入れて幅を広げていきましょう！
新しく学んだプロパティは積極的に使っていきながら覚えよう！
これからも便利なプロパティを紹介していきたいと思います。
それでは！
