メインコンテンツへ移動
ToolShed
検索
⌘
K
人気
新着ツール
?
読み込み中...
🏠
探す
☰
カテゴリ
🔥
人気
?
について
ホーム
/
デザイン・CSS
/
direction値
▧
direction値
design/css-direction-values
CSS directionのltrとrtlを、書字方向ラベル付きの固定表で確認できます。
最終更新日
2026-07-03
・ by
yuzlrin
このツールでできること
direction値では、CSS directionのltrとrtlを、書字方向ラベル付きの固定表で確認できます。
関連する観点として direction値、direction values、CSS を確認し、結果をコピーして別の作業に使えます。
項目
内容
ltr
左→右
rtl
右→左
使い方
表のltr行で、左から右へ進む方向指定を確認します。
rtl行で、右から左へ進む言語向けの方向指定を確認します。
ページ全体の言語方向は、CSSだけでなくHTMLのdir属性も合わせて検討します。
数字やURLが混在する場合は、unicode-bidiとの組み合わせもFAQで確認します。
入力例・出力例
INPUT
表の ltr 行
OUTPUT
direction: ltr;
左から右の方向を指定します。
INPUT
表の rtl 行
OUTPUT
direction: rtl;
右から左の方向を指定します。
よくある利用シーン
アラビア語やヘブライ語を含むUIで方向指定を確認したいとき。
HTMLのdir属性とCSS directionの役割を切り分けたいとき。
双方向テキストでリストや表の配置が崩れる原因を調べるとき。
結果確認のポイント
生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
direction値、direction values、CSSの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。
注意点
ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。
データの扱い / プライバシー
direction値の主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。
FAQ
よくある
質問
directionプロパティで設定できる値は何ですか?
directionにはltr(左から右、デフォルト)とrtl(右から左)の2値があります。ltrは英語・日本語などに、rtlはアラビア語・ヘブライ語などの右書き言語に使います。HTML属性のdir='rtl'と併用するのが国際化対応の標準的なアプローチです。
direction: rtlはテキスト以外のレイアウトにも影響しますか?
はい。direction: rtlを指定するとテキスト整列だけでなく、flexboxのflexの方向・スクロールバーの位置・リストマーカーの位置なども右書き方向に切り替わります。writing-modeプロパティと組み合わせると縦書きの方向制御も可能です。
directionとunicode-bidiの関係は何ですか?
directionはブロック全体の書字方向を設定し、unicode-bidiは双方向アルゴリズムの動作を制御します。unicode-bidi: isolateを組み合わせると、RTL全体設定の中に部分的なLTRテキスト(URLや数字など)を正しく表示できます。
関連ツール
border-radiusジェネレーター
CSSのborder-radiusをGUIで視覚的に調整。四隅を連動または個別に動かし、1値または4値のCSSを生成する。
Box Shadow生成
CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。
Material Elevation
Material Elevationの代表レベルを、単層box-shadow値の固定表で確認できます。
accent-colorが効く要素
CSS accent-colorが反映されるフォーム部品4種を、HTML要素名と用途で確認できます。
CSS角度単位
CSSで使うdeg・grad・rad・turnの角度単位と、1周あたりの基準値を一覧表示します。
animation-direction
CSS animation-directionのnormal・reverse・alternate・alternate-reverseを用途付きで確認できます。
animation-fill-mode
CSS animation-fill-modeの4値を、アニメーション前後のスタイル保持ルールとして確認できます。
CSSアニメーション生成
CSSアニメーションのキーフレームを視覚的に作成・プレビュー。イージング関数の選択、コードのコピーまでワンストップ。