CSS letter-spacing

このツールでできること

• CSS letter-spacingでは、入力した px 数値から letter-spacing 宣言を生成し、負値を含む字間調整の CSS を確認できます。
• 関連する観点として letter spacing、CSS letter-spacing、css letter spacing を確認し、結果をコピーして別の作業に使えます。

使い方

1. px と書かれた入力欄に字間として使いたい数値を入れます。
2. 結果欄に表示される letter-spacing: npx; の CSS 宣言を確認します。
3. 文字を詰めたい場合は負の数値、広げたい場合は正の数値を試します。
4. 見出しや短いラベルで表示を確認し、本文では過度な字間を避けます。

入力例・出力例

よくある利用シーン

• ロゴ風の英字見出しで、px 単位の字間を素早く CSS 化したいとき。
• 既存デザインの -1px や 2.5px 指定をそのまま宣言へ変換するとき。
• 日本語見出しの字間を少し広げ、実装へ渡す値を確認したいとき。
• letter-spacing-scale のトークンではなく単発の調整値を作るとき。

結果確認のポイント

• 生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
• letter spacing、CSS letter-spacing、css letter spacingの観点で、入力内容と出力内容がずれていないか見直してください。
• コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

• ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
• 結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

• CSS letter-spacingの主要な処理はブラウザ内で実行されます。
• 入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
• 本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

よくある質問

関連ツール