writing-modeとpointer-events：2026年、CSSの「自由度」を本質的に押し上げる2つの基盤機能
縦書きとポインター制御：2026年、CSSが再定義する「自由」
2026年5月のWebプラットフォームアップデートで、writing-mode と pointer-events がBaseline 2026に加わった。この2つはCSSの古典的なプロパティだが、Baselineへの収録は単なる互換性の確認ではない。開発者は「使える」から「頼れる」へと認識を切り替える必要がある。
特に、縦書きレイアウトとポインターイベントの制御は、従来の横書き西洋中心のデザインから脱却し、多言語・多デバイス対応を真に実現する基盤となる。加えて、pointer-events はAIが生成する動的なUIパーツの制御に不可欠だ。
writing-mode：縦書きの壁を越える、日本語サイトの命運
writing-mode は horizontal-tb（横書き）、vertical-rl（縦書き右から左）、vertical-lr（縦書き左から右）を指定できる。日本語や中国語の縦書きデザインは、これまでJavaScriptや画像に頼らざるを得なかった。CSSだけで実現できるようになれば、SEOやアクセシビリティの面でも大きな前進だ。
ただし、落とし穴がある。writing-mode を適用した要素内では、width と height の解釈が入れ替わる。つまり、横書きで width: 300px と指定した要素を縦書きにすると、高さが300pxになる。この挙動を理解せずに実装すると、レイアウトが崩れる。CSS GridやFlexboxとの組み合わせでは、特に注意が必要だ。
実際の運用では、文芸サイトや和風テーマのブログ、電子書籍リーダーなどで効果を発揮する。加えて、text-orientation と組み合わせることで、縦書き内の英数字の向きも制御できる。これらはすでにモダンブラウザで安定して動作する。
文字の方向が変わる、レイアウトの常識も変わる
writing-mode の真価は、単なる文字方向の変更にとどまらない。CSSのボックスモデルそのものが回転するため、従来の「上から下へ」「左から右へ」という前提が崩れる。たとえば、margin-top が横書きでは上方向の余白だが、縦書きでは右方向の余白になる。この差異を把握していないと、意図しないスペースが生まれる。
また、direction プロパティ（rtl/ltr）との関係も複雑だ。縦書きの右から左記述（vertical-rl）は、アラビア語などの右横書きと混同されがちだが、全く別の概念である。開発者は、言語タグ（lang）とCSSプロパティをセットで考える必要がある。
pointer-events：UIの操作性をCSSだけで制御する時代
pointer-events は、要素に対するポインター（マウス、タッチ、ペン）の反応を制御する。値 none を指定すると、その要素はクリックやホバーを受け付けなくなる。逆に auto でデフォルトの動作に戻る。一見単純だが、AIが動的にDOMを生成する現代では、この制御が極めて重要になる。
たとえば、AIが出力したチャットUIの一部をユーザーが選択できないようにしたい場合、pointer-events: none を指定する。あるいは、ローディング中はオーバーレイ全体に pointer-events: none をかけ、実際のボタンだけ auto にする。こうした制御は、JavaScriptのイベントリスナーを増やさずに実現できる。
z-indexとpointer-eventsの組み合わせが鍵
実務で陥りがちなのは、重なった要素のポインター透過を考慮しないことだ。たとえば、モーダルウィンドウの背景（オーバーレイ）に pointer-events: none を設定すると、モーダル下の要素がクリック可能になる。これにより、モーダル表示中でも部分的に操作を許可するUIを実装できる。
逆に、オーバーレイ自体に pointer-events: auto を維持し、その子要素に none を設定することで、オーバーレイのクリックイベントだけを拾うことも可能だ。このテクニックは、AIが生成する動的なポップアップやドロワーで特に有用である。
AI時代のUI設計における2つの役割
AIが生成するUIコンポーネントは、DOM構造が予測しにくい。そのため、CSSによる防御的設計（防御的CSS）が重要になる。pointer-events は、AIコンポーネントが誤ってユーザー入力をブロックしないためのセーフガードとして機能する。また、writing-mode は、多言語コンテンツを横書き前提でレイアウトせず、AIが生成した日本語や中国語のテキストを適切に表示する基盤となる。
2026年、CSSは装飾だけでなく、ユーザー体験の「制御層」としての役割を強めている。writing-mode と pointer-events は、その最たる例だ。開発者は、これらを「使えるから使う」のではなく、「なぜ使うのか」を設計段階で組み込むべきである。
Baselineへの統合が意味するもの
Baseline 2026にこれらのプロパティが含まれたことで、古いブラウザ（IE11など）を除けば、事実上すべてのモダンブラウザで一貫した動作が保証される。これは、IE対応のために pointer-events: none を諦めていた開発者にとって朗報だ。ただし、writing-mode の部分的なサポートはSafariでやや異なる動作をすることがあるため、実装前のクロスブラウザテストは推奨する。
結論として、2026年のWeb開発において、writing-mode と pointer-events は「新機能」ではなく「常識」として扱うべきだ。AI時代の柔軟なUI設計と多言語対応を、CSSだけで完結させるための必須ツールである。
参照
この記事を書いた人
理人と理子
ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！