CSSのプロパティの進化、めまぐるしいですね。Webサイトの多言語化で文字の縦書き横書きなどでWebサイトのCSSをたくさん作るのは面倒!そこで今回は次世代の余白の考え方、margin-block、margin-inlineを徹底解剖してみます!
![](/static/069bc468dd96c224d5c16811d36dce60/e39a3/camille-pic.jpg)
かみーゆ/フロントエンドエンジニア
わりと難しいのでmarginとpaddingのおさらい
まずはmargin
とpadding
のおさらいから。
HTMLでは要素に対して内側と外側に余白を持たせることができます。
![ボックスモデル](/static/55e8a141ac95bb1ff11fa393e403ae14/397a5/entry436-1.jpg)
長年エンジニア講師をやってましたが、初学者の方は大抵ここで混乱してコケます。
なのでかなーり噛み砕いて説明します。
人間と洋服サイズ感に例えてみます。人間がHTML要素だと思ってください。
marginはソーシャルディスタンス?みたいなもの
隣の人とぴったり並んでたら窮屈ですよね。なので少し距離をおきます。
![marginはソーシャルディスタンス](/static/9390e8c5595b64f757ad27a066bcebfb/c08c5/entry436-2.jpg)
HTMLでは要素と要素の距離をmargin
と言います。イラストでは横方向ですが縦方向にももちろん取れます。
margin
のおもしろい(もしくはさらに混乱する)ところは縦方向の余白は少ない方の値が相殺されます。
![折りたたみマージン](/static/2c0d41e9f2a070531d1ef13f8c34583e/c80d3/entry335-1.jpg)
これを折りたたみマージンと言います。ちなみに横方向では相殺されません。
さらに詳しく知りたい方はこちらをお読みください。
ちなみにコロナ禍のフィリピンでは人と人とのmargin
は2メートルとやや広めですが、誰一人守ってないです。
折りたたまれてますね。
paddingはお洋服の体に対するサイズ。ぴったりしているか、ゆったりしているか
洋服もぴったりしていると体の線が出て恥ずかしかったり、逆にぶかぶかすぎたら不格好だったりしますよね?
![逆にぶかぶかすぎたら不格好だったりします](/static/4467127358a3a178fccacb33c78250ec/c08c5/entry436-3.jpg)
HTMLではpadding
プロパティを使って内側の余白を調整します。
要素のサイズや内包するコンテンツによって調整します。
おまけ・borderは洋服の厚みなど
季節に応じて、洋服の素材や厚みを変えますよね?
HTML要素ではこれがborder
やbackground
に当たります。
レスポンシブ世代のコーディングはpaddingもborderも内側に含めましょう!
現在、コーディングはレスポンシブが主流です。
padding
もborder
も何も設定しなければ外側に設定されます。
それを防ぐために必ずbox-sizing
プロパティを使って内側へ含めるようにしておきましょう。
box-sizing: border-box;
本題・論理プロパティとは?
論理プロパティとは使用する言語の種類(英語・アラビア語・日本語など)に関係なく、最小限のスタイルの変更で、Webサイトを制御できます。
今までのmargin
やpadding
は物理プロパティといって要素がどう並ぼうが上下左右に値を設定できました。
<div></div>
![余白と要素](/static/c964030134f31aee77b21425fa94639c/72b22/entry436-4.jpg)
div {
background: #333;
width: 100px;
height: 100px;
margin-left: 30px;
}
左など余白をセットしたい場所を指定したら位置が変わることはありません。
margin-blockを使ってみる
理論プロパティでmarginを設定すると要素の書字方向やテキストの向きに応じて物理的な余白に変 換されます。
プロパティmargin-block
を使ってみます。余白は要素の先頭と末尾というイメージで設定できます。
![ブロック方向・文字の並ぶ方向](/static/1691e1088333a818ebc3a6c08dbe7e03/0c9cf/entry436-01.jpg)
上図の通り、文字方向が英語と同じ場合は通常通り上が先頭、下が末尾になります。日本語と同じ場合は右が先頭で左が末尾です。
![余白と要素](/static/5ec1f7710f0fd60bc10c504aef1d7526/5d001/entry436-5.jpg)
div {
background: #333;
width: 100px;
height: 100px;
margin-block: 50px 50px;
}
ショートハンドで記述する際の順番です。
margin-block: 先頭 末尾;
上から下へ並びます。なので余白は要素の上と下にセットされます。
最初はmargin-block-start
、最後はmargin-block-end
と分けて記述することもできます。
margin-block-start: 50px;
margin-block-end: 50px;
- 内側の余白を設定したいときは
padding-block
プロパティを使えます。使い方はmargin-block
と一緒です。 - 上下に余白が発生し、隣接したときは折りたたみマージンが発生します。
margin-inlineを使ってみる
プロパティmargin-inline
で論理的なインライン方向の先頭と末尾のマージンを設定できます。
![インラインの軸・文字の並ぶ方向](/static/f90de9675e3aba344b076a9b03e5f921/c08c5/entry436-02.jpg)
div {
background: #333;
width: 100px;
height: 100px;
margin-inline: 50px 30px;
}
![margin-inline 開発者ツール](/static/da817e1a63d578f5fba89e8a0fed0581/8df40/entry436-6.jpg)
- 内側の余白を設定したいときは
padding-inline
プロパティを使えます。使い方はmargin-inline
と一緒です。
要素をたった一行でセンタリングできる
プロパティmargin-inline
を使うと要素をたった一行でセンタリングできます。
<div class="center">
<p>center</p>
</div>
div {
margin-inline: auto;
}
![要素をたった一行でセンタリングできる](/static/b0f8d8b445cdfa61429a0b786a658ef5/6af66/entry436-12.png)
margin-inlineとmargin-blockを使って四方のマージンを設定する
通常のプロパティmargin
同様前後左右余白を設定するときのコードを紹介します。
今までの物理プロパティで書くコードとも比較してみましょう。
<div class="old">
<div>Old technique</div>
</div>
<div class="new">
<div>New technique</div>
</div>
CSSはコードが長くなりますね。
.old div, .new div {
background: #ccc;
width: 500px;
height: 100px;
}
.old div {
margin: 30px 100px;
}
.new div {
margin-block: 30px;
margin-inline: 100px;
}
![物理プロパティと理論プロパティの比較](/static/d23585cc45ba8f57de44766047293b4b/c08c5/entry436-7.jpg)
文字方向を変えてみる
では、writing-mode
を使って文字方向を変えてみます。
日本語のように文字の方向を右から左にします。
.new div {
writing-mode: vertical-rl;
margin-block: 30px;
margin-inline: 100px;
}
文字の向き(縦書き横書き等)に左右されるので余白の位置が左右・上下変わります。
![物理プロパティと理論プロパティの比較](/static/573500a2c4b48a4d51006d09c2238ac1/c08c5/entry436-8.jpg)
日本といえば美しい縦書きを実装したい!論理プロパティの使いどころを考えてみた
最近縦書きの実装が増えているので、縦書きでの実装を試してみました。
縦書きでコンテンツをセンタリングする際ブラウザFirefoxでバグがあります(IEはもうバグ対応にすら入れてません)。
ちなみに「margin-block使ったらイケるかなー」と淡い期待を持ってやってみたのですがダメでした。
![縦書きの実装](/static/5812c14ba6b04692f3002e08d6eb1a05/c08c5/entry436-9.jpg)
<div class="vertical">
<p>「銀ねこアトリエ」へようこそ。
セブ島に住むフロントエンド エンジニア・かみーゆの気ままな日記です。<br>
フロント技術を中心とした「ウェブ制作に関するチップス」、「磨耗しない人生の選択」や「海外生活」のライフスタイルについても発信しています。<br>
ぜひ、「銀ねこアトリエ」を楽しんでください!</p>
</div>
body {
background: url(https://ginneko-atelier.com/static/f06cabea092b70c1fc4d476ab9c36647/14b42/bg-main.jpg) center / cover;
}
.vertical {
padding-top: 50px;
padding-bottom: 50px;
width: 100%;
}
.vertical p {
writing-mode: vertical-rl;
margin-block-start: auto;
margin-block-end: auto;
margin-inline: 15px;
line-height: 1.8;
background: rgba(255,255,255, .7);
padding-block-end: 30px;
padding-block-start: 30px;
padding-inline-start: 15px;
padding-inline-end: 15px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, .2);
}
ちなみにcaiuseでの実装状況です。
![ちなみにcaiuseでの実装状況](/static/987013b3b1f3c406c97b5ca5ef9c015e/a9b70/entry436-10.png)
補足しておくと値は以下のように値は指定できます。
![ちなみにcaiuseでの実装状況](/static/2ca5bb1a5e7ae2cb7bbc1cb02e5ccac3/c08c5/entry436-11.jpg)
おまけ・Firefoxで縦書きを実装
Firefoxで縦書きコンテンツの入った要素をセンタリングするためには、以下のコードで実装しましょう。
height: 任意のサイズ;
margin-block-start: 50%;
transform: translateX(-50%);
もしくは通常の物理プロパティで書くと
height: 任意のサイズ;
margin-left: 50%;
transform: translateX(-50%);
まとめ・多言語サイトでは役に立ちそう!
前から気になっていたので今回は理論プロパティ・margi-block
とmargin-inline
について掘り下げてみました。
まだまだ日本語での資料が少なかったのでとりあえず検証はしてみました。
結論多言語サイトで使えそうだけどまだまだ先かなーってイメージでした。
最後までお読みいただきありがとうございました。
参考
おなじみMDNお合わせて読むと理解が深まると思います。
- margin-block | CSS | MDN
- margin-inline | CSS | MDN
- padding-block | CSS | MDN
- padding-inline | CSS | MDN
さらに掘り下げて知りたい方はcolisさんのサイトをご覧ください。
FAQ
- margin の数値が設定したものと違う
- 縦方向に積み重ねられた要素同士でおこる現象です。この現象を「折りたたみマージン」と言い、余白は少ない方の値が相殺されます。
- marginとpaddingの違いがわからない
- 要素と要素の距離をmargin、要素の内側の余白をpaddingといます。
- Webサイトに縦書きを実装したい!
- CSSプロパティmargin-blockを使うと縦書きを実装できます。詳しい実装方法は当ブログで紹介しています。