左右の余白を文章の方向に合わせる：inline-startで読み始めをそろえる

英語の案内では読み始めにあった太い線が、アラビア語の案内では文の終わり側に残る。同じ部品を複数の言語で使うと、左を意味する指定と、読み始めを意味する指定の違いが表れます。左右の余白を文章の方向に合わせるなら、どちらを意図した装飾なのかを先に決めます。

HTMLの属性とCSSのpaddingが分かる人向けに、架空の交流室の短い案内を作ります。英語とアラビア語で「ようこそ」と示す二つの箱を、横書きのまま比較します。翻訳サイト全体の設計ではなく、読み始め側の枠線と内側余白に絞った練習です。

「左に置く」と「読み始めに置く」を分ける

padding-leftは、文章の方向が変わっても左側を指定します。一方、padding-inline-startは、文字が並ぶ方向の開始側を指定します。このように内容の流れを基準にするCSSを論理プロパティと呼びます。

今回の横書きでは、ltrは左から右、rtlは右から左です。inline-startはltrで左、rtlで右に対応します。開始側の太い線もborder-inline-startへそろえると、片方だけ逆に残ることを避けられます。MDNの余白と枠線の対応表で、物理方向との関係を確認できます。

この表はwriting-modeがhorizontal-tbの条件です。縦書きにすればinline方向は上下に対応するため、「inlineはいつでも横」と覚えないでください。今回は書字方向を増やさず、左右の反転を説明できることを完成条件にします。

同じクラスの二つの箱を、dirだけ変えて比べる

次をdirection.htmlへ保存し、ブラウザーで開きます。外部の画像やライブラリは不要です。言語を表すlangと、基準方向を表すdirは、それぞれの段落へ指定しています。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>交流室の案内｜方向の練習</title>
<style>
* { box-sizing: border-box; }
body { margin: 16px; color: #222; font-family: sans-serif; line-height: 1.8; }
main { max-width: 480px; margin-inline: auto; }
.notice {
  writing-mode: horizontal-tb;
  border: 1px solid #555;
  border-inline-start: 6px solid #a64200;
  padding-block: 16px;
  padding-inline-start: 24px;
  padding-inline-end: 12px;
  text-align: start;
  overflow-wrap: anywhere;
  background: #fff5eb;
}
</style>
</head>
<body>
<main>
  <h1>交流室の案内（架空の練習）</h1>
  <h2>英語・左から右</h2>
  <p class="notice" lang="en" dir="ltr">Welcome</p>
  <h2>アラビア語・右から左</h2>
  <p class="notice" lang="ar" dir="rtl">مرحبًا</p>
</main>
</body>
</html>

英語では左に6pxの線と24pxの内側余白、アラビア語では右に同じ組が現れます。text-alignもstartなので、文字はそれぞれの読み始め側に寄ります。左右の箱を別クラスで作り直す必要はありません。

図は余白の役割を示す模式図です。実際の寸法は開発者ツールで段落を選び、計算済みのpadding-leftとpadding-rightを見ます。文字の形には見た目の空きがあるため、文字の端から定規で測るより、箱の内側余白を調べる方が指定との対応を確かめやすくなります。

langを変えただけでは、余白の側は切り替わらない

一つ目の失敗は、アラビア語の段落からdirを外し、lang="ar"だけで右側の線になると考えることです。文字自体が右から左へ並んで見える場合でも、箱の基準方向まで言語名から自動決定されるわけではありません。

MDNのdirの説明では、基準方向とその継承を確認できます。この例でdirを外した段落は、左から右を基準とする親の方向を引き継ぎます。修正は既知の原稿に合うdir="rtl"を段落へ戻すことです。計算済みのdirectionがrtlとなり、右の余白が24pxになるか再確認します。

langは文章の言語を表すため、そのまま残します。HTMLの言語指定の記事で扱う、どの範囲が何語かという問いと、今回のどちらが開始側かという問いは別です。ページ全体をrtlに変えて日本語の説明まで巻き込まず、右から左の内容がある範囲へ指定します。

古いleft指定が残ると、両側が広くなる

二つ目の失敗は、もともとのpadding-left: 24pxを残したまま、末尾にpadding-inline-start: 24pxだけを追加することです。ltrでは同じ側なので変化が目立ちませんが、rtlでは右が開始側になり、古い左の24pxも残ります。

修正では、今回の部品の内側余白を論理方向へそろえます。開始側24px、終了側12pxを明示し、担当が重なるleft・right指定を外します。上書き用の例外を足す前に、CSSの適用元を調べる手順で、どの規則が値を決めているか確認してください。

枠線でも同じ点検が必要です。border-leftだけを残すと、rtlの右側に新しい線を足しても左の線は消えません。完成例では細い枠を四辺へ用意した後、開始側だけ太くしています。修正後は左右両方のborder幅を読み、太い側が一つであることまで照合します。

画面の左を示す部品には、物理方向を残す

論理プロパティを使う理由は、原稿の読み始めとの関係を保つことです。たとえば図面の左端を指す注記なら、言語が変わっても実際の左端を指す必要があります。その配置まで機械的にinline-startへ置き換えると意味が変わります。

余白の大きさを決める作業とも分けましょう。今回の24pxと12pxは違いを観察するための値です。項目同士の距離をそろえたい場面なら、gapで間隔を分ける例のように、そもそも余白の担当が親か子かを考えます。論理方向に替えただけで、すべての間隔が整うわけではありません。

方向を戻しても、同じ一組の余白になるか

10〜15分を目安に、完成例のアラビア語段落のdirを一時的にltrへ変え、最後にrtlへ戻します。原稿に対して誤った方向にするのは比較中だけです。次の結果を確認できたら、方向に対応する指定を作れています。

• 英語は左24px・右12pxで、左の枠線だけ6pxになる。
• アラビア語をrtlへ戻すと左12px・右24pxで、右の枠線だけ6pxになる。
• 幅320pxでも両方の案内と見出しが枠内に収まり、ページ全体を横へ動かさず読める。

最後に開始側を32pxへ変更してください。英語では左、アラビア語では右だけが32pxになるのが解答です。二つの段落を別々に修正せずに済むかを確かめ、レスポンシブCSSの無料レッスンで作った部品にも、方向を変えてよい装飾かという判断を加えてみてください。