HTMLで横線を引く！7つの手法と実例解説

はじめに
●HTMLで横線を引く7つの手法と実例
まとめ

はじめに

この記事を読めば、HTMLで横線を引く方法がマスターできるようになります。

さらに、カスタマイズや使い方の注意点も学べるので、初心者でも安心して取り組めます。

●HTMLで横線を引く7つの手法と実例

横線はウェブページのデザインにおいて、区切りやアクセントとして役立ちます。

今回は、HTMLで横線を引く7つの手法と実例をご紹介します。

○1. hrタグでシンプルな横線を引く

まずは、最も基本的な横線の引き方を紹介します。

hrタグを使うことで、シンプルな横線を簡単に引くことができます。

<hr>

このコードをHTMLに挿入するだけで、シンプルな横線が表示されます。

○2. CSSを使って横線のスタイルをカスタマイズする

次に、CSSを使って横線のスタイルをカスタマイズする方法です。

例えば、横線の太さや色を変更したい場合には、次のようなコードを使います。

<style>
  hr {
    border-top: 2px solid #f00;
  }
</style>

<hr>

このコードでは、横線の太さを2px、色を赤に設定しています。

CSSを使って横線のスタイルを自由にカスタマイズしましょう。

○3. 破線や点線の横線を引く

CSSを使えば、破線や点線の横線も簡単に引くことができます。

次のサンプルコードでは、破線と点線の横線をそれぞれ引いています。

<style>
  .dashed-line {
    border-top: 2px dashed #f00;
  }
  .dotted-line {
    border-top: 2px dotted #f00;
  }
</style>

<hr class="dashed-line">
<hr class="dotted-line">

このコードでは、破線の横線が引かれる「dashed-line」クラスと、点線の横線が引かれる「dotted-line」クラスを作成しています。

hrタグにそれぞれのクラスを適用することで、破線や点線の横線が表示されます。

○4. 横線の長さを変更する

横線の長さを変更したい場合は、CSSのwidthプロパティを使って調整できます。

次のサンプルコードでは、横線の長さを50%に設定しています。

<style>
  .short-line {
    border-top: 2px solid #f00;
    width: 50%;
  }
</style>

<hr class="short-line">

このコードでは、「short-line」クラスを作成し、横線の長さを50%に設定しています。

hrタグに「short-line」クラスを適用することで、長さが変更された横線が表示されます。

○5. 横線の位置を変更する

横線の位置を変更したい場合は、CSSのmarginプロパティを使って調整できます。

次のサンプルコードでは、横線を左寄せにしています。

<style>
  .left-aligned-line {
    border-top: 2px solid #f00;
    width: 50%;
    margin-left: 0;
  }
</style>

<hr class="left-aligned-line">

このコードでは、「left-aligned-line」クラスを作成し、横線を左寄せに設定しています。

hrタグに「left-aligned-line」クラスを適用することで、位置が変更された横線が表示されます。

○6. 横線を二重線にする

横線を二重線にしたい場合は、疑似要素を使って実現できます。

次のサンプルコードでは、横線を二重線にしています。

<style>
  .double-line {
    position: relative;
    border-top: 2px solid #f00;
  }
  .double-line::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    width: 100%;
    border-top: 2px solid #f00;
  }
</style>

<hr class="double-line">

このコードでは、「double-line」クラスを作成し、疑似要素を使って上にもう一本の線を追加しています。

hrタグに「double-line」クラスを適用することで、二重線の横線が表示されます。

○7. 複数の横線を並べる

複数の横線を並べたい場合は、CSSのflexboxやgridを使ってレイアウトできます。

次のサンプルコードでは、3本の横線を並べています。

<style>
  .line-container {
    display: flex;
    justify-content: space-between;
  }
  .single-line {
    border-top: 2px solid #f00;
    width: 30%;
  }
</style>

<div class="line-container">
  <hr class="single-line">
  <hr class="single-line">
  <hr class="single-line">
</div>

このコードでは、「line-container」クラスの中に3つの「single-line」クラスを持つhrタグを配置し、flexboxを使って横並びにしています。