0Pricing
CSS Academy · レッスン

RTLレイアウトでの論理プロパティ

論理プロパティを使い、アラビア語やヘブライ語に合わせて自動的に反転する真の双方向レイアウトを作成します。

「RTLレイアウトでの論理プロパティ」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

HTMLでRTLを設定する

dir属性と対応するlang属性を使って、HTMLでRTLを宣言します。

<div dir="rtl" lang="ar" class="rtl-box">مرحبا بكم في تخطيط RTL</div>

CSSでの dir="rtl"

CSSで方向を設定することもできます。テストや、ページの一部だけをRTLにする場合に便利です。

<div dir="rtl">هذا العنصر باتجاه RTL</div>

LTR/RTLの切り替えをテストする

簡単なテストとして、dir="rtl"を<html>に追加します。論理プロパティを使っていれば、レイアウトは正しく左右反転するはずです。物理プロパティを使っている場合は、修正が必要な箇所がわかります。

自動的に適応するもの

dir="rtl"を設定すると、論理プロパティによって次の項目が自動的に反転します。

  • テキストの配置（start/end）
  • マージンとパディング（inline-start/end）
  • ボーダー（inline-start/end）
  • フロート（inline-start/end）
  • 配置（inset-inline-start/end）

自動的には適応しないもの

論理プロパティを使用していても、RTLでは次の項目に注意が必要です。

  • 方向性のあるコンテンツを含む背景画像
  • 方向に意味のあるSVGアイコン（矢印、シェブロン）
  • translateX()などの変形 — 方向フラグとともにtranslateX(calc(-1 * var(--offset)))を使用します
  • 明示的なピクセル値を使った絶対配置

SVGアイコンのミラーリング

CSSを使うと、RTLで方向性のあるアイコンを簡単に反転できます。

<div dir="rtl"><span class="icon-arrow"></span> Mirrored arrow in RTL</div>

方向に対応したCSS変数

方向に応じた値を設定するCSS変数のテクニックです。

<div dir="rtl" class="drawer">Drawer</div>

実践的なRTLの例

論理プロパティを使用したカードコンポーネントです。

<div dir="rtl" class="card"><span class="card__icon">🔔</span><span class="card__text">تنبيه جديد</span></div>

font-sizeとRTL

アラビア語のフォントは、同じピクセルサイズでもラテン文字のフォントより大きく、または小さく見えることがあります。必要に応じて、文字体系ごとにfont-sizeを定義します。

<p>Default text (16px)</p>
<p lang="ar">نص عربي (17px)</p>

テストツール

ブラウザーのDevToolsでは、双方向レイアウトをエミュレートできます。また、Chromeのアクセシビリティツリーを使って、スクリーンリーダーの読み上げ順序が視覚的な順序ではなく論理的な順序に従っていることを確認してください。

実際のRTLチェックリスト

RTLのレビューチェックリスト：

  • すべてのマージンとパディングに論理プロパティを使用している
  • すべてのボーダーにinline-start/endを使用している
  • テキストの配置にstart/endを使用している
  • 方向性のあるアイコンをscaleX(-1)で反転している
  • 必要に応じて、絶対配置にinset-inline-*を使用している
  • スクロール可能なコンテナが正しい端からスクロールする

確認問題

RTLレイアウトで方向性のあるSVG矢印アイコンをミラーリングする最も簡単なCSS変形はどれですか。

まとめ

RTLレイアウトでは、html要素にdir="rtl"を設定します。論理プロパティを使うと、マージン、パディング、ボーダー、配置が自動的に適応します。変形や絶対配置で使う物理的なピクセル値については、RTLを手動で考慮する必要があります。方向性のあるアイコンはscaleX(-1)でミラーリングします。ルート要素のdir="rtl"を切り替えてテストしてください。

よくある質問

「RTLレイアウトでの論理プロパティ」レッスンは無料ですか？

はい。「RTLレイアウトでの論理プロパティ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「RTLレイアウトでの論理プロパティ」で何を学びますか？

論理プロパティを使い、アラビア語やヘブライ語に合わせて自動的に反転する真の双方向レイアウトを作成します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「RTLレイアウトでの論理プロパティ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 論理プロパティが必要な理由：国際化
  2. ブロック方向とインライン方向
  3. 論理的なMargin、Padding、Border
  4. RTLレイアウトでの論理プロパティ
← CSS Academyに戻る