[水平線を引く方法] htmlのhr要素とは? 使い方・色の付け方も分かりやすく解説!

hr要素について知りたい人

hr要素について知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること
  • hr要素とは?
  • hr要素の使い方

HTMLのhr要素を用いると簡単に水平線を引くことができます。

なんと<hr>と書くだけでOKです。

文章内でコンテンツ内容が変わったときや区切りたいときに使われることが多いです。

そこでこの記事ではhr要素について解説していきます。

よく使用する要素なのでしっかりと理解しておくことをオススメします。

気になる方は是非最後まで読んで頂ければと思います。

hr要素の評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)

1.hr要素とは?

Webサイト制作をしているときに水平線を引きたいと思ったことはありませんか?

そんなときにhr要素を利用すると簡単に水平線を引けます。

hr要素は、段落の区切りを表します。

hr要素を使用することで、セクション内におけるテーマの区切りを表すことができます。

例えば、話題の変わり目をしっかりとしめしておきたい場面でhr要素を使用します。

文章構造が見やすくなったり、デザインの幅を広げることもできるのでしっかりと理解しておきましょう。




2.hr要素の使い方

それではhr要素の使い方をみていきましょう。

使い方はとても簡単です。

・・・

<article>
 <h1>hr要素とは? 分かりやすく解説します!</h1>
 <h2>hr要素とは?</h2>
 <p>hr要素は、段落レベルのテーマの区切りを表します。</p>
 <hr>
 <h2>hr要素の使い方</h2>
 <p>それではhr要素の使い方をみていきましょう。</p>
</article>

・・・

上記では「hr要素とは?」と「hr要素の使い方」の間にhr要素を使用しています。

これだけですが、ブラウザでみるとしっかりと水平線が引かれています。

このように話題の変わり目にhr要素を利用しましょう!




3.デザイン変更方法(太さ・長さ・色)

それではhr要素のデザイン変更方法をみていきましょう。

属性を利用することで簡単に太さ、長さ、色を変更できます。

利用できる属性
  • size:水平線の太さを指定できる
  • width:水平線の長さを指定できる
  • align:水平方向の表示位置を指定できる
  • color:水平方向の色を指定できる
  • noshade:立体的ではな水平線を指定できる

size:水平線の太さを指定できる

size属性を利用することで水平線の太さを指定できます。

数値で指定します。

<hr size="15">

width:水平線の長さを指定できる

width属性を利用することで水平線の長さを指定できます。

ピクセルまたはパーセントの数値で指定します。

<hr width="50">

align:水平方向の表示位置を指定できる

align属性を利用することで水平方向の表示位置を指定できます。

デフォルトはleftとなっています。

他にもcenter、rightと指定することも可能です。

<hr align="center">

color:水平方向の色を指定できる

color属性を利用することで水平方向の色を指定できます。

色の指定は、ハッシュで始まる6桁のカラーコードかカラーネームで行います。

<hr color="#ff0000">

noshade:立体的ではな水平線を指定できる

デフォルトで立体的な水平線になっています。

この立体感をなくす場合、noshadeをhr要素内に記述します。

noshade属性を利用することで立体的ではな水平線を指定できます。

<hr width="50" size="15" noshade="">

 

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

 

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?