CSS

CSS の position-area プロパティで、アンカー要素基準の配置をしてみよう

著書 「できるポケット HTML&CSS 全事典 改訂 4 版」 発売日直前ということで、前書から追加・変更された点を紹介する企画。CSS の新しいプロパティ、position-area プロパティについて知っていました？ というお話を。position-area プロパティは、アンカー要素を基準に、グリッドの概念を使って要素を配置できる便利なプロパティです。

公開日
更新日

いよいよ明日 （2024 年 12 月 24 日） は 「できるポケット HTML&CSS 全事典 改訂 4 版」 の発売日なのですが、発売日直前ということで、今回の改訂で前書 （改訂 3 版） 執筆時から仕様が変更されたり、ブラウザのサポートが進んだりした関係で、最新版 （改訂 4 版） で修正したり、加筆した部分について、そのいくつかを紹介してみようと思います。

この記事では、CSS の新しいプロパティ、position-area プロパティについて知っていました？ というお話を。position-area プロパティは、アンカーボックスを中心とした、3×3 のグリッドを想定して、そのグリッドに対してどのようにボックスを配置するかを指定するためのプロパティです。

position-area プロパティを使用することで、アンカー要素に対する配置を、直感的に設定することが可能になります。

そもそも、『「アンカー要素」 基準で要素を配置する』 という概念自体がここ最近、ブラウザのサポートが進んだ領域で、「アンカー要素？」 という方もいると思いますので、その辺もあわせて簡単に触れてみたいと思います。

なお、書籍については下記をご参照ください。

いきなりですがお詫び

この position-area プロパティ、当然ながら 「できるポケット HTML&CSS 全事典 改訂 4 版」 にも掲載しています。

ですが、このプロパティ、とにかくプロパティに指定可能な値が多いのと、その値だけを単に羅列してもまぁわかりにくい。そこで本当は、図版も沢山載せて、「こういう指定をすると、こういう配置になりますよ」 という感じのビジュアライズされた説明にしたかったのですが、それをやろうと思ったら、このプロパティだけで 4、5 ページくらい使ってしまいそうな勢い。

今回の改訂ではとにかくページ数の制約に悩まされたわけですが、さすがに 1 つのプロパティに 4 ページも 5 ページも使っていたらページがいくらあっても足りませんということで、今回は仕方なく、指定可能な値を羅列するのみで、その値を指定すると具体的にどういう配置になるのか、という説明が全くできませんでした。本当に申し訳ない。

その代わりといってはなんなんですが、以下に、position-area プロパティで指定可能な値をプルダウンメニューから選択することで、要素がどういう風に配置されるかを確認できるツールを簡単に作りましたので、まずはお詫びがてらにそれを紹介しておきます。

あと、本来書籍に載せようとしていた、図版による説明の元ネタは、私が管理している CSS リファレンスに掲載していますのでそちらもあわせてご覧ください。

本当は上記ページに掲載されている各配置例の画像を書籍用に作り直して掲載してもらおうと思っていたのですが、「ページが足らん。諦めろ」 というお達しにより、泣く泣く諦めた次第です。まぁ薄々、この分量は全部載せるの無理だろうなとは思っていたのですが思った通りになってしまった。

実際の紙面は下記の通り。「配置エリア」 となっている値が大量にありまして。ここで掲載しているのは最初の 1 ページですが、このプロパティの項目、見開きで 2 ページになっており、右側のページは指定できる値がばーっと掲載されています。

できるポケット HTML&CSS 全事典 改訂 4 版 706ページ CSS position-area プロパティの項目 紙面

さすがに値だけ羅列されてもわかりにくいですよね。本当に申し訳ない。先に挙げたツール等で実際に値を選択して、どういう風に配置されるか確認してみてください。

アンカー要素を基準に配置する

CSS で要素の配置というと、例えば position: absolute; などとして、left、top のようなプロパティ、あるいは inset プロパティと組み合わせて要素を配置する、といった方法はすぐに思い浮かぶ方も多いと思います。

