Front End Programming
  1. ホーム
  2. ブログ一覧
  3. 次世代CSSは論理プロパティ!margin-block、margin-inlineを徹底解剖!

次世代CSSは論理プロパティ!margin-block、margin-inlineを徹底解剖!

CSS

CSSのプロパティの進化、めまぐるしいですね。Webサイトの多言語化で文字の縦書き横書きなどでWebサイトのCSSをたくさん作るのは面倒!そこで今回は次世代の余白の考え方、margin-block、margin-inlineを徹底解剖してみます!

この記事を書いた人

かみーゆ/フロントエンドエンジニア

セブ島在住の気ままなフリーランスエンジニア。テクニカルディレクター・エンジニア講師・ブリッジSEを経て今に至る。CMS concrete5エバンジェリスト。テックブログ以外も「磨耗しない人生の選択」や「海外生活」のライフスタイルについて発信。好きなものは肉とビール。

Read More

わりと難しいのでmarginとpaddingのおさらい

まずはmarginpaddingのおさらいから。

HTMLでは要素に対して内側と外側に余白を持たせることができます。

ボックスモデル

長年エンジニア講師をやってましたが、初学者の方は大抵ここで混乱してコケます

なのでかなーり噛み砕いて説明します。

人間と洋服サイズ感に例えてみます。人間がHTML要素だと思ってください。

marginはソーシャルディスタンス?みたいなもの

隣の人とぴったり並んでたら窮屈ですよね。なので少し距離をおきます。

marginはソーシャルディスタンス

HTMLでは要素と要素の距離をmarginと言います。イラストでは横方向ですが縦方向にももちろん取れます。

marginのおもしろい(もしくはさらに混乱する)ところは縦方向の余白は少ない方の値が相殺されます。

折りたたみマージン

これを折りたたみマージンと言います。ちなみに横方向では相殺されません。

さらに詳しく知りたい方はこちらをお読みください。

CSSの変な仕様あるあるを力一杯列挙してみた
CSSの変な仕様あるあるを力一杯列挙してみた

CSSってムズくないですか?マジで。多分初心者がつまづくであろう、なんでこーなるの?!をまと・・

ちなみにコロナ禍のフィリピンでは人と人とのmargin2メートルとやや広めですが、誰一人守ってないです。 折りたたまれてますね。

paddingはお洋服の体に対するサイズ。ぴったりしているか、ゆったりしているか

洋服もぴったりしていると体の線が出て恥ずかしかったり、逆にぶかぶかすぎたら不格好だったりしますよね?

逆にぶかぶかすぎたら不格好だったりします

HTMLではpaddingプロパティを使って内側の余白を調整します。

要素のサイズや内包するコンテンツによって調整します。

おまけ・borderは洋服の厚みなど

季節に応じて、洋服の素材や厚みを変えますよね?

HTML要素ではこれがborderbackgroundに当たります。

レスポンシブ世代のコーディングはpaddingもborderも内側に含めましょう!

現在、コーディングはレスポンシブが主流です。

paddingborderも何も設定しなければ外側に設定されます。

それを防ぐために必ずbox-sizingプロパティを使って内側へ含めるようにしておきましょう。

box-sizing: border-box;

本題・論理プロパティとは?

論理プロパティとは使用する言語の種類(英語・アラビア語・日本語など)に関係なく、最小限のスタイルの変更で、Webサイトを制御できます。

今までのmarginpadding物理プロパティといって要素がどう並ぼうが上下左右に値を設定できました。

<div></div>

余白と要素

div {
  background: #333;
  width: 100px;
  height: 100px;
  margin-left: 30px;
}

左など余白をセットしたい場所を指定したら位置が変わることはありません。

margin-blockを使ってみる

理論プロパティでmarginを設定すると要素の書字方向やテキストの向きに応じて物理的な余白に変換されます。

プロパティmargin-blockを使ってみます。余白は要素の先頭と末尾というイメージで設定できます。

ブロック方向・文字の並ぶ方向

上図の通り、文字方向が英語と同じ場合は通常通り上が先頭、下が末尾になります。日本語と同じ場合は右が先頭で左が末尾です。

余白と要素

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で論理的なインライン方向の先頭と末尾のマージンを設定できます。

インラインの軸・文字の並ぶ方向

div {
  background: #333;
  width: 100px;
  height: 100px;
  margin-inline: 50px 30px;
}

margin-inline 開発者ツール


  • 内側の余白を設定したいときはpadding-inlineプロパティを使えます。使い方はmargin-inlineと一緒です。

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;
}

物理プロパティと理論プロパティの比較

文字方向を変えてみる

では、writing-modeを使って文字方向を変えてみます。 日本語のように文字の方向を右から左にします。

.new div {
  writing-mode: vertical-rl;
  margin-block: 30px;
  margin-inline: 100px;
}

文字の向き(縦書き横書き等)に左右されるので余白の位置が左右・上下変わります。

物理プロパティと理論プロパティの比較

日本といえば美しい縦書きを実装したい!論理プロパティの使いどころを考えてみた

最近縦書きの実装が増えているので、縦書きでの実装を試してみました。

縦書きでコンテンツをセンタリングする際ブラウザFirefoxでバグがあります(IEはもうバグ対応にすら入れてません)。

ちなみに「margin-block使ったらイケるかなー」と淡い期待を持ってやってみたのですがダメでした。

縦書きの実装

<div class="vertical">
  <p>「銀ねこアトリエ」へようこそ。
  セブ島に住むフロントエンドエンジニア・かみーゆの気ままな日記です。<br>
  フロント技術を中心とした「ウェブ制作に関するチップス」、「磨耗しない人生の選択」や「海外生活」のライフスタイルについても発信しています。<br>
  ぜひ、「銀ねこアトリエ」を楽しんでください!</p>
</div>

ちなみにSafariの場合、ショートハンドが使えないのでコードが長くなります。。。

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);
}

縦書きサンプル | CodePen

実務レベルとして使うためには、まだまだかなーという印象でした。

ちなみにcaiuseでの実装状況です。

ChromeとFirefox以外ショートハンドはまだ実装されていません。

ちなみにcaiuseでの実装状況

補足しておくと値は以下のように値は指定できます。

ちなみにcaiuseでの実装状況

おまけ・Firefoxで縦書きを実装

Firefoxで縦書きコンテンツの入った要素をセンタリングするためには、以下のコードで実装しましょう。

  height: 任意のサイズ;
  margin-block-start: 50%;
  transform: translateX(-50%);

もしくは通常の物理プロパティで書くと

  height: 任意のサイズ;
  margin-left: 50%;
  transform: translateX(-50%);

まとめ・多言語サイトでは役に立ちそう!

前から気になっていたので今回は理論プロパティ・margi-blockmargin-inlineについて掘り下げてみました。

まだまだ日本語での資料が少なかったのでとりあえず検証はしてみました。

結論多言語サイトで使えそうだけどまだまだ先かなーってイメージでした。

最後までお読みいただきありがとうございました。

参考

おなじみMDNお合わせて読むと理解が深まると思います。

さらに掘り下げて知りたい方はcolisさんのサイトをご覧ください。

CSS知っておくと便利な論理プロパティ、ボックスモデルにおける古い方法とこれからの方法

関連記事もあわせてお読みください

Web制作に関する人気の記事

海外移住・ライフスタイルに関する人気の記事

キャリアアップ・転職に関する人気の記事