【入門編】擬似クラス :dir() による方向性制御 – CSS実践ガイド

こんにちは！フロントエンド・アーキテクチャの世界へようこそ。
日々、数え切れないほどのCSSと格闘している私ですが、今日はCSSのちょっと未来を感じる、そしてグローバルなWebサイトを作る上で最高にクールな機能についてお話しさせてください。

テーマはズバリ、擬似クラス `:dir()` による方向性制御です。

「方向性？左から右とか、右から左とかのこと？」
その通り！よくぞピンと来ました。英語や日本語は「左から右（LTR：Left-to-Right）」に文字を書き進めますが、アラビア語やヘブライ語などは「右から左（RTL：Right-to-Left）」に文字を書きます。

こうした「文字を読む・書く方向」に合わせて、CSSを自動で切り替えてくれるのが `:dir()` という魔法のような仕組みなんですよ。
「なんだか難しそう……」なんて身構えなくて大丈夫ですよ。今日は身近な例えを交えながら、ゆっくり紐解いていきましょう！

—

想像してみてください。
普段私たちが読んでいる本やWebサイトは、左から右へ文字が進みますよね。ウェブデザインも基本的には「左側がスタート、右側がゴール」で作られています。

例えば、文章の端っこにアイコンをちょこんと置くとき、「テキストの左側にアイコン」を置くのが定番です。

ところが、アラビア語圏のサイトを覗いてみると、世界が文字通り「左右反転」します。
スタート地点は右側になり、文字は右から左へ流れていく。そうなると、先ほどのアイコンも「テキストの右側」に配置し直してあげないと、なんだか不自然で読みにくいレイアウトになってしまうんです。

昔のエンジニアは、これに対応するために「アラビア語用のクラスをごそっと追加して……」と、それはもう涙ぐましい努力をしていました。でも、今の私たちには `:dir()` があります。

—

`:dir()` は、HTMLの要素が持っている「どっち向きの言語だっけ？」という設定（`dir`属性）を覗き見して、スタイルをパパッと切り替えてくれる擬似クラスです。

百聞は一見にしかず。まずはコードの雰囲気を覗いてみましょう。

こんにちは！今日も良い天気ですね。

مرحبا! كيف حالك؟

このHTMLに対して、CSSをこう書きます。

/ 左から右 (LTR) のときのスタイル /
:dir(ltr) .message {
border-left: 5px solid #3498db; / 左側に青い線を引くよ /
padding-left: 10px;
}

/ 右から左 (RTL) のときのスタイル /
:dir(rtl) .message {
border-right: 5px solid #3498db; / 右側に青い線を引くよ（自動で反転！） /
padding-right: 10px;
}

すごく直感的だと思いませんか？
「もし、このエリアが右から左（rtl）に流れるなら、線の位置を右側に変えてね」と、CSSがブラウザにお願いしているわけです。

—

これって、身の回りの道具で例えると「左右対称に作られた文房具」みたいなものです。

例えば、ハサミ。普通のはさみは右利き用ですが、左利き用のハサミは刃の合わせが逆になっていますよね。
もしあなたが左利きの人に道具を渡すとき、「はい、これ左利き用ね」と方向を配慮して渡すはずです。

HTMLの `dir=”rtl”` は「ここは左利き用の世界（右から読む世界）ですよ」というラベル。
そして `:dir(rtl)` は、「あ、左利き用の世界だな」と気づいた瞬間に、サッとハサミの向きを持ち替えてくれる優秀なアシスタント君なのです。

—

ここで、CSSを学び始めた人がよく混乱するポイントをこっそりシェアしておきますね。
「言葉の種類を判定するなら `:lang(ja)` とか `:lang(ar)` でもいいんじゃないの？」という疑問です。

実は、ここがプロの腕の見せ所。

例えば、アラビア語は基本的に右から左（rtl）ですが、アラビア語のテキストの中に英語の数字やブランド名が混ざることがあります。そういうとき、言語は英語（`en`）であっても、全体の流れに合わせて右から左にレイアウトしたい場合がありますよね。

そんなとき、言語ベースの `:lang()` だとコントロールしきれない細かい調整を、方向ベースの `:dir()` ならばスマートにこなせるんです。使い分けができるようになると、あなたも立派なCSS使いの仲間入りですよ！

—

それでは最後に、コピペしてすぐにブラウザで試せる実用的なサンプルコードをお届けします。
テキストボックス（入力欄）の横にあるアイコンの位置が、文字の方向によってクルッと入れ替わる魔法のようなサンプルです。

:dir() 体験プレイグラウンド

▼ 左から右へ進む世界 (LTR)

🔍

▼ 右から左へ進む世界 (RTL)

🔍

これを `.html` という拡張子で保存してブラウザで開いてみてください。
HTMLの `dir` 属性を書き換えるだけで、CSSの複雑な計算なしに、アイコンとテキストの絶妙な距離感が自動で切り替わる感動を味わっていただけるはずです。

—

国際化対応というと、なんだかすごく大がかりで難しそうなシステムを想像してしまいがちですが、現代のCSSには `:dir()` のような優しくて強力な味方がついています。

最初は「ふーん、こんな書き方もあるんだ」くらいの気持ちで大丈夫。
いつか世界中のユーザーに向けたWebサイトを作る日が来たとき、「あ、あのとき読んだ記事の機能、ここで使えるかも！」と思い出してもらえたら、チーフアーキテクトとしてこれ以上の喜びはありません。

あなたのWeb制作の旅が、今日も楽しく素晴らしいものでありますように！