CSS・デザインツール

無料 CSS text-indent hanging/each-lineビルダー

ぶら下げインデントと改行後インデントのためのhangingおよびeach-lineキーワード付きCSS text-indentを生成します。

クイックリファレンス

カテゴリ: CSS・デザインツール注意: hangingとeach-lineにはBaseline 2026ブラウザ（Chrome 130+、Safari 18.2+、Firefox 135+）が必要です。古いブラウザはキーワードを静かに無視し、代わりに標準の先頭行インデントを適用します。プログレッシブエンハンスメントには許容できますが、精密なレイアウト要件を損なう可能性があります。出力: ぶら下げインデントと改行後インデントのためのhangingおよびeach-lineキーワード付きCSS text-indentを生成します。

こちらもお試しくださいコンテナクエリ単位計算機 CSSカルーセルジェネレーター CSSスクロールステートクエリジェネレーター

ツールを使う入力は手元で処理

ツールを読み込み中...

CSS text-indent hanging/each-lineビルダーとは

CSSのtext-indentは現在、hangingおよびeach-lineキーワードをサポートしています（Baseline 2026：Chrome 130+、Safari 18.2+、Firefox 135+）。hangingはインデントの方向を反転させます。最初の行は左揃えのままで、後続の行すべてが指定された長さだけインデントされます。each-lineは最初の行だけでなく、すべての強制改行（ など）の後にインデントを適用します。両方のキーワードを長さの値と組み合わせることができます：text-indent: 2em hanging each-lineは、各行の改行後にもリセットされる吊り下げインデントを作成します。

クイックアンサー

text-indent: 2em hangingを使用して、最初の行が左揃えで後続の行が2emインデントされる吊り下げインデントを作成します。each-lineを追加すると、すべての強制改行の後にもインデントが適用されます。ブラウザサポート：Chrome 130+、Safari 18.2+、Firefox 135+（Baseline 2026）。このツールは古いブラウザ向けに、キーワードを無視して通常の先頭行インデントを適用するフォールバックを生成します。

Last updated: 2026-06-01

制限事項

hangingとeach-lineにはBaseline 2026ブラウザ（Chrome 130+、Safari 18.2+、Firefox 135+）が必要です。古いブラウザはキーワードを静かに無視し、代わりに標準の先頭行インデントを適用します。プログレッシブエンハンスメントには許容できますが、精密なレイアウト要件を損なう可能性があります。
each-lineは強制改行（ 、<hr>、またはテキスト内でdisplay: blockを持つ要素）でのみトリガーされます。狭いコンテナ内のソフトラップ行の後にはリセットされません。ソフトラップ行ごとのインデント制御が必要な場合は、padding-leftと負のtext-indentの回避策を検討してください。
text-indentはインライン要素では機能しません。インライン/ブロックが混在するレイアウトでのインラインレベルの吊り下げインデントには、親ブロックコンテナで目的のインデント幅のpadding-leftと負のtext-indentを使用してください。

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

使い方

em、px、またはrem単位でインデントの長さの値を選択します。参考文献の吊り下げインデントには2emが標準です。
hangingキーワードを切り替えて、最初の行が左揃えで後続の行がインデントされる逆方向インデントを作成します。
each-lineキーワードを切り替えて、最初の行に加えてすべての強制改行（ ）の後にもインデントを適用します。
hangingやeach-lineをサポートしていないブラウザ向けのフォールバックを含む、生成されたCSS宣言をコピーします。

主な用途

最初の行が左揃えで後続の行がインデントされる吊り下げインデントで参考文献エントリをフォーマットし、学術引用スタイルガイドに準拠します。
用語が左揃えで定義テキストがインデントされる定義リストを作成し、hangingとeach-lineを組み合わせて改行のある複数行の定義を処理します。
開口引用符や箇条書きがテキストマージンの外側にぶら下がる吊り下げ句読点効果を適用し、洗練されたタイポグラフィ外観を実現します。

用途

使用例

