HTML水平線の活用法12選!初心者でも簡単カスタマイズ

初心者向けのHTML水平線タグの使い方やカスタマイズ方法を解説したイメージHTML
この記事は約4分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、HTMLの水平線タグを使ってウェブページを見やすくデザインすることができるようになります。

初心者にもわかりやすいように、水平線の基本的な使い方やカスタマイズ方法、注意点を徹底解説していきます。

●HTML水平線とは?

HTMLの水平線タグは、ウェブページで線を引くためのタグで、コンテンツの区切りや見やすさを向上させる効果があります。

このタグは、<hr>と記述するだけで簡単に水平線を表示することができます。

○基本的な使い方

HTMLの水平線タグは、次のように記述することで簡単に使うことができます。

<hr>

このコードをHTMLファイルに挿入するだけで、水平線が表示されます。

●カスタマイズ方法

水平線のカスタマイズは、主に次の3つの方法があります。

  1. 線の太さを変更する
  2. 線の色を変更する
  3. 線のスタイルを変更する

それぞれのカスタマイズ方法を詳しく見ていきましょう。

○線の太さを変更する

水平線の太さを変更するには、HTMLファイル内で、<hr>タグにstyle属性を追加し、border-widthプロパティを使って太さを指定します。

線の太さを5pxに変更する例を紹介します。

<hr style="border-width: 5px;">

このコードをHTMLファイルに挿入することで、太さが5pxの水平線が表示されます。

○線の色を変更する

水平線の色を変更するには、<hr>タグにstyle属性を追加し、border-colorプロパティを使って色を指定します。

線の色を赤に変更する例を紹介します。

<hr style="border-color: red;">

このコードをHTMLファイルに挿入することで、赤い水平線が表示されます。

○線のスタイルを変更する

水平線のスタイルを変更するには、<hr>タグにstyle属性を追加し、border-styleプロパティを使ってスタイルを指定します。

線のスタイルを点線に変更する例を紹介します。

<hr style="border-style: dotted;">

このコードをHTMLファイルに挿入することで、点線の水平線が表示されます。

●注意点

水平線タグのカスタマイズには注意点がいくつかあります。

次に挙げる注意点を押さえておきましょう。

  1. style属性で指定する値は、CSSと同じ書き方をする必要があります。
  2. カスタマイズを行う際は、複数のプロパティを同時に指定することができます。

    ただし、プロパティ間はセミコロン(;)で区切ります。

例:線の太さを5px、色を赤、スタイルを点線にする場合

<hr style="border-width: 5px; border-color: red; border-style: dotted;">

● 応用例とサンプルコード

水平線タグの応用例として、次のようなデザインが考えられます。

  1. グラデーションの水平線
  2. 破線の水平線
  3. 二重線の水平線

それぞれの応用例について、サンプルコードとともに解説します。

○ グラデーションの水平線

グラデーションの水平線を作成するには、次のようなコードを使用します。

<hr style="border-width: 5px; border-image: linear-gradient(to right, red, blue) 1;">

このコードをHTMLファイルに挿入することで、赤から青へのグラデーションがかかった水平線が表示されます。

○破線の水平線

破線の水平線を作成するには、次のようなコードを使用します。

<hr style="border-width: 5px; border-style: dashed; border-color: red;">

このコードをHTMLファイルに挿入することで、赤い破線の水平線が表示されます。

○ 二重線の水平線

二重線の水平線を作成するには、次のようなコードを使用します。

<hr style="border-width: 5px 0; border-style: double; border-color: red;">

このコードをHTMLファイルに挿入することで、赤い二重線の水平線が表示されます。

まとめ

HTMLの水平線タグは、ウェブページの見た目を向上させる効果があります。

初心者でも簡単に使える基本的な使い方やカスタマイズ方法、注意点を押さえておくことで、より魅力的なウェブページを作成することができます。