HTMLに行を挿入する方法

このwikiHowでは、HTMLで水平線を作成する方法を説明します。水平線は、Web サイト上のコンテンツを区切るために使用できます。行を作成するコードは非常にシンプルです。ただし、HTML 4.01 では埋め込みコードを追加して行のスタイルを設定できます。 HTML5 では、CSS を使用して行のスタイルを設定する必要があります。 ^{[1] X研究ソース}

方法1方法1/2:

HTML 4.01の使用

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/18\/658928-1-1.jpg\/v4-460px-658928-1-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/18\/658928-1-1.jpg\/v4-728px-658928-1-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1新しい HTML ドキュメントを開くか作成します。 HTML ドキュメントは、メモ帳などのテキストエディターを使用して編集できます。 Adobe Dreamweaver などのコードエディターを使用することもできます。プログラムで HTML ドキュメントを開くには、次の手順を使用するか、他の方法を使用します。
- メモ帳、テキストエディター、またはコードエディターを開きます。
- [ファイル]メニューをクリックします。
- 「開く」をクリックします。
- HTML ファイルを選択します。
- クリックして開く
2行を挿入する場所を選択します。この行を挿入する行の上の行が見つかるまで下にスクロールし、行の左端をクリックしてカーソルを行の直前に置きます。
3空白領域を作成します。 Enter キーを2 回押して、上の行に入力するテキストを下に移動し、カーソルを空白領域まで移動します。
「<hr>」タグを追加します。行頭の前のスペースに<hr>と入力します。 <hr>タグは、ページ全体に水平線を作成する役割を果たします。
5 「hr」タグの前の行を新しい行に移動します。 Enter キーを押すだけです。この時点で、 <hr>タグは独自の行にある必要があります。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f3\/658928-6-1.jpg\/v4-460px-658928-6-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f3\/658928-6-1.jpg\/v4-728px-658928-6-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 6水平線にプロパティを追加します (オプション)。水平線には、長さ、幅、色、配置などのプロパティを追加できます。コード括弧内の「hr」の後に次のコードを使用します。括弧内にスペースで区切ることで複数の属性を追加できます。 ^{[2] X研究ソース}
- 線の太さを変更するには、<hr size="#">と入力します。 # を厚さの数値に置き換えます (例: size="10")。
- 行の幅を変更するには、<hr width="#">と入力します。 # をピクセル単位の幅またはページ幅のパーセンテージ (例: width="200"、width="75%") に置き換えます。
- 行の色を変更するには、<hr color="#">と入力します。 # を色の名前または 16 進コードに置き換えます (例: color="red" または color="#FF0000")。
- 行を揃えるには、 <hr align="#">と入力します。 # を「right」、「left」、または「center」に置き換えます (例: <hr width="50%" align="center"> )。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/be\/658928-7-1.jpg\/v4-460px-658928-7-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/be\/658928-7-1.jpg\/v4-728px-658928-7-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 7 HTML ファイルを保存します。テキストファイルを HTML ドキュメントとして保存するには、ファイル拡張子 (.txt、.docx) を「.html」に置き換える必要があります。 HTML ファイルを保存するには、次の手順に従います。
- [ファイル]メニューをクリックします。
- [名前を付けて保存]をクリックします。
- 「ファイル名」の横に、ファイルの名前を入力します。
- ファイル名の末尾に.htmlと入力します。
- 「保存」をクリックします。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/68\/658928-8-1.jpg\/v4-460px-658928-8-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/68\/658928-8-1.jpg\/v4-728px-658928-8-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 8 HTML をテストします。ファイルを右クリックし、[プログラムから開く]を選択します。次に、「Web ブラウザ」を選択します。「hr」ラベルがあるべき場所に実線が表示されます。 HTMLコードは次のようになります: ^{[3] X調査ソース}
```
<!DOCTYPE html>
<html>
<本文>

< h1 >これはタイトルです</ h1 >

< hrサイズ= "6"幅= "50%"位置= "左"色= "緑" >

< p1 >これはタイトルから線で区切られた段落テキストです。 </p1>

</本文>
</html>
```
広告する

方法2方法2/2:

