【CSS】物理プロパティと論理プロパティ

どうも、くまだです。

物理プロパティと論理プロパティについてのあれこれ。

物理プロパティと論理プロパティ

物理プロパティと論理プロパティってそもそも何ぞや、という話からですが、

物理プロパティは、おそらくコーディングする人の多くが使用しているものとを思われる、marginやpadding、widthやheightなどのプロパティです。書字方向に関わらず、上下左右の方向に沿ってスタイルが適用されるイメージです。

margin-topなら上にマージンが、padding-leftなら左にパディングが、という感じです。

論理プロパティの場合、書字方向に応じて(要素の状態に応じて)論理的に方向を指定できるプロパティになります。

例えば、普通のmarginで中央寄せする場合との違いは、例えば以下のような縦書きのとき、

    <p class="text">南十字へ着きますのは、ある裏町の小さな家でした。ごとごと鳴る汽車のひびきと、すすきの風との間にいっぱい日光を吸った金剛石のようになったみじかい芝草の中に入れるのでした。二人がそのあかしの前を通って行きました。この前お父さんが持ってきてあげましょうか、と言ったら眼がさめたというふうでした。すると、向こうの河岸に二本の電信ばしらが、ちょうどさっきのような小さな青い火が見える</p>
    
    <p class="text2">南十字へ着きますのは、ある裏町の小さな家でした。ごとごと鳴る汽車のひびきと、すすきの風との間にいっぱい日光を吸った金剛石のようになったみじかい芝草の中に入れるのでした。二人がそのあかしの前を通って行きました。この前お父さんが持ってきてあげましょうか、と言ったら眼がさめたというふうでした。すると、向こうの河岸に二本の電信ばしらが、ちょうどさっきのような小さな青い火が見える</p>
   


.text {
  writing-mode: vertical-rl;
  max-width: 300px;
  margin-inline: 100px 200px;

}


.text2 {
  writing-mode: vertical-rl;
  max-width: 300px;
  margin-right: 100px;
  margin-left: 200px;
}
.text {
  writing-mode: vertical-rl;
  width: 100%;
  max-width: 300px;
  margin-inline: 50px 50px;

}


.text2 {
  writing-mode: vertical-rl;
  width: 100%;
  max-width: 300px;
  margin-right: 50px;
  margin-left: 50px;
}

〇 margin-inlineの場合

〇 普通のmarginの場合

こんな感じで、縦書きの場合margin-inlineは上下方向に余白、通常のmarginは左右に余白が付きます。もちろん、縦書きでない普通の横書きの場合でmargin-inlineを使用すれば、左右に余白が付くようになります。

論理プロパティはいろいろあるんですが、おおざっぱに覚えるなら、

  • ○○-inlineならテキストの方向に対して、水平方向
  • ○○-blockならテキストの方向に対して、垂直方向

という感じです。さらに、それぞれの方向の起点と終点も、

  • ○○-inline-startなら起点、○○-inline-endなら終点
  • ○○-block-startなら起点、○○-block-endなら終点

のようなイメージで指定できます。

物理プロパティに対する論理プロパティ

〇 widthとheight系

物理プロパティ論理プロパティ
widthinline-size
max-widthmax-inline-size
min-widthmin-inline-size
heightblock-size
max-heightmax-block-size
min-heightmin-block-size

〇 margin系

物理プロパティ論理プロパティ
margin-topmargin-block-start
margin-bottommargin-block-end
margin-leftmargin-inline-start
margin-rightmargin-inline-end
margin-topとmargin-bottommargin-block
margin-leftとmargin-rightmargin-inline

〇 padding系

物理プロパティ論理プロパティ
padding-toppadding-block-start
padding-bottompadding-block-end
padding-leftpadding-inline-start
padding-rightpadding-inline-end
padding-topとpadding-bottompadding-block
padding-leftとpadding-rightpadding-inline

〇 position系

物理プロパティ論理プロパティ
topinset-block-start
bottominset-block-end
leftinset-inline-start
rightinset-inline-end
topとbottominset-block
leftとrightinset-inline

〇 border系

物理プロパティ論理プロパティ
border-topborder-block-start
border-bottomborder-block-end
border-leftborder-inline-start
border-rightborder-inline-end
border-topとborder-bottomborder-block
border-leftとborder-rightborder-inline

〇 border-radius系

物理プロパティ論理プロパティ
border-top-left-radiusborder-start-start-radius
border-top-right-radiusborder-start-end-radius
border-bottom-left-radiusborder-end-start-radius
border-bottom-right-radiusborder-end-end-radius

などなど。その他にもいろいろあります。

プロパティいっぱいありすぎて大変…笑

ここまで読んでくださりありがとうございました。

この記事を書いた人