このような配置の場合、どこを基準に位置指定された要素が配置されるかというと、（細かい話は抜きにして） 例えばビューポートの上下左右の辺だったり、直近で position: static; 以外が指定された先祖要素があればそのボックスの辺が使用されるわけですが、「CSS Anchor Positioning」 仕様で追加されたプロパティを使用することで、この配置の基準を、「指定した要素 （この要素を 「アンカー要素」 と呼びます）」 のボックスにすることが可能です。

例えば下記のように2つの要素があったとします。

<div class="anchor">
  アンカーとする要素
</div>
<div class="content">
  アンカーを参照して配置したい要素
</div>

それぞれの要素に下記のようにスタイルを指定します。

.anchor {
  anchor-name: --exampleAnchor; /* アンカー要素として宣言 */
}

.content {
  position-anchor: --exampleAnchor; /* アンカー要素を参照 */
  position: absolute;
  inset: 0 20px 20px 0; /* この指定は、アンカー要素のボックスを基準に計算される */
}

これで、div.anchor をアンカー要素として宣言し、div.content は、このアンカー要素がもつ主要ボックスを基準として、inset プロパティの指定に応じた配置がされます。

例えば 「あのロゴの右上にこの要素を配置したいな」 という場合でも、その 「ロゴ」 がある要素をアンカー要素に指定しておいて、「その右上」 のような指定ができるため、かなり簡単に配置の位置決めが可能になります。つまり、配置する要素や、その祖先要素の記述位置、配置がサイズが...... みたいなことをあまり気にする必要がなくなるということですね。

position-area プロパティ登場

ここで登場するのが position-area プロパティ。先ほどの例では、inset プロパティを使用して配置したが、これを冒頭に書いたとおり、アンカー要素のボックスを中心とした、3×3 のグリッドを想定して、そのグリッドに対してどのようにボックスを配置するかを指定するためのプロパティです。

position-area プロパティは、グリッドに対してどのように配置を行うかを、あらかじめ定義されたキーワード値で指定します。値は1つ、もしくは X 軸、Y 軸に対応する値を組み合わせて 2 つまで指定することができます。

例えば、下記は position-area プロパティに、top left など、垂直方向（Y）の軸、水平方向（X）の軸、それぞれの値を組み合わせて指定した場合の配置例ですが、他にも様々なキーワードの組み合わせが可能で、それによって簡単に要素の配置を決めることができます。

CSS の position-area プロパティで、top left など、垂直方向（Y）の軸、水平方向（X）の軸、それぞれの値を組み合わせて指定した場合の配置例

ちなみに、position-area プロパティは、書籍発売時点で、Safari、Firefox がまだサポートしていません。今回の書籍に掲載する項目の選定基準としては、主要ブラウザでサポートの足並みが揃っているものから優先的に、だったのですが、便利だし、今後ブラウザサポートの足並みがそろうことを見越して掲載しておこうという判断をしました。

ということで、現時点で最新の仕様に基づいて改訂された 「できるポケット HTML&CSS 全事典 改訂 4 版」 は、2024 年 12 月 24 日発売。現在予約受付中ですので、もし気になった方はチェックしてみていただければ幸いです。

ご購入（ご予約）はこちらから

Amazon をはじめ、下記のオンラインショップでも予約できるようなのでリンクを掲載しておきます。その他、全国の書店さんでも注文可能だと思いますのでお近くの書店さんにご確認ください。

学校や会社でご購入いただく皆さまへ

学校で HTML や CSS をカリキュラムとして教えていらっしゃる講師の方、あるいは教科書採用のご担当者様、または Web サイト制作会社など、日常的に HTML / CSS を扱う会社の福利厚生の一環としてなど、一括購入のご予定がございましたら、下記の窓口から一度お問い合わせいただければと思います。

関連エントリー

記事をここまで御覧頂きありがとうございます。
この記事が気に入ったらサポートしてみませんか？

Ofuse でおやつをおごる

関連記事