HTMLで水平線を作成する方法

ページ名：HTMLで水平線を作成する方法

あなたは？ に水平線を追加したいですか？ 水平線は、水平罫線とも呼ばれ、ウェブサイトのテキストブロックやその他のコンテンツを区切るために使用できます。HTMLで水平線を追加するのはとても簡単です。 CSSやHTMLのインライン属性を使って、水平線をスタイルすることもできます。 このWikiHowでは、HTMLとCSSで水平線を追加し、スタイルを設定する方法を説明します。

方法1

CSSを使用する

  1. 新しいHTMLドキュメントを開くか作成します。HTML文書はメモ帳などのテキストエディタで編集できます。 また、Adobe Dreamweaverや.NETなどのコードエディタを使用することもできます。 以下の手順で、お好みのプログラムでHTML文書を開きます：
    • メモ帳、またはお好みのテキストエディタ/コードエディタを開きます。
    • ファイルメニューをクリックします。
    • 開く」をクリックします。
    • HTMLファイルを選択します。
    • 開く」をクリックします。
  2. HTML文書に見出しを追加します。 HTML文書にまだheadがない場合は、以下の手順でheadを追加します。 headは「<html>」タグの後、「<body>」タグの前に記述します。
    • 文書の先頭に<head>と入力する。
    • Enterキーを2回押して2行追加する。
    • </head>と入力してheadセクションを閉じる。
  3. headセクションに<style>と入力する。 styleタグは、headタグの開始と終了の間に入ります。 これにより、HTMLのスタイルを設定するためのCSSコードを入力するセクションが作成されます。
    • あるいは、HTMLにスタイルを設定することもできます。
  4. hr {. これは、横線をスタイルするためのCSSタグです。 head内のstyleタグの後か、外部CSSファイルに追加してください。
    • また、横線に異なるスタイルを作成することもできます。
  5. <hr>タグにCSSスタイルを追加します。 これらは "hr {"タグの後に記述します。 水平線をスタイルする方法はたくさんあります。 以下はその例です。
    • 幅：幅を入力します：行の幅を設定するには##px;と入力します。 "##"は行の幅のピクセル数に置き換えてください。 ピクセル（px）の代わりにパーセント（%）を使うこともできます。
    • 高さ： 高さを入力：##と入力すると線の太さを設定できます。 を線の太さのピクセル数に置き換えてください。
    • Color: background-colorと入力：##線の色を設定する。 を色の名前に置き換えるか、「#」の後に「.」を付けます。
    • 右マージン： margin-right と入力する：##右端からのピクセル数を設定する。 "##"をピクセル数または "auto "に置き換えてください。 auto "を使用すると、指定した幅内で行が中央に配置されます。 残りのスペースは左右のマージンで均等に分割されます。
    • 左マージン： margin-leftと入力する：左端からのピクセル数を設定するには##px;と入力します。 "##"はピクセル数または "auto "に置き換えてください。auto "を使用すると、指定した幅内で行が中央に配置されます。 残りのスペースは、左右のマージンで均等に分割されます。
    • 上マージン： margin-topと入力する：行の上端に余白を設定するには##px;と入力します。 をピクセル数に置き換えてください。
    • 下マージン： margin-bottomと入力：行の下マージンを設定するには##px;と入力します。 を余白の太さのピクセル数に置き換えてください。
    • ボーダー border-width：##行の周囲にボーダーを設定します（オプション）。 を太さのピクセル数に置き換えます。
    • Border Color: border-colorと入力：##ボーダーの色を設定します（オプション）。 を色の名前に置き換えるか、ポンド記号（#）の後に16進数のカラーコードを追加します。
  6. スタイル設定の後に「}」と入力します。 これで<hr>タグのスタイル設定は終了です。
  7. Enter ↵ を押して、</style>と入力します。 これで新しい行が作成され、HTMLのスタイルセクションを閉じるタグが追加されます。</style>」は、HTML文書のスタイル要素をすべて追加した後に入力します。
  8. HTML文書の本文の任意の場所に<hr>と入力します。 HTMLタグの本文とは、「<body>」タグと「</body>」タグの間の部分です。 これでHTML文書に横線が追加されます。 HTMLの中で「<hr>」タグを使用すると、いつでもCSSのスタイル設定が適用されます。
    • 横線にスタイル・クラスを定義している場合は、代わりに{{kbd|<div ></div>}と入力してください。 class_name]は定義したクラス名に置き換えてください。
  9. HTMLファイルを保存します。 テキストファイルをHTML文書として保存するには、ファイルの拡張子（.txt、.docx）を".html "に置き換える必要があります。 以下の手順でHTML文書を保存してください：
    • ファイルメニューをクリックします。
    • 新規にHTMLファイルを作成する場合は、[名前を付けて保存]をクリックします。 既存のHTMLファイルを保存する場合は、「保存」をクリックします。
    • ファイル名」の横にファイル名を入力します。
    • 末尾のファイル拡張子を削除します（".txt"、".docx "など）。
    • 拡張子を".html "に置き換えます。
    • 保存をクリックします。
  10. HTMLをテストする。HTMLファイルをテストするには、ファイルを右クリックし、「Open with」を選択します。 次にウェブブラウザを選択します。 <hr>」タグの位置に実線が表示されるはずです。 HTMLコードは以下のようになるはずです：
      <!DOCTYPE html> <html> <head> <style> hr { width: 50%; height: 20px; background-color: red; margin-right: auto; margin-left: auto; margin-top: 5px; margin-bottom：border-width: 2px; border-color: green; } </style> </head> <body> <h1>これは見出しです</h1> <hr> <p1>これは水平線で区切られた段落テキストです</p1> </body> </html>
