writing-modeとpointer-events、2026年5月のWebプラットフォームが示す「表現の純度」
2026年5月、Webプラットフォームに複数の機能が追加された。その中で、あえてwriting-modeとpointer-eventsという「古典的」なCSSプロパティに注目したい。理由は明確だ。これらが「Baseline」として広く安定したことで、開発者はJavaScriptを介さずにレイアウトとインタラクションの細部を制御できるようになった。特に多言語対応やカスタムUI部品の設計において、CSSだけで完結する領域が確実に広がった。
vertical writingとグローバルデザインの現実
writing-modeは、日本語や中国語の縦書きレイアウトでは必須のプロパティ。しかし2026年現在、このプロパティの真価は「縦書きを実現する」以上のものにある。例えばwriting-mode: vertical-rlを設定した要素内で、text-combine-uprightと組み合わせると、漢字二字を一文字サイズに圧縮して表示できる。これまで同様の効果を得るにはcanvasやSVGを併用する必要があった。
重要なのは、こうした制御がスタイルシートだけで完結するという点だ。動的なコンテンツ管理システム（CMS）からの出力であっても、マークアップを汚さずに字形を制御できる。結果として、日本語や縦書き文化圏向けのサイト構築において、フロントエンドの工数が削減される。
Baselineに含まれた意味
2026年4月のBaseline digestで、writing-modeは「広く安定した機能」としてリストされた。これはSafari 18.4、Firefox 138、Chrome 131以降で完全に一致した挙動を取ることを意味する。かつてInternet Explorer由来の実装差異に頭を悩ませた開発者にとって、この「どのブラウザでも同じ見た目になる」保証は、縦書きを標準レイアウトとして採用する判断を後押しする。
pointer-eventsとレイヤー設計の転換
pointer-eventsは「クリック領域の制御」という単純な機能に見えるが、2026年のUI設計ではこのプロパティがCSSレイヤー戦略の核になる。例えばpointer-events: noneをオーバーレイ要素に指定すると、背面の要素へのクリックを通す「穴あきカバー」が実現できる。従来はz-indexの調整やJavaScriptのイベント伝播制御が必要だった。
さらに注目すべきは、pointer-eventsの応用範囲が広がったことだ。グラスモーフィズム風UIで透けている部分だけマウス操作を透過させる、スクロールシューティングゲームのタッチ判定をCSSだけで行う――こうした実装が単一プロパティで可能になる。
「CSSで閉じる」ことのコスト削減効果
pointer-eventsを活用すれば、JavaScript側でイベントリスナーを張る数が減る。各フレームでevent.targetを確認する処理を削減でき、結果としてメインレンダリングスレッドの負荷が下がる。特にシングルページアプリケーション（SPA）で大量のインタラクション要素を抱える場合、この差は顕著になる。
ただし注意すべき落とし穴もある。pointer-events: noneを親要素に設定すると、子要素のクリックもすべて無効になる。部分的な透過を実現したい場合は、子要素ごとにプロパティを再設定する手間が発生する。この点はCSSの継承モデルを理解した上で設計に組み込む必要がある。
なぜ今、この2つのプロパティなのか
2026年5月のアップデートでは、random()やGap Decorationsといった派手な機能が注目を集めた。だが、writing-modeとpointer-eventsが示唆するのは「宣言的なスタイル記述だけで、ブラウザ上で完結する表現の純度」だ。JavaScriptで動的にスタイルを書き換える手法から、CSSセレクタとプロパティだけで状態を管理する手法へのシフトが、確実に進んでいる。
特にAIが生成するUIコンポーネントをそのままブラウザに描画するユースケースでは、CSSの自律性が重要になる。AIが出力したHTML/CSSだけを検証すれば済む環境は、テスト工程の自動化をさらに加速させる。
次の一手として、開発者はwriting-modeとpointer-eventsを組み合わせたパターンライブラリを整備すべきだ。たとえば縦書きメニューで、親要素のクリックだけを透過し子要素は反応させる――こうした設計パターンを事前にコンポーネント化しておけば、新規UIの実装時間が半減する。
参照
この記事を書いた人
理人と理子
ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！