CSS line-height

design/css-line-height

倍率を入力して単位なしの line-height 宣言を生成し、0 以下や非数値はエラーとして確認できます。

最終更新日 2026-07-03 ・ by yuzlrin

このツールでできること

CSS line-heightでは、倍率を入力して単位なしの line-height 宣言を生成し、0 以下や非数値はエラーとして確認できます。
関連する観点として line height、CSS line-height、css line height を確認し、結果をコピーして別の作業に使えます。

倍率

結果

使い方

倍率入力欄に 1.2、1.6、2 などの正の数値を入れます。
結果欄に表示される line-height: n; の単位なし CSS 宣言を確認します。
0 以下を入れた場合はエラー表示を見て、正の倍率へ直します。
本文、見出し、UI ラベルで必要な読みやすさに合わせて倍率を調整します。

入力例・出力例

INPUT

1.6

OUTPUT

line-height: 1.6;

本文向けの余裕を持った倍率として使いやすい値です。

INPUT

OUTPUT

0より大きい値を入力してください

実装は 0 以下を CSS 宣言にせず、エラー文を返します。

よくある利用シーン

単位なし line-height を CSS に貼る前に宣言形式を作りたいとき。
本文の読みやすさを 1.5〜1.8 付近で調整する場面。
見出し用に 1.2 前後の詰めた行間を試すとき。
line-height-scale の段階値ではなく、任意の倍率を直接指定したいとき。

結果確認のポイント

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

注意点

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

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

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

FAQ

よくある質問

対応しているブラウザは？

Chrome、Safari、Firefox、Edgeなど主要モダンブラウザの最新版で動作確認しています。Internet Explorerや極端に古いバージョンは対象外です。

入力したデータはサーバーに送信されますか？

いいえ。CSS line-heightはすべての処理をお使いのブラウザ内で完結させます。入力内容がサーバーに送信されたり保存されたりすることはありません。

Tailwind CSSのクラスも生成できますか？

いいえ。このツールが出力するのは line-height: 1.6; のような単位なしCSS宣言だけです。Tailwind CSSで使う場合は、出力値を見て必要なクラスや任意値記法へ手動で置き換えてください。

関連ツール

border-radiusジェネレーター

CSSのborder-radiusをGUIで視覚的に調整。四隅を連動または個別に動かし、1値または4値のCSSを生成する。

Box Shadow生成

CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。

Material Elevation

Material Elevationの代表レベルを、単層box-shadow値の固定表で確認できます。

accent-colorが効く要素

CSS accent-colorが反映されるフォーム部品4種を、HTML要素名と用途で確認できます。

CSS角度単位

CSSで使うdeg・grad・rad・turnの角度単位と、1周あたりの基準値を一覧表示します。

animation-direction

CSS animation-directionのnormal・reverse・alternate・alternate-reverseを用途付きで確認できます。

animation-fill-mode

CSS animation-fill-modeの4値を、アニメーション前後のスタイル保持ルールとして確認できます。

CSSアニメーション生成

CSSアニメーションのキーフレームを視覚的に作成・プレビュー。イージング関数の選択、コードのコピーまでワンストップ。

読み込み中...

このツールでできること

CSS line-heightでは、倍率を入力して単位なしの line-height 宣言を生成し、0 以下や非数値はエラーとして確認できます。

関連する観点として line height、CSS line-height、css line height を確認し、結果をコピーして別の作業に使えます。

使い方

倍率入力欄に 1.2、1.6、2 などの正の数値を入れます。

結果欄に表示される line-height: n; の単位なし CSS 宣言を確認します。

0 以下を入れた場合はエラー表示を見て、正の倍率へ直します。

本文、見出し、UI ラベルで必要な読みやすさに合わせて倍率を調整します。

よくある利用シーン

単位なし line-height を CSS に貼る前に宣言形式を作りたいとき。

本文の読みやすさを 1.5〜1.8 付近で調整する場面。

見出し用に 1.2 前後の詰めた行間を試すとき。

line-height-scale の段階値ではなく、任意の倍率を直接指定したいとき。

結果確認のポイント

生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。

line height、CSS line-height、css line heightの観点で、入力内容と出力内容がずれていないか見直してください。

コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

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

CSS line-heightの主要な処理はブラウザ内で実行されます。

入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。

本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

よくある質問

対応しているブラウザは？

Chrome、Safari、Firefox、Edgeなど主要モダンブラウザの最新版で動作確認しています。Internet Explorerや極端に古いバージョンは対象外です。

入力したデータはサーバーに送信されますか？

Tailwind CSSのクラスも生成できますか？