CSSとHTML5の使用

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1b\/658928-9-1.jpg\/v4-460px-658928-9-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1b\/658928-9-1.jpg\/v4-728px-658928-9-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1新しい HTML ドキュメントを開くか作成します。 HTML ドキュメントは、メモ帳などのテキストエディターを使用して編集できます。 Adobe Dreamweaver などのコードエディターを使用することもできます。プログラムで HTML ドキュメントを開くには、次の手順を使用するか、他の方法を使用します。
- メモ帳、テキストエディター、またはコードエディターを開きます。
- [ファイル]メニューをクリックします。
- 「開く」をクリックします。
- HTML ファイルを選択します。
- クリックして開く
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/04\/658928-10-1.jpg\/v4-460px-658928-10-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/04\/658928-10-1.jpg\/v4-728px-658928-10-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2 HTML ドキュメントに head タグを追加します。 HTML ドキュメントに head タグがない場合は、次の手順に従って head タグを追加します。 head タグは、「<html>」タグの後、「<body>」タグの前に配置されます。
- ドキュメントの先頭に<head>と入力します。
- Enter キーを2 回押すと、新しい行が 2 行追加されます。
- </head>と入力して、ヘッドタグを閉じます。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/ca\/658928-11-1.jpg\/v4-460px-658928-11-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/ca\/658928-11-1.jpg\/v4-728px-658928-11-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3 head タグに<style type="text/css"> と入力します。スタイルタグは 2 つのヘッドタグの間に配置されます。これにより、HTML のスタイルを設定するための CSS コードを入力できる場所が作成されます。
- あるいは、外部スタイルシートを使用することもできます。外部CSS ファイルを HTML ファイルにリンクする方法については、「 CSS ファイルを HTML に追加する方法」を参照してください。
4 hr {を入力します。これは、水平線のスタイルを設定するために使用される CSS タグです。 head タグ内の style タグの後、または外部 CSS ファイルに追加します。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/70\/658928-13-1.jpg\/v4-460px-658928-13-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/70\/658928-13-1.jpg\/v4-728px-658928-13-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5 「<hr>」タグの CSS スタイルを追加します。これらのスタイルは「hr {」タグの後に表示されます。水平線をスタイル設定する方法はたくさんあります。以下にいくつかの例を示します。
- 線の幅を設定するには、width: ##px;と入力します。 ## を、線の幅にしたいピクセル数に置き換えます。ピクセル (px) の代わりにパーセンテージ (%) を使用することもできます。
- 線の太さを設定するには、 height: ##px;と入力します。 ## を、線の太さにしたいピクセル数に置き換えます。
- 行の色を設定するには、 background-color: ##;と入力します。 ## を色の名前、またはポンド記号 (#) に続いて 16 進数の色コードに置き換えます。
- 右余白をピクセル単位で設定するには、 margin-right: ##px;と入力します。 ## をピクセル数または「auto」に置き換えます。線を左または中央に揃えるには、「自動」と入力します。
- 左余白のピクセル数を設定するには、margin-left: ##px;と入力します。 ## をピクセル数または「auto」に置き換えます。行を右揃えにするには「自動」、行を中央揃えにするには「自動」と入力します。
- 行の上余白を設定するには、 margin-top: ##px;と入力します。 ## を余白のサイズまたはピクセル数に置き換えます。
- 行の下余白を設定するには、 margin-bottom: ##px;と入力します。 ## を余白のサイズまたはピクセル数に置き換えます。
- 行の周囲に境界線を作成するには、 「border-width: ##px;」と入力します (オプション)。 ## をピクセル単位の境界線の太さに置き換えます。
- 境界線の色を設定するには、border-color: ##;と入力します (オプション)。 ## を色の名前、またはポンド記号 (#) に続いて 16 進数の色コードに置き換えます。
スタイル設定の後に入力します} 。これにより、<hr> タグのスタイルがオフになります。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/23\/658928-15-1.jpg\/v4-460px-658928-15-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/23\/658928-15-1.jpg\/v4-728px-658928-15-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 7 HTML ドキュメントの body タグの任意の場所に<hr>と入力します。これにより、HTML ドキュメントに水平線が追加されます。 HTML ドキュメントで <hr> タグを使用するたびに、CSS スタイルが適用されます。 ^{[4] X研究ソース}コードは次のようになります。
```
 <!DOCTYPE html>
<html>
<ヘッド>
<スタイルタイプ= "text/css" >

時間{
幅: 50 % ;
高さ: 20ピクセル;
背景色:赤;
右マージン:自動;
左マージン:自動;
上マージン: 5 px ;
下部マージン: 5 px ;
境界線の幅: 2px ;
境界線の色:緑;
}

</スタイル>

</ヘッド>
<本文>

< h1 >これはタイトルです</ h1 >

<時間>

<p1>これは水平線で区切られた段落テキストです</p1>

</本文>
</html>
```
広告する