Change language
Python.Engineering Wiki Javascriptの行の高さ

Javascriptの行の高さ

__del__ | ast Python module | base64 Python module | code Python module | COM PHP module | dis Python module | Ev PHP module | exp | FFI PHP module | html Python module | http Python module | imp Python module | io Python module | JavaScript | keyword Python module | nis Python module | os Python module | PS PHP module | Python functions | Rar PHP module | re Python module | resource Python module | site Python module | StackOverflow | time Python module | types Python module | UI PHP module
Michael Zippo Michael Zippo

CSSのline-heightプロパティは、さまざまなHTML要素の行の高さを決定します。これは通常、テキスト行間の距離を定義するために使用されます。行の高さは、単語（キー、パーセンテージ、数値）を使用して設定できます。

CSSのline-heightプロパティを使用すると、開発者はWebページの2つのインライン要素間のスペースを設定できます。開発者は、CSSのline-heightプロパティを使用して、Webページ上のテキストの行間の距離を増減することがよくあります。

このチュートリアルでは、CSSのline-heightプロパティの使用方法について説明します。開始するために例を参照します。このチュートリアルを読み終える頃には、コードでline-heightプロパティを使用する方法を十分に理解しているはずです。

Line-height CSS

line-heightCSSプロパティ行ボックスの高さを定義します。線の領域は、CSSの領域を構成する線です。この方法は、テキストの行間の距離を定義するためによく使用されます。

行の高さを調整すると、Webページ上のテキストの行（または他の要素）間の間隔を間接的に調整できます。これは、MicrosoftWordでダブルスペースまたは1.15スペースを使用してテキストをフォーマットするのと非常によく似ています。

行の高さのCSSプロパティの構文は、次のとおりです。

「lineHeight」は、要素の高さを定義する長さの値を指します。

3種類の値。line-heightプロパティで使用できます。長さ、数、パーセンテージです：

値説明 値の例、 Äã‚Äã 結果例の値、Äã‚Äã
長さ 特定の測定単位（em、px、cmなど）を使用して線の高さを定義します。 10ピクセル、15ピクセル、20ピクセル 10ピクセルを指定すると、線の高さは10ピクセルになります。
数値行の高さをフォントサイズの倍数に設定します。 1、1、8、2 フォントサイズが10pxの場合、行の高さはそれぞれ10px、18px、20pxになります。
パーセンテージ 行の高さをアイテムのフォントサイズのパーセンテージとして定義します。 30％、50％、110％ フォントサイズが10pxの場合、行の高さはそれぞれ3px、5px、11pxになります。

または、キーワード「normal」を指定することもできます。このキーワードは、デフォルトのブラウザの使用を指定します。この値は、ユーザーが使用するブラウザによって異なりますが、通常は約1.2です。

line-heightプロパティをボックスに適用すると、そのボックス内のすべてのテキストは、指定した.lineボックスの高さを使用します。

アクセシビリティに関する注意

行の変更間隔はline-heightプロパティの一般的な使用法です。これは、行間に十分なスペースがあることを常に確認する必要があるためです。行間に十分なスペースがないと、テキストが読みづらくなる可能性があります。

読みにくいテキストは、視覚障害者に特に深刻な影響を及ぼします。ウェブサイトを作成するときは、アクセシビリティを常に考慮に入れる必要があります。

数値を使用して行の高さを設定する場合CSSの要素、あなたはshoul d1.5未満の値を使用しないでください。これは、行の高さの値が1.5未満の場合、視覚障害のある読者がサイトを使用しにくくなる可能性があるためです。

行の高さのCSSの例

「私たちについて地元の料理クラブのウェブサイトのページ。このページには、見出しの後にクラブの説明を説明するテキストの段落が続きます。

テキストの間隔を適切に設定する必要があるため、 Webページのテキスト段落の行の高さを1.6remに設定します。これは、次のコードを使用して行うことができます。

コードは次を返します：クリック `[コードの実行]ボタンの画像、円の内側の三角形`

HTMLファイルでは、

タグを使用して「AboutUs」ヘッダーを定義しました。そこで、Fantastic Chefsの説明を記述し、HTMLに含めました。

タグ。

CSSファイルでルールを定義しました。ルールは2つのCSSプロパティを使用します。行の高さを1.6remに設定し、フォントサイズを設定します。すべてのHTML

タグで16pxまで。

line-heightプロパティで使用した「rem」の測定単位は、ルート要素のフォントサイズに対する行の高さを定義します。「rem」は「ルート要素」。つまり、フォントサイズが16pxだったため、このテキストの段落の行の高さは25.6px（16px * 1.6）でした。

上の段落のテキストは十分な間隔があり、間隔がありません。オーバーラップ。

前の例のタグ内のすべてのテキストの行の高さが値「we」に設定されます。これは、タイトルと

タグが影響を受けることを意味します。

結論

CSS行-heightプロパティラインボックスの高さを定義します。通常、このプロパティは、段落または見出しのテキスト行間の間隔を設定するために使用されます。行の高さは、通常のキーワード、パーセンテージ、長さ、または数値を使用して設定できます。

このチュートリアルでは、CSSの行の高さプロパティの基本とコードでの使用方法について説明しました。これで、エキスパートのようにCSSのline-heightプロパティの使用を開始するための知識が得られました！

Web開発者になりたいですか？最高の学習リソースとコースに関する専門家のアドバイスとヒントについては、CSS学習ガイドをご覧ください。