概要
みなさんが使っているCSSのマージンプロパティですが、論理プロパティを使えばより効率よくスタイリングできます。
本記事では、いくつかのユースケースを紹介していきます。
なおユースケースに焦点を当てますので、論理プロパティについては詳しく言及しません。
以下のドキュメントを参照してください。
中央寄せにするとき
使用するのはmargin-inlineです。インライン方向に余白を指定できます。
margin-left: auto; margin-right: auto;と同様の効果があります。
<style>
.box {
width: 200px;
height: 200px;
background: lightblue;
margin-inline: auto;
}
</style>
<div class="box"></div>
アバターとテキストを組み合わせるとき
使用するのはmargin-inline-endです。
アバター画像とテキストが並んでいる状態で、画像横に余白をつけます。
<style>
img {
width: 46px;
height: 46px;
object-fit: cover;
border-radius: 23px;
}
.wrapper {
display: flex;
align-items: center;
}
.avatar {
margin-inline-end: 1rem;
}
</style>
<div class="wrapper">
<img class="avatar" src="https://source.unsplash.com/random" alt="">
<p>Your Name</p>
</div>
これを右から左のレイアウトへ変更します。
...
<div dir="rtl">
<div class="wrapper">
<img class="avatar" src="https://source.unsplash.com/random" alt="">
<p>Your Name</p>
</div>
</div>
論理プロパティはドキュメント方向に依存します。ドキュメント方向が右から左になったことで、余白の方向も変わっていることがわかります。
また、[dir="rtl"] .avatar {}みたいに指定する必要がありません。
縦書きの余白指定をするとき
使用するのはmargin-block-endです。
レスポンシブによって横書きから縦書きにすることがあります。その際、段落同士の余白を取りたい場合に有用です。
まずは横書きで段落ごとに下余白をつけましょう。
<style>
.wrapper {
background: #ccc;
padding: 1rem;
height: 250px;
}
.wrapper p {
margin-block-end: 1em;
}
.wrapper p:last-of-type {
margin-block-end: 0;
}
</style>
<div class="wrapper">
<p>段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１</p>
<p>段落2段落2</p>
<p>段落３段落３段落３</p>
</div>
では縦書きにしてみましょう。
<style>
.wrapper {
writing-mode: vertical-rl;
}
</style>
...
ここでわかるのは、縦書きになってもブロック方向の余白が取れていることです。
本来ブロック方向は垂直方向を示しているのですが、縦書きになることでブロック方向が変わります。
詳しい説明は以下が参考になります。
まとめ
論理プロパティを使用することでより簡潔にスタイリングすることができます。
しかし、扱うプロパティによっては思わぬ方向に余白がつく可能性があります。それぞれの特徴を把握して使用することが大切です。
最後に
GoQSystemでは一緒に働いてくれる仲間を募集中です！
求人は出していませんが、SREやQAエンジニアも今後募集していこうと考えています！
ご興味がある方は以下リンクよりご確認ください。