CSSでは、位置や寸法を平面の座標系を基準に指定します。ポジショニングにより座標系の取り方は変動しますが、座標のX軸は水平方向に左から右、Y軸は垂直方向に上から下に向かうことはいつでも一緒です。
このような座標系において、辺がX軸とY軸に平行な矩形（四角形）を考えます。矩形を指定するにはどのようなデータを使うでしょうか？
矩形の左上の頂点と幅（X方向の寸法）と高さ（Y方向の寸法）を指定すればいいですよね。左上の頂点の座標を (x, y)、幅と高さを (w, h) とすれば、合わせて ((x, y), (w, h))、 あるいはフラットにして (x, y, w, h) となります。x, y, w, hを、CSSでよく使われる名前に置き換えるなら、(left, top, width, height) です。
もうひとつの指定方法として、矩形の左上の頂点と右下の頂点の座標で示すこともできます。
| X座標 | Y座標 | |
| 左上 | left | top |
| 右下 | right | bottom |
((left, top), (right, bottom))、または (left, top, right, bottom) と書けるでしょう。
さて、CSSでクリップ領域の指定などに使われるrect()なんですが、
- rect(top, right, bottom, left)
と、こんな順序で矩形を指定するんですよ。(left, top, right, bottom) が自然な順序だと思っている僕からすると、この順序は意味不明です。自然な順序に対して「たすき掛け」してます。
left(4) top(1) ＼／ ／＼ right(2) bottom(3)
わざと覚えにくいようにイヤガラセしてるとしか思えないのですが。この順序になんか理由があるのでしょうか？
