コンテンツ

• ステップ
• 方法1/2：HTML4.01での作業
• 方法2/2：CSS / HTML5での作業

この記事では、HTMLで水平線を追加する方法を説明します。水平線は、サイトのコンテンツを区切るために使用できます。行を作成するためのコードは非常に単純です。ただし、HTML 4.01では、内部コマンドを使用して行のデザインを変更することができます。 HTML5では、CSSを使用して線のスタイルを設定する必要があります。

ステップ

方法1/2：HTML4.01での作業

1. 1 既存のHTMLドキュメントを開くか、新しいHTMLドキュメントを作成します。 HTMLドキュメントは、メモ帳などのテキストエディターまたはAdobeDreamweaverなどの専用コードエディターで編集できます。次の手順に従って、選択したプログラムでHTMLドキュメントを開きます。
   • メモ帳または別のテキスト/コードエディタを開きます。
   • メニューを開く ファイル.
   • クリック 開ける.
   • HTMLファイルを選択します。
   • クリック 開ける
2. 2 行を挿入する場所を選択します。 上に線が表示される行が見つかるまで下にスクロールし、その行の左端をクリックして、カーソルをその行の先頭に直接移動します。
3. 3 空の行を追加します。 ダブルタップ ↵入力行を挿入する前のテキストを下に移動してから、空の行にカーソルを置きます。
4. 4 hr>タグを追加します。 入力 時間> 行頭の空白スペースに移動します。鬼ごっこ 時間> ページ全体に水平線を引くことができます。
5. 5 を押して、「hr」タグの後のカーソルを新しい行に移動します ↵入力. 今タグ 時間> 別の行にある必要があります。
6. 6 水平線に属性を追加します（オプション）。 長さ、厚さ、色、配置などの属性を追加します。 「hr」の直後に中括弧で囲みます。複数の属性を追加するには、それらをスペースで区切ります。
   • 入力 時間サイズ= "＃">線の太さを変更します。 「＃」を厚みの数値に置き換えます（たとえば、size = "10"）。
   • 入力 時間幅= "＃">線幅を変更します。 「＃」をピクセル数またはページ幅のパーセンテージに置き換えます（たとえば、width = "200"またはwidth = "75％"）。
   • 入力 時間の色= "＃">線の色を変更します。 「＃」を色の名前またはその16進コードに置き換えます（たとえば、color = "red"またはcolor = "＃FF0000"）。
   • 入力 hr align = "＃">線を揃えます。 「＃」を「right」（右）、「left」（左）、または「center」（中央）に置き換えます（たとえば、 hr width = "50％" align = "center">).
7. 7 HTMLファイルを保存します。 テキストファイルをHTMLドキュメントとして保存するには、ファイル拡張子（.txt、.docx）を「.html」に変更する必要があります。次の手順に従って、HTMLドキュメントを保存します。
   • メニューを開く ファイル.
   • クリック 名前を付けて保存.
   • [ファイル名]フィールドにファイルの名前を入力します。
   • 追加 .html ファイル名の後。
   • クリック 保存する.
8. 8 HTMLドキュメントを確認してください。 HTMLファイルを確認するには、ファイルを右クリックして[プログラムから開く]を選択します。次に、Webブラウザを選択します。 「hr」タグを挿入した場所に実線が表示されます。 HTMLコードは次のようになります。

   ！DOCTYPE html> html> body> h1>見出し/ h1> hr size = "6" width = "50％" align = "left" color = "green"> p1>この行は見出しから1行で区切る必要があります。/P1>/本体> / html>

方法2/2：CSS / HTML5での作業

1. 1 既存のHTMLドキュメントを開くか、新しいHTMLドキュメントを作成します。 HTMLドキュメントは、メモ帳などのテキストエディターまたはAdobeDreamweaverなどの専用コードエディターで編集できます。次の手順に従って、選択したプログラムでHTMLドキュメントを開きます。
   • メモ帳または別のテキスト/コードエディタを開きます。
   • メニューを開く ファイル.
   • クリック 開ける.
   • HTMLファイルを選択します。
   • クリック 開ける
2. 2 HTMLドキュメントにタイトルを追加します。 HTMLドキュメントにまだ見出しがない場合は、次の手順に従って見出しを追加します。見出しは、html>タグの後、body>タグの前に配置する必要があります。
   • 入力 頭> ドキュメントの上部にあります。
   • ダブルタップ ↵入力2つの新しい行を追加します。
   • 入力 /頭>タイトルを閉じます。
3. 3 入力 スタイルタイプ= "text / css"> ヘッダー内。 スタイルタグは2つの見出しタグの間に配置され、CSSを使用してHTMLデザインを変更できる場所を作成します。
   • または、外部スタイルシートを使用することもできます。記事を読む "CSSファイルをHTMLに挿入する方法»外部CSSファイルをHTMLファイルにリンクする方法を学習します。
4. 4 入力 時間{. これは、水平線をスタイリングするためのCSSタグです。ヘッダーまたは外部CSSファイルの「style」タグの後に追加します。
5. 5 hr>タグにCSSスタイルを追加します。 「hr {」タグの後に来る必要があります。水平線はさまざまな方法でスタイルを設定できます。以下はそれらのいくつかです。
   • 入力 幅：## px;線幅を調整します。 「##」をピクセル単位の線幅に置き換えます。ピクセル（px）の代わりに、パーセンテージ（％）を使用できます。
   • 入力 高さ：## px;線の太さを調整します。 「##」をピクセル単位の線幅に置き換えます。
   • 入力 背景色：##;線の色を指定します。 「##」を色名またはハッシュ（＃）の後に16進数のカラーコードで置き換えます。
   • 入力 マージン右：## px;右端からのピクセル数を指定します。 「##」を数値のピクセル数またはコード「auto」に置き換えます。 「auto」と入力して、線を左または中央に揃えます。
   • 入力 マージン左：## px;左端からのピクセル数を指定します。 「##」を数値のピクセル数またはコード「auto」に置き換えます。 「auto」と入力して、線を右または中央に揃えます。
   • 入力 マージントップ：## px; 行の上部のパディングを指定します。 「##」をピクセル単位のパディングに対応する数値に置き換えます。
   • 入力 margin-bottom：## px;行の下部のパディングを指定します。 「##」をピクセル単位のパディングに対応する数値に置き換えます。
   • 入力 border-width：## px;線の周りにボックスを描画します（オプション）。 「##」を、境界線の幅に対応するピクセル単位の数値に置き換えます。
   • 入力 ボーダの色： ＃＃;境界線の色を指定します（オプション）。 「##」を色名またはハッシュ（＃）の後に16進数のカラーコードで置き換えます。
6. 6 入力 } スタイル属性の後に、hr>タグのスタイリングを完了します。
7. 7 入力 時間> HTMLドキュメントの本文の任意の場所に、水平線を追加します。 CSSスタイル設定は、HTMLドキュメントでhr>タグを使用するたびに適用されます。コードは次のようになります。

   ！DOCTYPE html> html> head> style type = "text / css"> hr {width：50％;高さ：20px;背景色：赤;マージン右：自動;マージン左：自動;マージントップ：5px;マージンボトム：5px; border-width：2px;ボーダーカラー：グリーン; } / style> / head> body> h1> Heading / h1> hr> p1>この行は、水平線/ p1> / body> / html>で見出しから分離する必要があります。