2026年5月、CSS `writing-mode` と `pointer-events` が本質的に変える「レイアウト設計」の常識
CSS `writing-mode` と `pointer-events` がもたらす「レイアウトと操作」の新しい基盤
2026年5月、Webプラットフォームの「Baseline」に2つのCSSプロパティ writing-mode と pointer-events が追加された。一見すると既存の機能の再確認にすぎないように思える。しかし、このタイミングでの標準化は、レイアウトとインタラクション設計の自由度を根本から引き上げる意味を持つ。特に、マルチスクリーンや国際化、アクセシビリティが重視される現在、これらのプロパティは単なる「便利な設定」から「設計の前提」へと昇華しつつある。開発者は今、writing-mode で縦書き・横書きを柔軟に切り替え、pointer-events でヒット領域やイベント制御を正確に扱う方法を、標準仕様として確実に実装すべきだ。
`writing-mode` の標準化：縦書きレイアウトが「特殊事例」から「基本設計」へ
なぜ今、Baselineに含まれたのか
writing-mode は、CSS2.1時代から部分的にサポートされていたが、フル機能での標準化は2026年まで待つ必要があった。特に、縦書き（vertical-rl や vertical-lr）の内部でのテキスト方向制御や、ルビ（振り仮名）との組み合わせが、ブラウザごとにばらついていた。Baselineへの追加は、これらの問題が解消され、全モダンブラウザで統一動作することを意味する。
開発者にとっての実務メリット
縦書きレイアウトは、日本語・中国語・韓国語のサイトだけでなく、デザイン上の差別化としても価値が高い。例えば、ヘッダーのサイドナビゲーションを縦書きで表示する場合、従来は transform: rotate(90deg) でごまかしていた。しかし、この手法ではテキスト選択やコピーが正しく行えず、スクリーンリーダーが認識しない問題があった。 writing-mode を使えば、ネイティブのテキストフローとして扱える。加えて、text-orientation と組み合わせることで、縦書き内の英数字を横向きに保つ制御も可能だ。
落とし穴：インラインレイアウトとの衝突
注意点として、writing-mode を変更すると width と height の解釈が入れ替わる。縦書きにした場合、width はブロック方向、height はインライン方向になる。FlexboxやGridとの併用時には、明示的に inline-size や block-size を使うほうが混乱を避けられる。
`pointer-events` の標準化：操作制御が「ハック」から「仕様」に
イベント伝搬の精緻な制御が可能に
pointer-events プロパティは、要素がポインターイベント（クリック、ホバー、タッチ）に反応するかどうかを制御する。これまでも none と auto は広く使われていたが、2026年の標準化では visiblePainted、visibleFill、visibleStroke、painted、fill、stroke、all といったSVG由来の値がCSS全体で一貫して動作するようになった。
実務で活用する3つのシナリオ
- 重なり合う要素のターゲット分離: モーダルと背景オーバーレイの間で、マウスイベントを正しい要素に届ける。背景には
pointer-events: none、モーダルにはautoを指定すれば、クリックイベントのバブリング問題を回避できる。 - 非アクティブ状態のUI要素: ローディング中や無効状態のボタンに対して
pointer-events: noneを使うのは基本。ただし、スクリーンリーダーへの影響を考慮し、aria-disabledも併用すべき。 - SVGアイコンの精密なホバー領域: ベクターアイコン内のストロークだけにホバーを反応させたい場合、
pointer-events: strokeを指定することで、塗りつぶし部分が空でも操作可能になる。
将来性：CSSとJavaScriptの境界を曖昧にする
pointer-events の進化は、イベントハンドリングの一部をCSSに委譲する流れを加速する。例えば、pointer-events: none を付与した親要素の子要素だけにイベントを許可する「イベントゲート」設計が、よりシンプルに記述できる。これにより、複雑なJavaScriptのイベント伝搬制御が不要になる場面が増える。
これらの標準化が示す「2026年のWebプラットフォーム」の方向性
writing-mode と pointer-events は、一見地味だが、Web標準の「完成度」を高める基盤プロパティだ。Baselineに追加されたという事実は、ブラウザ間の互換性問題が解消され、開発者が何も気にせず使える段階に入ったことを示す。
今後の展望として、writing-mode は将来のCSS Writing Modes Level 4で、縦書きと横書きの混在（部分的なテキスト方向の切り替え）がよりシームレスになる可能性がある。pointer-events は、CSSの touch-action や overscroll-behavior と組み合わせることで、モバイル向けの高度なジェスチャー制御を標準CSSだけで実現できる未来が見える。
開発者に求められるのは、これらの機能を「特殊なテクニック」ではなく「日常のツール」として認識し、積極的に設計に組み込むことだ。特に、国際化とアクセシビリティの要求が高まる中、writing-mode と pointer-events の標準的理解は、もはや選択肢ではなく前提条件になりつつある。
参照
この記事を書いた人
理人と理子
ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！