CSS Property
Overview
CSSプロパティの役割、設定方法、仕組みについて記載するセクション。
mdn web docsではModuleとして記載があり、各プロパティについてカテゴリで分けられている。
継承されるプロパティ
CSSでは、デフォルトで継承されるプロパティと、継承されないプロパティがある。
デフォルトで継承されるプロパティは、子要素が特に指定しなくても親要素から自動的に値を受け継ぐプロパティ。
以下は、代表的なデフォルトで継承されるプロパティ。
- テキスト関連
color
: テキストの色font-family
: フォントファミリーfont-size
: フォントサイズfont-style
: フォントスタイル(例: italic)font-variant
: フォントバリアント(例: small-caps)font-weight
: フォントの太さletter-spacing
: 文字間のスペースline-height
: 行の高さtext-align
: テキストの整列方法(例: left, center)text-indent
: テキストのインデントtext-transform
: テキストの大文字と小文字変換(例: uppercase)visibility
: 表示・非表示の制御white-space
: 空白の処理方法word-spacing
: 単語間のスペース
- リスト関連
list-style
: リストマーカーの種類や位置
- 要素のコンテンツの装飾
quotes
: 引用符のスタイルcursor
: カー ソルの表示方法
継承されないプロパティ
一方、以下のプロパティはデフォルトでは継承されないが、inherit
キーワードを使用することで明示的に継承させることができる。
- ボックスモデル関連
margin
: 外側の余白padding
: 内側の余白border
: ボーダーのスタイルや幅width
,height
: 要素の幅と高さbox-shadow
: ボックスシャドウ
- 背景関連
background-color
: 背景色background-image
: 背景画像background-position
: 背景画像の位置background-size
: 背景画像のサイズbackground-repeat
: 背景画像の繰り返し方法
- 表示関連
display
: 要素の表示方法(例: block, inline)position
: 要素の位置指定方法(例: relative, absolute)top
,right
,bottom
,left
: 要素の位置float
: 要素のフロート(左寄せ、右寄せ)clear
: フロート解除
- その他のレイアウト関連
overflow
: コンテンツがはみ出したときの表示方法z-index
: 要素のスタッキング順序opacity
: 透明度
物理プロパティと論理プロパティ
Logical Properties(論理プロパティ)は、CSSのプロパティの一種で、要素のコンテナへ対して物理的な方向に依存せず指定できるプロパティ
通常、CSSでは物理的な方向(水平方向や垂直方向)に依存するプロパティが使われる。
たとえば、margin-left
は左側のマージン、padding-top
は上側のパディングを指定します。
しかし、テキストの流れる方向(LTR(左から右)またはRTL(右から左))に応じて要素のレイアウトを調整する必要がある場合や、グリッドやフレックスボックスのような柔軟なレイアウトを作成する場合には、物理的な方向に依存しないプロパティが必要となる。
Logical Propertiesは、このような要件に対応するために導入された。
論理プロパティと物理プロパティは、CSSにおけるプロパティの分類の一種で、特にレイアウトやデザインの柔軟性に関連しています。それぞれの違いについて記載。
Webサイトを i18n
を用いてlocale対応しているサイトだと、必須の知識。
CSSのボックスモデルにおける古い方法とこれからの方法 -論理プロパティにおける考え方
- 適用方向の固定性