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

方法 1 の 2:
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 の 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>
      
    広告

関連記事

How to

Googleに問い合わせをする

How to

画像検索で簡単に人物を特定する

How to

ページリダイレクトをブロックする

How to

トレントのダウンロード速度を上げる

How to

画像のURLを取得する

How to

2台のルーターを接続する

How to

Firefoxでウェブサイトをブロックする

How to

ダウンロード速度を上げる

How to

Googleドキュメントを保存する

How to

Outlookで投票ボタンを使う

How to

携帯電話を使ってノートパソコンをインターネットに接続する

How to

閲覧履歴を確認する

How to

Internet Explorerの閲覧履歴を確認する

How to

YouTube動画の年齢制限を回避する
広告

このwikiHow記事について

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

wikiHowのコンテンツ管理チームは、編集チームが編集した記事を細心の注意を払って精査し、すべての記事がwikiHowの高品質基準を満たしているかどうかを確認しています。
カテゴリ: インターネット
このページは 404 回アクセスされました。

この記事は役に立ちましたか?

広告