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

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

目次

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の間に線を引いてみましょう。

<!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」に変えました。

横線が引けたと思います。htmlで気軽に横線引けますね。

まとめ

<hr>を入れるだけで本文を区切る事が出来ました。

簡単なのでお試しください。

おしまい。。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる