行間の高さの HTML コード

Web ページの段落内のテキスト行間の垂直方向のスペースを制御して、視覚的なプレゼンテーションを改善します。テキストで埋める少し余分なスペースが必要な場合、または特定のスペースに少し余分なテキストを詰める必要がある場合は、HTML および CSS タグを使用して行間隔を変更して適合させることができます。数行のコードで、Web ページの行間隔の高さ、つまり「行の高さ」を調整できます。

厳密な HTML

適切に見える行間隔を作成したり、テキストのセクションがサイトのテキスト領域内に完全に収まるようにするには、厳密な HTML を使用します。 「font」タグを使用して、次のようなコードを作成します:

「150%」は、テキストの行間を増やす部分です。間隔を増減するには、他の値に置き換えてください。

スパン タグ

タグの開始と終了の間に入力されたテキストに行の高さの変更を適用するには、スパン タグを使用します。コーディングは似ています:

ここにテキストが入ります...

大、中、小の相対的なサイズではなく、ピクセル数を使用してフォント サイズを設定します。フォント サイズを正確に測定することで、テキストをより適切に制御し、行間隔を適切に機能させることができます。

CSS の代替案

行間隔はカスケーディング スタイル シート (CSS) を使用して設定することもできます。 CSS は、ページ上のテキストの単一セクションまたは一般的に使用されるアイテムのクラス全体に設定するスパン ID など、CSS を適用することを決定した要素を制御します。たとえば、ブログ サイトで作業している場合、ブログ エントリ用のクラスを作成し、クラスのスタイルシートの行の高さを 135% に設定できます。すべてのブログ エントリの行の高さは同じです。 CSS で「行の高さ」を設定するコードは次のとおりです:

{line-height:150%;}

WYSIWYG 行間制御

これらのコーディングの問題の多くは、WYSIWYG Web エディターを使用するか、WordPress や Joomla などのオンライン ソフトウェア、または Weebly、Wix、Moonfruit などの無料の Web サイト作成ツールを使用してサイトを作成することで回避できます。これらのツールはすべて、当て推量や頭を悩ませる必要のないテキスト エディターを提供します。マウス ボタンをクリックするだけで、お気に入りのワード プロセッサで文書を書いている場合と同じように、行間が広がります。

ほとんどの Web エディターは、インターフェイスの WYSIWYG に関係なく、コーディングの方法を知っていれば、以前よりもコーディングの量が少なくなったとしても、はるかに使いやすくなっています。