• Home
  • Web制作
  • 【CSS】margin-inlineとmargin-blockを使いこなそう！縦書きにも対応できる、新時代の余白指定とは

【CSS】margin-inlineとmargin-blockを使いこなそう！縦書きにも対応できる、新時代の余白指定とは

schedule
Tags: CSS

はじめに：margin-inlineとmargin-blockで、CSSの余白指定をもっと簡単に！

Webページを作成する上で、要素間の余白調整は欠かせません。要素の位置関係を綺麗に整え、見やすく読みやすいページを作るためには、適切な余白を設定することが重要です。

CSSでは、marginプロパティを使って要素の余白を指定できます。しかし、margin-top、margin-right、margin-bottom、margin-leftと、方向ごとにプロパティを指定する必要があるため、コードが冗長になりがちです。

そこで登場するのが、margin-inlineとmargin-blockです。これらのプロパティを使うことで、より直感的かつ簡潔に余白を指定できるようになります。

あわせて読みたい
【CSS】padding-inline/padding-blockで効率的な余白調整！従来のプロパティとの違いも解説

1. margin-inlineとmargin-block：従来のプロパティとの違いとは？

従来のmargin-topやmargin-bottomなどのプロパティは、常に要素の上下左右に対して余白を設定します。

一方、margin-inlineとmargin-blockは、文章の進行方向に対して余白を設定します。

  • margin-inline：文章の横方向に対する余白を設定します。横書きの場合は左右、縦書きの場合は上下に余白が設定されます。
  • margin-block：文章の縦方向に対する余白を設定します。横書きの場合は上下、縦書きの場合は左右に余白が設定されます。

つまり、margin-inlineとmargin-blockを使うことで、横書きと縦書きの両方に対応した余白設定が可能になるのです。

2. 具体的な使用例：margin-inlineとmargin-blockで余白を設定してみよう！

2-1. margin-inlineを使った横方向の余白設定

例えば、以下のようなHTMLがあるとします。

<p>テキスト</p>

このテキストの左右に余白を設定したい場合、従来は以下のように記述していました。

p {
  margin-left: 20px;
  margin-right: 20px;
}

margin-inlineを使うと、以下のように記述できます。

p {
  margin-inline: 20px;
}

このように、margin-inlineを使うことで、より簡潔に記述することができます。

2-2. margin-blockを使った縦方向の余白設定

次に、テキストの上下に余白を設定したい場合を見てみましょう。

従来の記述方法：

p {
  margin-top: 30px;
  margin-bottom: 30px;
}

margin-blockを使った記述方法：

p {
  margin-block: 30px;
}

こちらもmargin-blockを使うことで、コードを簡略化できます。

2-3. 縦書きの場合の動作確認

margin-inlineとmargin-blockの大きな特徴は、縦書きにも対応している点です。

例えば、以下のようにwriting-modeプロパティで縦書きを指定した場合、margin-inlineは上下に、margin-blockは左右に余白が設定されます。

p {
  writing-mode: vertical-rl; 
  margin-inline: 20px; 
  margin-block: 30px; 
}

まとめ：margin-inlineとmargin-blockで、CSSコーディングをもっと効率的に！

margin-inlineとmargin-blockは、従来のmarginプロパティと比べて、より直感的かつ簡潔に余白を指定できるプロパティです。特に、横書きと縦書きの両方に対応する必要がある場合に非常に便利です。

これらのプロパティを活用して、CSSコーディングをより効率的に行いましょう。

関連記事