方法2

インラインHTMLを使う

  1. 新しいHTMLドキュメントを開くか作成します。HTML文書はメモ帳などのテキストエディタで編集できます。 また、Adobe Dreamweaverや.NETなどのコードエディタを使うこともできます。 以下の手順で、お好みのプログラムでHTML文書を開いてください：
    • メモ帳、またはお好みのテキストエディタ/コードエディタを開きます。
    • ファイルメニューをクリックします。
    • 開く」をクリックします。
    • HTMLファイルを選択します。
    • 開く」をクリックします。
  2. 行を挿入する箇所を選択します。HTML文書の「<body>」セクションに横線を挿入することができます。 行を挿入したいスペースが見つかるまで下にスクロールし、行の左端をクリックしてカーソルを行頭の直前に置きます。
  3. Enter ↵ を2回押して空白を作る。 これで、行を挿入したいテキストが下に移動します。
  4. 行を追加したい位置にカーソルを戻します。 クリックするか、キーボードの矢印キーを使って、行を追加したい位置までカーソルを戻します。
  5. 行が始まる前のスペースに「<hr>」と入力する。<hr>」タグは、ページ全体に横線を引く役割を果たします。 このタグを単独で使用すると、基本的な横線が作成されます。
  6. Enter ↵ を押して、"<hr>" をそれ自身の行に配置します。この時点では、<hr>タグは独立した行にあり、その左右に他のコードはありません。
  7. <hr>」タグの中にstyle=を入力します（オプション）。 横線にスタイルを付けたい場合は、インラインHTMLを使って行います。 横線をスタイルするには、"<hr>"タグの中の "hr "の後に "style="と入力します（例：<hr style=>.
  8. スタイル属性を追加する（オプション）。 スタイル属性を追加したい場合は、"<hr>"タグ内の引用符で囲まれた "style="の後に追加します。 スタイル属性はCSSのスタイル属性と同じです。 属性はいくつでも記述できます。 最後の属性以外はセミコロン（;）で区切ります。 以下は、追加できるスタイル属性です：
    • Width：幅を入力します：行の幅を設定するには ##px と入力します。 "##"は行の幅のピクセル数に置き換えてください。 ピクセル（px）の代わりにパーセント（%）を使うこともできます。
    • 高さ： 高さを入力する：線の太さを設定するには##pxと入力します。 を線の太さのピクセル数に置き換えてください。
    • 色： background-colorと入力：## 線の色を設定する。 を色の名前に置き換えるか、「#」に続けて「.」を入力する。
    • 整列： text-align:##」と入力し、水平罫線のアライメントを設定する。 "##"を "left"、"right"、または "center "に置き換えてください。
    • 右マージン： margin-right と入力する：##右端からのピクセル数を設定します。 "##"をピクセル数または "auto "に置き換えてください。 auto "を使用すると、指定した幅内で行が中央に配置されます。 残りのスペースは、左右のマージンで均等に分割されます。
    • 左マージン： margin-leftと入力する：##左端からのピクセル数を設定する。 "##"はピクセル数または "auto "に置き換えてください。auto "を使用すると、指定した幅内で行が中央に配置されます。 残りのスペースは、左右のマージンで均等に分割されます。
    • 上マージン： margin-topと入力する：行の上マージンを設定するには##pxと入力する。 をピクセル数に置き換えてください。
    • 下マージン： margin-bottomと入力：##行末の余白を設定する。 を余白の太さのピクセル数に置き換えます。
    • border-width と入力します：行の周囲にボーダーを設定するには##pxと入力します。 を太さのピクセル数に置き換える。
    • border-color と入力する：## と入力すると、枠線の色が設定されます。 を色の名前に置き換えるか、またはポンド記号（#）の後に16進数のカラーコードを続けます。
  9. HTMLファイルを保存します。 保存するには、ファイルの拡張子（「.txt」、「.docx」など）を「.html」に置き換える必要があります。 以下の手順でHTML文書を保存してください：
    • ファイル」メニューをクリックします。
    • 新規にHTMLファイルを作成する場合は、「名前を付けて保存」をクリックします。 既存のHTMLファイルを保存する場合は、「保存」をクリックします。
    • ファイル名」の横にファイル名を入力します。
    • ファイルの拡張子（".txt"、".docx "など）を削除します。
    • 拡張子を".html "に置き換える。
    • 保存をクリックします。
  10. HTMLをテストする。HTMLファイルをテストするには、ファイルを右クリックし、「Open with」を選択します。 次にウェブブラウザを選択します。 hr」タグの位置に実線が表示されるはずです。 あなたのHTMLコードは以下のようになるはずです：
      <!DOCTYPE html> <html> <body> <h1>これは見出しです</h1> <hr style="width: "50%;text-align:left;background-color:green"><p1>これは見出しから行で区切られた段落テキストです</p1> </body> </html>。
この記事は、CC BY-NC-SAで公開されている「 HTMLで横線を作成する方法 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAで利用可能です。

シェアボタン： このページをSNSに投稿するのに便利です。

コメント

返信元（返信をやめる）

※ 悪質なユーザーの書き込みは制限します。
最新を表示する
NGIDの確認

NG表示方式

NGID一覧