CSSテキストスペーシングジェネレーター
letter-spacing、word-spacing、line-height、text-indent、tab-size のCSS値を、段落のライブプレビュー付きで作成します。単位は px、em、rem から選べ、CSSとHTMLをコピーできます。
入力
プレビューとHTMLスニペットにのみ使用されます。
選択した単位で指定します（em はフォントサイズに対する相対値）。
タブ文字の幅です。整形済みテキスト (pre) で表示されます。
出力
間隔を調整したテキストがここに表示されます。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-text-spacing-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-text-spacing-generator` tool (CSS Text Spacing Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-text-spacing-generator/"
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クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
テキストを読みやすくするのは間隔です。CSSには間隔を制御するプロパティが5つあります。letter-spacing、word-spacing、line-height、text-indent、tab-size です。このジェネレーターでは、サンプル段落を見ながらこの5つをすべて調整し、CSSをコピーできます。
使い方
- サンプルテキストを貼り付けるか入力します。 このテキストはプレビューとHTMLスニペットにのみ使われます。
- 文字間隔と単語間隔を調整します。 小さな正の値は見出しや大文字のテキストを広げ、小さな負の値は大きなディスプレイ用の書体を詰めます。
- 行の高さを設定します。
1.5のような単位なしの値はフォントサイズに比例します。本文では 1.4〜1.7 がもっとも読みやすい範囲です。 - 書籍風の段落が必要なら、1行目のインデントを追加します。
- 単位を選びます。
emとremはフォントサイズに連動し、pxは固定です。 - 出力をコピーします。 宣言、完全なCSSルール、対応するHTMLスニペットです。
クイックリファレンス
letter-spacingはトラッキングとも呼ばれます。大文字のラベルには0.05em〜0.1em程度が適しています。word-spacingは単語どうしの間隔だけを変えます。line-heightは行送り（リーディング）です。入れ子の要素が計算済みの長さではなく比率を継承できるよう、単位なしの数値を使います。text-indentはブロックの1行目だけを字下げします。tab-sizeはwhite-space: preのブロックでタブ文字の幅を決めます。
アクセシビリティのヒント
WCAG 1.4.12 では、ユーザーが行の高さを1.5以上、段落間隔を2倍、文字間隔を0.12em に設定しても、テキストが機能し続けることが求められています。間隔が広がったときにテキストが切れる固定高さのコンテナは避けてください。
テキストの下線や上線については CSSテキストデコレーションジェネレーター を、影については CSSテキストシャドウジェネレーター をご覧ください。
プライバシー
すべての処理はお使いのブラウザ内で行われます。テキストや設定がアップロードされることはありません。