【html】横棒、区切り線を書く方法！簡単に本文を分けたい時に便利

suguru

4年前

Webサイト作成していて、ちょっと横線を引いて区切りたい。CSSとかではなく気軽に横線を引きたいと思ったそこのあなた！あります。試してみて下さい！

htmlで横線を引きたい犬

ホームページ作成などで簡単に横線を引いて区切りたい！簡単に行いたい！

windowsのプロンプトで使用できるbatやpythonやphpを使用して、業務効率化やWebサイトを作成しております。javaやシェルスクリプトなど、様々なプログラミングを行った実績ありの筆者です。

htmlで横に区切り線を書く方法

htmlに横線をひくことができたら簡単に本文を分ける事が出来ます。

やり方としてはhtmlに<hr>を記入するだけです。

htmlにこれを入れるだけで横線がかけます。

horizon「地平線の意味ですね」簡単なhtmlに書いてみましょう。

<!DOCTYPE html>
<html>
  <head>
    <title>hr横線</title>
    <link rel="stylesheet" href="css/hr.css" type="text/css">
    <meta charset="utf-8" />
　</head>
  <body>
    <container>
      <header>
        ヘッダー
      </header>
      <main>
        <br>
        <h1>見出し</h1> 
        <p>段落1</p>
        <br>
        <br>
        <p>段落2</p>
        <br>
        <br>
      </main>
    <footer>
      フッター
    </footer>
  </container>
  </body>
</html>

段落1と段落2の間に線を引いてみましょう。htmlとしては「<p>段落1</p>」の下の<br>を<hr>に変更します。

変更したHTMLのコードは以下になります。

<!DOCTYPE html>
<html>
  <head>
    <title>hr横線</title>
    <link rel="stylesheet" href="css/hr.css" type="text/css">
    <meta charset="utf-8" />
　</head>
  <body>
    <container>
      <header>
        ヘッダー
      </header>
      <main>
        <br>
        <h1>見出し</h1> 
        <p>段落1</p>
        <hr>
        <br>
        <p>段落2</p>
        <br>
        <br>
      </main>
    <footer>
      フッター
    </footer>
  </container>
  </body>
</html>

一つの「br」を「hr」に変えました。