この記事は、2年10ヶ月前に書かれました。
はじめに
実務で使いたいのに、憎たらしいIEのせいで使えないCSSがあります。margin-inline: autoとwidth:fit-contentです。
来年、IEサポート終了にともない使えるようになります。
Xデーが来る前に使い方をおさらいしておくことにします。
どのような時に使えば便利なのか
例えば<p></p>タグを中央寄せにしつつ、中のテキストは左寄せにしたい場合ってありますよね。以下のようなイメージです。これ、実現するには地味に手間がかかります。マークアップエンジニアの方でしたら「うんうん」とうなずけるかと思います。
まず、これまでやってきた古い例を解説します。
シンプルにpタグで囲まれた以下のようなHTMLがあるとします。
Pタグはブロック要素ですので、横幅いっぱいに広がります。中の要素はデフォルトで左寄せになります。
See the Pen margin-inline: auto;2 by NK STUDIO (@wqrxfcpf-the-lessful) on CodePen.
では、pタグをテキストの幅ぴったりに合わせるにはどうすればよいでしょうか。真っ先に思いつくのが以下のCSSです。このCSSは、ブロック要素のタグをインライン要素に変換してくれます。インライン要素にすると、中の要素の幅いっぱいまでブロックの幅を広げてくれます。
display: inline-blockではやってみます。
See the Pen margin-inline: auto2 by NK STUDIO (@wqrxfcpf-the-lessful) on CodePen.
ひとまず、pタグの中身に合わせて横幅ぴったりになりました。しかし、画面の左側に寄ったままとなっていますので、これを中央まで移動させます。
ここで思いつくのがtext-align:centerです。やってみます。
いかがでしょうか、ボックス内でテキストが中央揃えになっただけですね。
See the Pen margin-inline: auto3 by NK STUDIO (@wqrxfcpf-the-lessful) on CodePen.
ボックス要素そのものを中央にするためにはmargin-left: autoとmargin-right: autoというCSSを使用するのが定番です。では入れてみます。中央寄せにはなりません。
See the Pen margin-inline: auto4 by NK STUDIO (@wqrxfcpf-the-lessful) on CodePen.
margin:autoを使用するには、ボックス要素の幅widthを指定する必要があります。widthにはpxや%、emなどの指定方法がありますが、今回は中身のテキスト要素の最大値としてwidth: 7emとしています。
emはfont-size値を基準とした相対的な値となり、font-size:16pxの場合は1emは16pxとなります。
要素の１行あたり最大７文字なので、7emとすることで7文字分の幅を確保することになります。
いかがでしょう、一応希望どおりの見た目にはなりました。しかしこれには大きな問題があります。
See the Pen margin-inline: auto4 by NK STUDIO (@wqrxfcpf-the-lessful) on CodePen.
テキストの文字数が変わらないとは限りません。
例えば、以下のように３行目が増えた場合はどうでしょうか。自動改行が入ってしまいます。
CSSでwidth:10emと変更すればいいのですが、メンテナンス効率が悪すぎます。
そこで登場するのはmargin-inline:autoとwidth:fit-contentです。
See the Pen margin-inline: auto6 by NK STUDIO (@wqrxfcpf-the-lessful) on CodePen.
margin-inline:autoとwidth:fit-content
いきなり完成形です。たった２行のCSSを入れるだけで、苦労していたことが簡単に実現できました。しかも、テキスト要素が増えても自動的にボックス幅も広げてくれます。
See the Pen margin-inline: auto by NK STUDIO (@wqrxfcpf-the-lessful) on CodePen.
どういう仕組みか解説します。
まず、margin-inline: autoでインライン方向のマージンを中央寄せにしてくれます。ショートハンドではない書き方はmargin-inline-start:autoとmargin-inline-end:autoになります。
どちらで書いても構いません。width:fit-contentで、中身にのテキスト幅に合わせてp要素をぴったりに合わせてくれます。min-contentやmax-contentという指定もあります。どのような配置になるか一度お試しください。
まとめ
IEサポート終了が近づいてきました。これまで使えなかった便利なCSSをガンガン使えるようになります。display:gridやclamp()などもそうです。clamp()を使用すれば、レスポンシブ対応が楽になります。使いどころによってはブレイクポイントでわざわざ指定しなくてもよくなります。
今のうちに新しいCSSを習得しておきましょう。