HTMLで線を挿入する方法

共同執筆者 wikiHow編集チーム

この記事には:HTML 4.01の場合CSS/HTML5の場合出典

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

1
HTML 4.01の場合

  1. 1
    新規HTML文書を開く、または作成する HTML文書は、Notepadなどのテキストエディタを使って編集することができます。また、Adobe Dreamweaverなどのコードエディタを使うことも可能です。以下の手順に従って、Notepad、またはお好みのプログラムでHTML文書を開きましょう。
    • Notepad、またはお好みのテキストエディタやコードエディタを開く。
    • ファイルメニューをクリックする。
    • 開くをクリックする。
    • HTMLファイルを選択する。
    • 開くをクリックする。
  2. 2
    横線を挿入したい場所をクリックする 横線を挿入したい行までスクロールダウンし(この行は挿入した横線の下になる)、一番左側をクリックして、行頭にカーソルを置きましょう。
  3. 3
    スペースを挿入する  Enterを2回押し、このテキストを下へ動かしたら、カーソルを今空けたスペースのところへ戻します。
  4. 4
    <hr>タグを追加する 行頭に<hr>と入力します。<hr>タグは、ページの中で横線を表示させる役割をもちます。
  5. 5
    「hr」タグの下の新しい行へ移動する  Enterを押すと移動できます。この時点で、<hr>タグの行は、それだけが記述された行となっているはずです。
  6. 6
    横線に属性を追加する(任意で) 横線に、長さ、幅、色、配置などの属性を追加することができます。括弧内の「hr」の後ろに、以下に紹介するコードを記述しましょう。1つ以上の属性を、同じ括弧の中にスペースで区切って入力することもできます。[2]
    • 線の太さを変更するには、<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. 7
    HTMLファイルを保存する テキストファイルをHTML文書として保存するには、拡張子(.txt、.docx)を「.html」に置き換える必要があります。以下の手順に従い、HTML文書を保存しましょう。
    • ファイルメニューをクリックする。
    • 名前を指定して保存をクリックする。
    • 「ファイル名」の横にファイルの名前を入力する。
    • ファイル名の後ろに.htmlを入力する。
    • 保存をクリックする。
  8. 8
    HTMLの表示を確認する HTMLファイルを確認するには、ファイル上で右クリックしてプログラムから開くを選び、ウェブブラウザを選択しましょう。「hr」タグを挿入した部分に横線が表示されているはずです。また、HTMLのコードは、次のように記述されているはずです。[3]
      <!DOCTYPE html>
      <html>
      <body>
      
      <h1>This is a Heading</h1>
      
      <hr size="6" width="50%" align="left" color="green">
      
      <p1>This is paragraph text that has been separated from the heading by a line.</p1>
      
      </body>
      </html>
      

2
CSS/HTML5の場合

  1. 1
    新規HTML文書を開く、または作成する HTML文書は、Notepadなどのテキストエディタを使って編集することができます。また、Adobe Dreamweaverなどのコードエディタを使うことも可能です。以下の手順に従って、Notepad、またはお好みのプログラムでHTML文書を開きましょう。
    • Notepad、またはお好みのテキストエディタやコードエディタを開く。
    • ファイルメニューをクリックする。
    • 開くをクリックする。
    • HTMLファイルを選択する。
    • 開くをクリックする。
  2. 2
    HTML文書にheadを追加する HTML文書にまだheadが入力されていない場合は、以下の手順に従って追加しましょう。headは<html>タグと<body> タグの間に挿入します。
    • 文書の一番上に<head>と入力する。
    • Enterを2回押して、新しい行を2行追加する。
    • </head>と入力してheadを閉じる。
  3. 3
    headに<style type="text/css">と入力する styleタグは2つのheadタグの間に挿入します。styleタグを使うと、HTMLの書式を設定するCSSコードを記述できます。
    • または、別途スタイルシートを作ることもできます。別途作成したCSSファイルをHTMLファイルにリンクさせる方法については、インターネットなどで検索してみましょう。
  4. 4
    hr {と入力する これは横線の書式を設定するためのCSSタグです。headのstyleタグの後ろにこれを追加するか、別途作成したCSSファイルに記述しましょう。
  5. 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進法のカラーコードを続けて入力します。
  6. 6
    書式の設定が終わったら}で閉じる これで<hr>タグの書式設定を終了します。
  7. 7
    HTML文書でbody内の任意の場所に<hr>を入力する 入力すると、HTML文書に横線が追加されます。HTMLで<hr>を使うと、常にCSSで指定した書式設定が適用されます。 [4]コードは次のように記述されているはずです。
      <!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>
      

記事の情報

この記事は、経験豊富なwikiHowの編集者と調査員から成るチームによって執筆されています。調査員チームは内容の正確性と網羅性を確認しています。

カテゴリ: インターネット

他言語版:

English: Insert a Line in HTML, العربية: إدراج خط في لغة إتش تي إم إل, ไทย: ใส่เส้นนอนใน HTML, Italiano: Inserire una Linea Orizzontale in HTML, Português: Inserir Uma Linha em HTML, Français: insérer une ligne en HTML, Tiếng Việt: Chèn đường thẳng trong HTML, 中文: 在HTML中插入一行, Русский: добавить горизонтальную линию в HTML, Nederlands: Een horizontale lijn maken in HTML, Español: insertar una línea en HTML, हिन्दी: एचटीएमएल (HTML) में एक लाइन शामिल करें, Deutsch: In HTML eine Linie einfügen, Türkçe: HTML'de Çizgi Nasıl Eklenir

このページは 214 回アクセスされました。
この記事は役に立ちましたか?