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のボックスモデルにおける古い方法とこれからの方法 -論理プロパティにおける考え方
- 適用方向の固定性
- 物理プロパティは常に特定の物理的方向に影響を与える。
- 一方、 論理プロパティは書字方向に応じて動的に変わる。
- 柔軟性
- 論理プロパティは、国際化対応や複数の言語設定をサポートするデザインにおいて、より柔軟で適応性がある。
この違いを理解することで、より適切にCSSを使用し、グローバルなユーザーベースに対応した柔軟なデザインを作成できる。
物理プロパティ(Physical Properties)
物理プロパティは、具体的な方向(上、下、左、右)に基づいて要素のスタイルを定義する。
これらのプロパティは、ページの方向に関係なく常に同じ方向を指す。
-
左から右 (LTR)
-
右から左 (RTL)
-
margin-top
,margin-right
,margin-bottom
,margin-left
-
padding-top
,padding-right
,padding-bottom
,padding-left
-
border-top
,border-right
,border-bottom
,border-left
これらのプロパティは、ページがどの言語設定であっても、常に物理的な位置に影響を与える。
.element {
margin-right: 20px;
}
論理プロパティ (Logical Properties)
論理プロパティは、要素のスタイルを文書の書字方向に基づいて定義します。これにより、左から右 (LTR) か 右から左 (RTL) かに関わらず、プロパティが動的に適用されます。
margin-block-start
,margin-block-end
margin-inline-start
,margin-inline-end
padding-block-start
,padding-block-end
padding-inline-start
,padding-inline-end
border-block-start
,border-block-end
border-inline-start
,border-inline-end
これらのプロパティは、ページの方向に依存してスタイルを適用するため、レイアウトの柔軟性が向上します。
.element {
margin-inline-start: 20px;
}
CSS代表的なプロパティのカテゴリ
CSSにはさまざまなプロパティの種類があり、それぞれが特定の役割を持っている。
以下に、いくつかの代表的なプロパティのカテゴリを説明する。
mdn web docs Modules
CSS3プロパティ一覧
※mdn web docsではModuleとして記載があり、各プロパティについてカテゴリで分けられている。
1. レイアウト関連プロパティ
要素の配置や表示方法を決定する。
display
position
float``clear
z-index
2. ボックスモデル関連プロパティ
要素の大きさや内外のスペース、ボーダーなどを設定する。
width
height
margin
padding
border
box-sizing
3. 背景と境界線関連プロパティ
要素の背景や境界線のスタイルを設定します。
background-color
background-image
background-position
border-radius
4. タイポグラフィ(文字)関連プロパティ
テキストのフォントや色、文字のスタイルなどを設定します。
font-family
font-size
font-weight
line-height
text-align
color
5. フレックスボックス関連プロパティ
フレックスボックスを使ったレイアウトを構築します。
display: flex
justify-content
align-items
flex-wrap
flex-direction
6. グリッドレイアウト関連プロパティ
CSS Gridを使って2次元のレイアウトを構築します。
display: grid
grid-template-columns
grid-template-rows
grid-gap
7. トランジションとアニメーション関連プロパティ
要素に対してアニメーションやトランジション効果を追加します。
transition
animation
transition-duration
animation-name
8. トランスフォーム関連プロパティ
要素を回転、拡大・縮小、移動など、2D・3Dで変形します。
transform
transform-origin
rotate
scale
9. フィルター関連プロパティ
要素に対して視覚効果を適用します。
filter
blur
brightness
contrast
10. 計算関連関数
値を計算するために使う関数で、動的なレイアウト調整に役立ちます。
calc()
min()
max()
clamp()
11. カスタムプロパティ(CSS変数)
CSS内で再利用可能な値を定義して使用します。
--my-color
var(--my-color)
12. レスポンシブデザイン関連プロパティ
デバイスや画面サイズに応じてスタイルを変更します。
media queries
@media
vw
vh
代表的なプロパティで補足するもの
レイアウト関連プロパティ
ボックスモデル関連プロパティ
width
- 100%とautoの違い
【width:auto】の場合は、左右の余白 10px を含んで横幅 100%になります。 【width:100%】の場合は、左右の余白 10px を含まずに横幅 100%になるため、実際の横幅は 100%+20px(左右の余白分)になります。 たとえばPC版のコーディングから行うとして、widthをpx指定したときなどはブレイクポイントを設けてSP版用に幅を上書きする。 この流れはよくある。共に、親要素の幅に合わせるとういう意味では同じですが、paddingやborderを指定する場合にちょっと違ってきます。
MediaQueriesをつかってwidthを上書きする場合はこちらが便利です。
width autoだとflexのjustifyがきく
どんなシーンで使えるか 画像を例にすれば、ページいっぱいの背景画像などでしょうか。モバイル端末は向きによってタテ・ヨコの長さが変わるので、JavaScript で向きの判定処理をして動的にサイズを調整するといったことを自前で作る必要がなくなるかと思います。
vw(viewport width) ビューポートの幅に対する割合 vh(viewport height) ビューポ ートの高さに対する割合 vmin(viewport minimum) ビューポートの幅と高さのうち、値が小さい方に対する割合 vmax(viewport max) ビューポートの幅と高さのうち、値が大きい方に対する割合
背景と境界線関連プロパティ
linear-gradient()
liner-gradient()はCSSの関数で、2つ以上の色の連続的な直線に沿った変化から構成される画像を生成する
結果は
<gradient>
データ型のオブジェクトであり、これは<image>
の特殊型です。
/* 45度に傾いたグラデーションで、
青から始まり赤で終わる */
linear-gradient(45deg, blue, red);
/* 右下から左上に向かうグラデーションで、
青から始まり赤で終わる */
linear-gradient(to left top, blue, red);
タイポグラフィ(文字)関連プロパティ
フレックスボックス関連プロパティ
グリッドレイアウト関連プロパティ
トランジションとアニメーショ ン関連プロパティ
トランスフォーム関連プロパティ
フィルター関連プロパティ
計算関連関数
カスタムプロパティ(CSS変数)
レスポンシブデザイン関連プロパティ
vw, vh, vmin, vmaxについて
vw
4vw
はビューポートの幅を基準としています。ビューポートとは、ブラウザの表示領域のこと。
vw
(viewport width)は、ビューポートの幅に対する割合を表す単位。
ビューポートの幅を100とした場合、1vw
はビューポートの幅の1%に相当します。同様に、4vw
はビューポートの幅の4%を意味します。
つまり、4vw
の値を持つパディングは、ビューポートの幅に対して可変的に変化します。ビューポートが広い場合、パディングも広くなります。ビューポートが狭い場合、パディングも狭くなります。
たとえば、ビューポートの幅が800pxの場合、4vw
の値は 0.04 * 800 = 32px
となります。したがって、パディングは32pxとなります。
このようにして、ビューポートの幅に応じて要素のパディングが自動的に調 整されるため、レスポンシブなデザインが実現できます。
scroll-snap
参考URL 画面領域いっぱいにセクションが広がって、スクロールすると画面にキレイにピタッと止まってくれる、 このような処理を実装するためにはいままでJSが必要だったがscroll-snapを使えばCSSだけで簡単に実装ができる。
- 基本的な実装方法 親要素にscroll-snap-type: mandatory;を指定する 子要素にscroll-snap-align: start;を指定する widthやheightで幅の指定をする 親要素にoverflow: scroll;を指定
※幅の指定やoverflow: scroll;を指定していないと、動かないときがあります。 scroll-snapの指定をしているはずなのにちゃんと機能しない場合は、この辺りを疑うようにしましょう。
- scroll-snap-type
親要素に指定するscroll-snap-typeでは、「スクロールの方向」「スクロール調整の強さ」を指定します。 スクロールの方向はx・y・bothの3種類があり、それぞれ横方向・縦方向・両方(省略可)にスクロールしたときにくっつくようになります。 スクロール調整の強さはmandatoryとproximityの2種類があります。 mandatoryを使う場合は、必ずスナップ位置にスクロールするようになります。 逆にproximityの場合は境界線に近づくとピタッとくっつきますが、境界線との距離が遠い場合はくっつかなくなります。
- scroll-snap-align
gap プロパティ
CSSのgapプロパティは余白を指定できる新しい手法 余白といえば、marginプロパティやpaddingプロパティを思い浮かべる方が多いがCSS gridやFlexboxでgapプロパティを使うと柔軟にレイアウトを組める。
text-align:center;
インライン要素を中央寄せする。 ※親をインライン要素にすると中央寄せできなくなる。
margin: auto;
marginに指定するautoは余白を自動で調整してくれるプロパティになる。
基本的にブロック要素は指定がないと親要素の100%の大きさになります。 親要素と同じ大きさであれば、たとえmargin 0 autoを指定していたとしても左右中央寄せになりません。 そのため指定する際はwidthプロパティで横幅を指定するようにしましょう。