HTML の行をスキップする

1. <p> タグを使用して HTML の行をスキップする
2. 2つの <br> タグを使用して HTML の行をスキップする
3. HTML の行をスキップするには、<hr> タグの opacity プロパティを 0 に設定する
4. CSS の margin プロパティを使用して、HTML の行をスキップする

この記事では、HTML で行をスキップまたは追加するいくつかの方法について説明します。

<p> タグを使用して HTML の行をスキップする

HTML の行をスキップする最も簡単な方法は、<p> タグを使用することです。段落要素である <p> タグは、HTML で段落を作成します。

段落は、HTML ドキュメントのテキストのブロックを表すブロックレベルの要素です。2つの段落の間に空白行が常にあります。

このようにして、2つの段落を識別できます。 <p> 要素を使用すると、行が自動的にスキップされます。

簡単な例で実装してみましょう。

まず、<p> タグを作成し、タグ内に任意のテキストを書き込みます。次に、別の <p> タグを作成し、その中に段落の内容も書き込みます。

以下のコードスニペットは、2つのテキストの間に空白行を追加します。これは、HTML のテキスト間の行をスキップする方法です。

サンプルコード：

<p>
 The first paragraph
</p>
<p>
 The second paragraph
</p>

2つの <br> タグを使用して HTML の行をスキップする

<br> タグを使用して、HTML の行をスキップすることもできます。改行要素である <br> は、1 行を区切ります。

2 回連続して使用すると、2 行が途切れるため、空白行が作成されます。タグには終了タグがありません。空のタグと呼ばれます。

<br> タグの 1つのアプリケーションは、詩を書いている間、テキストを新しい行に向けることです。

以下の例を見てください。ここでは、詩の 2つのスタンザ間の行をスキップするために <br> タグを実装しています。最初の行の終わりにある <br> タグは、行を分割して次の行に移動します。

2 行目以降は、2つの <br> タグを使用しています。最初のものはラインを壊し、3 番目のラインに向けられます。

次に、2 番目の <br> タグが 3 番目の行を分割し、空白行を作成します。その後、各行の終わりに 1つの <br> タグを使用して、別の詩のスタンザを作成しました。

したがって、この例は、2つの <br> タグを使用してテキスト間の行をスキップする方法を示しています。

サンプルコード：

<p>
 got out of the bed at four, not seven<br>
 after meditation, it was like heaven<br>
 <br>
 kept myself up, coding till eleven<br>
 lately i've been doing Java, I 'll be using Maven
</p>

HTML の行をスキップするには、<hr> タグの opacity プロパティを 0 に設定する

このメソッドは、HTML の行をスキップするトリックを実装します。秘訣は、<hr> タグを使用して非表示にすることです。

<hr> タグは水平線を作成します。水平線の CSS opacity プロパティを 0 に設定できます。

その結果、水平線が占めるスペースは空白行のようになります。

たとえば、選択したテキストを記述します。次に、<hr> タグを使用して水平線を作成します。

style 属性を使用して、CSS スタイルをインラインで適用します。opacity プロパティを 0 に設定します。 <hr> の後に、別の行を書き込みます。

ここで、opacity プロパティの 0 値は、水平線を完全に透明にします。値 0 は要素を完全に透明にし、値 1 は要素を完全に不透明にします。

したがって、この例は、<hr> タグと opacity プロパティを使用してテキスト間の行をスキップする方法を示しています。

サンプルコード：

The line before blank line
<hr style="opacity:0">
The line after blank line

CSS の margin プロパティを使用して、HTML の行をスキップする

次に、CSS の margin プロパティを使用して HTML の行をスキップする最後の方法について説明します。

<section> タグを使用して、スキップされた行の後に書き込むテキストのセクションを表すことができます。次に、そのセクションの上部にマージンを適用して、空白が発生するようにします。

たとえば、選択したテキストを記述します。次に、<section> 要素を作成し、その中にテキストを書き込みます。

CSS で、section 要素を選択し、その margin プロパティを 1em 0 に設定します。値 1em は、セクションの上部と下部のマージンに似ています。

その結果、テキストの上下にフォントサイズと同じサイズの空白が作成されます。

これは、CSS の margin プロパティを使用して HTML に空白行を作成する方法です。

HTML コード：

This is the first line
<section>This is the line after the skipped line</section>

CSS コード：

section {
 margin: 1em 0;
}