.field {
margin-inline-start: 20px;
margin-inline-end: 5px;
}- モデル
- OpenAI互換またはAnthropicのエンドポイントを、ベースURLと必要なAPIキーで設定し、接続をテストします。ローカルのモデルサーバーは起動が必要です。リモートツールは別途データを送信する場合があります。
- プロジェクト
- 横書きと縦書きを両方向で確認し、ブロック軸の間隔は維持してください。
- 適用前に確認
- 実際の動作を期待する結果と比較します。検証に失敗した場合は、次の変更を加える前に原因を調べてください。
.field {
margin-inline-start: 20px;
margin-inline-end: 5px;
}読む方向が変わってもレイアウトの意図を保つ
ある読む方向では正しく見える余白も、画面の言語が変わるとフィールドを誤った場所に置くことがあります。InlineCedarは、その見た目の問題を具体的なCSSタスクにできるWindows用AIコーディング環境です。コンポーネントを特定し、内容の前後のどちらに余白が必要か説明して、現在制御している規則を調べるようアシスタントに依頼します。
インライン方向の論理的な余白の例は、自分のプロジェクトでその意図を検討する方法を示します。レイアウトが実際に文字方向に従う箇所で、物理的なマージンの限定的な置き換えを依頼できます。適用前に周囲のセレクターと上書きをレビューし、両方向でコンポーネントを確認します。有用な成果は、観測できる結果を伴って確認したレイアウト上の判断であり、すべてのleftとrightプロパティの機械的な置換ではありません。
対応するOpenAI互換またはAnthropicのエンドポイントに接続し、必要なら認証情報を設定します。拒否抑制を除去したAIの選択とは、利用可能なモデルを選ぶことであり、プロバイダーのポリシーとサーバーのコンテキスト・ツール制限は引き続き適用されます。CSS案をレビューし、既存の検証を実行して、異なる幅で代表的な画面を調べます。別途ローカルモデルサーバーを使っていても、他の接続ツールまでローカルとは限らないことに留意してください。
文字方向に対応するレイアウト変更の判断
- leftやrightのプロパティをすべて論理プロパティにすべきですか？
いいえ。余白が読む方向に従うのか、意図的に物理的な側に固定されるのか判断します。各コンポーネントの目的と周囲のレイアウトを調べてください。一括置換は、言語の方向が変わっても位置を固定すべき要素まで変える可能性があります。
- 共有フィールドの規則を変えたら、どの画面を確認すべきですか？
狭いレイアウトと両方の文字方向を含め、規則を継承するフォームとコンポーネントを確認します。結果を変える上書きも探してください。編集した宣言だけでなく、依頼で示した意図と実際の余白を比較します。
- InlineCedarは見た目のレビューに合格したと判断できますか？
コードの説明は視覚的な証拠ではありません。アプリケーションを実行し、必要に応じてプロジェクトの検証を使い、影響する状態を自分で確認します。次の変更を求める前に、CSS案と描画結果の不一致を記録してください。
- 余白のスクリーンショットには何の情報を添えますか？
関連コンポーネントのマークアップとCSS、表示領域、読む方向を示します。要素間に期待する関係も説明します。ソース情報があれば、どのセレクターが画像の状態を生んだか推測するのでなく、対象を絞った実装を検討できます。
InlineCedar · 更新日 2026-10-25