このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

<position>”値CSS Values and Units Module Level 3 で追加

記事Aug. 24th,2021
位置を指定するCSSの<position>値について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

““<position>”値”とは?

<position>”値は基準となる領域からの相対的な二次元の配置位置を表します。object-position”プロパティmask-position”プロパティなどの値として使用することができます。

<position>”値”はもともとbackground-position”プロパティの値として定義されている<bg-position>”値を汎用的に定義しなおしたものです。

<position>”値は“left”、“center”、“right”、“top”、“bottom”と<length-percentage>”値をホワイトスペース(半角スペース(“ ”)、タブ文字など)で区切って1個、2個もしくは4個記述して位置を表します。

<position>”値の記述方法

値を1つ指定する場合

値が“left”または“right”の場合、その値は水平方向の位置を指定します。垂直方向の位置は“center”とみなされます。

領域の左端、上下中央に配置
left

領域の右端、上下中央に配置
right

値が“top”または“bottom”の場合、その値は垂直方向の位置を指定します。水平方向の位置は“center”とみなされます。

領域の上端、左右中央に配置
top

領域の下端、左右中央に配置
bottom

値が“center”の場合は水平方向と垂直方向の両方の位置を指定します。

領域の中央に配置
center

値を<length-percentage>”値で指定した場合はその値は水平方向の位置を指定します。垂直方向の位置は“center”とみなされます。

上下中央、水平方向には左端から指定した距離に配置
〚水平方向の“<length-percentage>”値〛

値を2つ指定する場合

値を2つ指定する場合には一方の値が水平方向の位置、もう一方の値が垂直方向の位置を指定します。どちらの値がどの方向に対応するかは値の組み合わせによって異なります。

垂直方向の位置と水平方向の位置
〚水平方向の位置〛 〚垂直方向の位置〛

水平方向の位置と垂直方向の位置
〚垂直方向の位置〛 〚水平方向の位置〛

一つ目の値が“left”もしくは“right”の場合、1つ目の値は水平方向の位置を表し、2つ目の値は垂直方向の位置を表します。2つ目の値には“top”、“bottom”、“center”、もしくは<length-percentage>”値を指定できます。

領域の左端、垂直方向には上端から指定した距離に配置
left 〚垂直方向の“<length-percentage>”値〛

領域の右端、垂直方向には上端から指定した距離に配置
right 〚垂直方向の“<length-percentage>”値〛

一つ目の値が“top”もしくは“bottom”の場合、1つ目の値は垂直方向の位置を表し、2つ目の値は水平方向の位置を表します。2つ目の値には“left”、“right”、“center”、もしくは<length-percentage>”値を指定できます。

領域の上端、水平方向には左端から指定した距離に配置
top 〚水平方向の“<length-percentage>”値〛

領域の下端、水平方向には左端から指定した距離に配置
bottom 〚水平方向の“<length-percentage>”値〛

一つ目の値が“center”の場合には二つ目の値に“top”、“bottom”、“left”、“right”、“center”、<length-percentage>”値のいずれも指定できます。

二つ目の値が“top”もしくは“bottom”の場合は“center”は水平方向の位置、二つ目の値が垂直方向の位置を表します。

二つ目の値が“left”、“right、“center”、もしくは<length-percentage>”値の場合は“center”は垂直方向の位置、二つ目の値が水平方向の位置を表します。

垂直方向の位置と水平方向の位置
center 〚水平方向の“<length-percentage>”値〛

水平方向の位置と垂直方向の位置
center 〚垂直方向の“<length-percentage>”値〛

一つ目の値が<length-percentage>”値の場合にも二つ目の値に“top”、“bottom”、“left”、“right”、“center”、<length-percentage>”値のいずれも指定できます。

二つ目の値が“top”もしくは“bottom”、もしくは<length-percentage>”値の場合は一つ目の値は水平方向の位置、二つ目の値が垂直方向の位置を表します。

二つ目の値が“left”、“right、“center”の場合は一つ目の値は垂直方向の位置、二つ目の値が水平方向の位置を表します。

垂直方向の位置と水平方向の位置
〚垂直方向の“<length-percentage>”値〛 〚“left”、“right”もしくは“center”〛

水平方向の位置と垂直方向の位置
〚水平方向の“<length-percentage>”値〛 〚“top”、“left”もしくは“center”〛

値を4つ指定する場合

値が4つの場合、キーワード値とオフセット距離の組が2組です。“top”もしくは“bottom”、“left”もしくは“right”と<length-percentage>”値を組み合わせることでキーワード値からのオフセット距離を指定することができます。

1組は垂直方向の位置を表す“top”もしくは“bottom”と<length-percentage>”値の組み合わせ、もう1組は水平方向の位置を表す“left”もしくは“right”と<length-percentage>”値の組み合わせを指定します。

<length-percentage>”値は、正の値はキーワード値で指定した端から内側へ向けての距離、負の値はキーワード値で指定した端から外側へ向けての距離を表します。

垂直方向の位置と水平方向の位置
〚“top”もしくは“bottom”〛 〚“<length-percentage>”値〛 〚“left”もしくは“right”〛 〚“<length-percentage>”値〛

水平方向の位置と垂直方向の位置
〚“left”もしくは“right”〛 〚“<length-percentage>”値〛 〚“top”もしくは“bottom”〛 〚“<length-percentage>”値〛

値は入れ替えることができますが、オフセット距離はその基準となるキーワード値の次の値として記述する必要があります。

<position>”値の例

中央
center

右下
right bottom

左上からの距離で指定
50px 50px

右下からの距離で指定
right 50px bottom 50px

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告候補(CR) 作業草稿(WD)
<position>
定義なし

定義なし

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク