CSSロジカルプロパティコンバーター

物理的なCSSプロパティ(margin-left、width、top、text-align: left)を論理的なプロパティの同等物(margin-inline-start、inline-size、inset-block-start、text-align: start)に変換します。またはその逆。

入力

CSS入力

方向

出力

変換されたCSS

役に立ちましたか？

このツールを使う他の方法

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-logical-properties-converter \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "inputCss": ".box {\n  margin-left: 10px;\n  margin-right: 20px…",
    "direction": "physical-to-logical"
  }'

ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。

AIエージェントに依頼する

Use the IOTools `css-logical-properties-converter` tool (CSS Logical Properties Converter) on this input:

YOUR_INPUT_HERE

IOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。

埋め込みウィジェット

<iframe
  src="https://iotools.cloud/embed/css-logical-properties-converter/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="CSSロジカルプロパティコンバーター — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。

API/MCP 1回あたりの費用	5クレジットから
クレジットが足りませんか?	料金を見る

次の方法でも利用可能

統合ブラウザ拡張機能 VS Code拡張機能

ガイド

CSSロジカルプロパティとは何ですか?

一般的なCSSボックスモデルプロパティ — margin-left、padding-right、width、top — 固定された物理的な方向でレイアウトを説明します。すべてのページが左から右、上から下に読まれている限り、これは機能します。しかし、サイトが右から左の言語(アラビア語、ヘブライ語、ペルシア語、ウルドゥー語)または縦書きモードをサポートしている場合は機能しなくなります。見出しの前に配置するはずのmargin-left: 16pxは、レイアウトが反転すると後になってしまいます。なぜなら「左」は動かないが「前」は変わったからです。

ロジカルプロパティは、画面の端ではなく、コンテンツの流れに相対的なレイアウトを説明します。inline-start/inline-endはleft/rightを置き換え、block-start/block-endはtop/bottomを置き換えます。デフォルトの水平LTR書き込みモード(ウェブの大部分)では、inline-startは左として表示されるため、視覚的には変わりません。しかしRTLまたは縦書きモードに切り替えると、ロジカルプロパティは自動的にコンテンツと再調整されますが、物理プロパティは間違った側に釘付けのままです。

今日RTLの計画がなくても、これは重要です。ロジカルプロパティは意図(「この要素の前、読む順序での空間」)を説明し、ブラウザ、デザインシステム、フレームワーク(Tailwindのms-/me-ユーティリティを含む)はそれらに収束しています。

このツールの使い方

CSSのブロックを入力ボックスに貼り付けます — セレクタ、コメント、フォーマットはすべて問題ありません。
方向を選択します: 物理的から論理的へはmargin-left、width、top、text-align: leftおよび同様のプロパティを論理的な同等物に変換します。論理的から物理的へはその逆を行い、古いツール用の物理的フォールバックが必要な場合に便利です。
変換されたCSSが即座に表示されます。コピーするか、.cssファイルとしてダウンロードしてください。

下の表のプロパティのみが変更されます — セレクタ、括弧、コメント、認識されない宣言、およびインデントはまったく書かれたままです。

マッピングテーブル(LTR — 標準の仮定)

物理的	ロジカル
`margin-left` / `-right` / `-top` / `-bottom`	`margin-inline-start` / `-inline-end` / `-block-start` / `-block-end`
`padding-left` / `-right` / `-top` / `-bottom`	`padding-inline-start` / `-inline-end` / `-block-start` / `-block-end`
`border-left` / `-right` / `-top` / `-bottom` (および `-width`/`-color`/`-style`)	`border-inline-start` / `-inline-end` / `-block-start` / `-block-end` (およびバリアント)
`width` / `height`	`inline-size` / `block-size`
`min-`/`max-width`/`height`	`min-`/`max-inline-size` / `block-size`
`top` / `bottom` / `left` / `right`	`inset-block-start` / `-block-end` / `-inline-start` / `-inline-end`
`text-align: left` / `right`	`text-align: start` / `end`

ツールは標準の水平LTR書き込みモードを想定しているため、inline-start = 左、inline-end = 右です。これはほぼすべてのロジカルプロパティドキュメントで使用される簡略化です。反転は、要素が実際にdirection: rtlまたは縦書きのwriting-modeを設定した後に初めて重要になります。

よくある質問

これはスタイルシート内のすべての物理プロパティをキャッチしますか? 上記の標準的なボックスモデル、サイズ変更、インセット、およびtext-alignのペアを網羅しています。そのセット外のプロパティ(background-position、transform、border-radiusコーナー)は推測されずにそのままです。

1行に複数の宣言を処理しますか? いいえ、1行あたり1つのproperty: value;宣言を読みます。最初にミニファイされたCSSをフォーマットして、各宣言が独自の行を持つようにしてください。

なぜtext-alignは名前を保持しますが値は変更されますか? text-alignは常に論理的なキーワード(start/end)を物理的なもので受け入れてきました。別のロジカルプロパティ名はありません。値だけが変わります。

プライバシー

このツールはブラウザで完全に実行されます。CSSはサーバーにアップロードされることはありません。

csslogical propertiescss logical propertiesrtlwriting modemargin-inline-startinline-sizeconverterweb design

ツールが気に入りましたか？広告をなくしましょう。

1回のお支払いでアカウントから広告が完全になくなります。サブスクリプションも追跡もありません。

広告を削除