例

吊り下げインデント付き参考文献

研究論文の参考文献では、各エントリに吊り下げインデントが必要です。最初の行（著者名）は左揃えで、続く行（タイトル、出版社）は2emインデントされます。text-indent: 2em hangingを使用します。ブラウザは最初の行以降のすべての行を自動的にインデントし、ChicagoおよびAPAスタイルの要件に準拠します。

例

each-lineを使用した定義リスト

用語集サイトでは、定義段落内で を使用して使用方法の注釈を主な定義から区切っています。text-indent: 2em hanging each-lineを使用すると、 で区切られた各セグメントの最初の行が逆方向インデント処理されます。改行後の新しいセグメントごとにインデントがリセットされ、各定義セクションが視覚的に分離されます。

よくあるミス

長さの値なしでhangingを使用する。hangingはキーワード修飾子であり、長さではありません。常に最初に長さの値を指定する必要があります（例：text-indent: 2em hanging）。長さがない場合、宣言は無効で何も行われません。
each-lineが通常の段落折り返しで機能すると思い込む。each-lineは強制改行（ など）の後にのみ適用されます。ソフトラップされた各行の後にインデントがリセットされることはありません。行ごとの制御には、padding-leftと負のtext-indentなど、別のアプローチを使用してください。
hangingを負のtext-indent値と組み合わせる。hangingはすでにインデント方向を反転させています。負の値とhangingを併用すると予期しない結果になります。予測可能な動作のためには、hangingでは正の長さの値を使用してください。

検証

Chrome DevToolsでスタイル設定された要素を検査し、計算されたtext-indent値に長さとキーワード部分の両方が含まれていることを確認します。最初のレンダリング行が左揃えで、後続のすべての行が指定された長さだけインデントされていることを確認します。
Firefox 135+またはSafari 18.2+でテストし、レンダリングをChrome 130+と比較します。吊り下げインデントは3つのエンジンすべてで同じように表示される必要があります。その後、hangingをサポートしていないブラウザ（古いChromeバージョンなど）でテストし、フォールバックが標準の先頭行インデントを生成することを確認します。

FAQ

CSS text-indent hanging/each-lineビルダーのFAQ

text-indentのhangingおよびeach-lineキーワードをサポートしているブラウザは？

hangingとeach-lineは両方ともBaseline 2026の機能です。Chrome 130+、Safari 18.2+、Firefox 135+が両方のキーワードをサポートしています。古いブラウザでは、キーワードを無視して通常の先頭行インデントを適用します。このツールはフォールバック宣言を生成するため、レイアウトはグレースフルにデグラデーションします。

hangingはインデント長に任意の単位で使用できますか？

はい。hangingとeach-lineは任意のCSS長さ単位（em、rem、px、ch、ex、cm、パーセンテージ値）で動作します。emはフォントサイズに合わせてスケールするため、タイポグラフィインデントに最も一般的です。パーセンテージ値は包含ブロックの幅に相対的で、ビューポート間で一貫性のない結果を生成します。予測可能な吊り下げインデントにはemまたはremを使用してください。

hangingはインライン要素に影響しますか、それともブロックコンテナのみですか？

text-indentはブロックコンテナ（display: blockを持つフレックスアイテムやグリッドアイテムを含む）にのみ適用されます。インライン要素には効果がありません。インラインまたはインラインブロック要素の場合は、padding-leftと負のmargin-leftを組み合わせて吊り下げインデントをシミュレートしてください。

each-lineは各段落の先頭でも吊り下げインデントをリセットしますか？

hangingとeach-lineは独立したキーワードで、組み合わせることができます。hangingはどの行がインデントされるかを制御し（最初の行は左揃え、残りはインデント）、each-lineはインデントがどこでリセットされるかを制御します（すべての の後）。一緒に使用すると（text-indent: 2em hanging each-line）、各強制改行後に再起動する吊り下げインデントが得られます。各新しい段落は関係なく自然に新しく始まります。