HTMLで線を挿入する方法

このHow.com.vnでは、HTMLで横線を表示させる方法を紹介します。横線は、ウェブサイトでコンテンツを区切るのに使うことができます。線を表示させるコードはとても簡単です。しかし、HTML4.01ではインラインでコードを追加して線を表示できますが、HTML5ではCSSを使う必要があります。^{[1]X出典文献}

方法 1

方法 1 の 2:

HTML 4.01の場合

PDF形式でダウンロード

1
新規HTML文書を開く、または作成する　HTML文書は、Notepadなどのテキストエディタを使って編集することができます。また、Adobe Dreamweaverなどのコードエディタを使うことも可能です。以下の手順に従って、Notepad、またはお好みのプログラムでHTML文書を開きましょう。
- Notepad、またはお好みのテキストエディタやコードエディタを開く。
- ファイルメニューをクリックする。
- 開くをクリックする。
- HTMLファイルを選択する。
- 開くをクリックする。
横線を挿入したい行までスクロールダウンし（この行は挿入した横線の下になる）、一番左側をクリックして、行頭にカーソルを置きましょう。
↵ Enterを2回押し、このテキストを下へ動かしたら、カーソルを今空けたスペースのところへ戻します。
行頭に<hr>と入力します。<hr>タグは、ページの中で横線を表示させる役割をもちます。
↵ Enterを押すと移動できます。この時点で、<hr>タグの行は、それだけが記述された行となっているはずです。
6
横線に属性を追加する（任意で）　横線に、長さ、幅、色、配置などの属性を追加することができます。括弧内の「hr」の後ろに、以下に紹介するコードを記述しましょう。1つ以上の属性を、同じ括弧の中にスペースで区切って入力することもできます。^{[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">）と入力します。
7
HTMLファイルを保存する　テキストファイルをHTML文書として保存するには、拡張子（.txt、.docx）を「.html」に置き換える必要があります。以下の手順に従い、HTML文書を保存しましょう。
- ファイルメニューをクリックする。
- 名前を指定して保存をクリックする。
- 「ファイル名」の横にファイルの名前を入力する。
- ファイル名の後ろに.htmlを入力する。
- 保存をクリックする。
8
HTMLの表示を確認する　HTMLファイルを確認するには、ファイル上で右クリックしてプログラムから開くを選び、ウェブブラウザを選択しましょう。「hr」タグを挿入した部分に横線が表示されているはずです。また、HTMLのコードは、次のように記述されているはずです。^{[3]X出典文献}
広告

方法 2

方法 2 の 2:

CSS/HTML5の場合

PDF形式でダウンロード

1
新規HTML文書を開く、または作成する　HTML文書は、Notepadなどのテキストエディタを使って編集することができます。また、Adobe Dreamweaverなどのコードエディタを使うことも可能です。以下の手順に従って、Notepad、またはお好みのプログラムでHTML文書を開きましょう。
- Notepad、またはお好みのテキストエディタやコードエディタを開く。
- ファイルメニューをクリックする。
- 開くをクリックする。
- HTMLファイルを選択する。
- 開くをクリックする。
2
HTML文書にheadを追加する　HTML文書にまだheadが入力されていない場合は、以下の手順に従って追加しましょう。headは<html>タグと<body> タグの間に挿入します。
- 文書の一番上に<head>と入力する。
- ↵ Enterを2回押して、新しい行を2行追加する。
- </head>と入力してheadを閉じる。
3
headに<style type="text/css">と入力する　styleタグは2つのheadタグの間に挿入します。styleタグを使うと、HTMLの書式を設定するCSSコードを記述できます。
- または、別途スタイルシートを作ることもできます。別途作成したCSSファイルをHTMLファイルにリンクさせる方法については、インターネットなどで検索してみましょう。
hr {と入力する　これは横線の書式を設定するためのCSSタグです。headのstyleタグの後ろにこれを追加するか、別途作成したCSSファイルに記述しましょう。
5
<hr>タグにCSSコードを追加する　「hr {」タグの後に追加します。横線の書式を設定する方法はたくさんあります。以下に例を挙げます。
- 線の幅を設定するには、width: ##px;と入力します。##の部分には、線の幅を指定するピクセル値を入力します。ピクセル（px）の代わりに割合（%）を使うことも可能です。
- 線の太さを設定するには、height: ##px;と入力します。##の部分には、線の太さを指定するピクセル値を入力します。
- 線の色を設定するには、background-color: ##;と入力します。##の部分には、色の名前、またはシャープ（#)の後に16進法のカラーコードを続けて入力します。
- 画面右端からのマージンをピクセル値で設定するには、margin-right: ##px;と入力します。##の部分には、ピクセル値または「auto」と入力します。線を左または中央に配置するには「auto」と入力しましょう。
- 画面左端からのマージンをピクセル値で設定するには、margin-left: ##px;と入力します。##の部分には、ピクセル値または「auto」と入力します。線を右または中央に配置するには「auto」と入力しましょう。
- 線の上側のマージンを設定するには、margin-top: ##px; と入力します。##の部分には、マージン幅を指定するピクセル値を入力します。
- 線の下側のマージンを設定するには、margin-bottom: ##px;と入力します。##の部分には、マージン幅を指定するピクセル値を入力します。
- 線に沿って枠を作るには、border-width: ##px;と入力します（任意で）。##の部分には、枠の太さを指定するピクセル値を入力します。
- 枠の色を設定するには、border-color: ##;と入力します（任意で）。##の部分には、色の名前、またはシャープ（#）の後ろに16進法のカラーコードを続けて入力します。
これで<hr>タグの書式設定を終了します。

How.com.vn 日本語: Step 7 HTML文書でbody内の任意の場所に<hr>を入力する

入力すると、HTML文書に横線が追加されます。HTMLで<hr>を使うと、常にCSSで指定した書式設定が適用されます。 ^{[4]X出典文献}コードは次のように記述されているはずです。

<!DOCTYPE html><html><head><style type="text/css">hr {width: 50%;height: 20px;background-color: red;margin-right: auto;margin-left: auto;margin-top: 5px;margin-bottom: 5px;border-width: 2px;border-color: green;}</style></head><body><h1>This is a heading</h1><hr><p1>This is a paragraph text separated by a horizontal line</p1></body></html>