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

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

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

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

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

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

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

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

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：水平線の太さを指定できる

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を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

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

4.格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【最短30秒で完了】侍テラコヤの申し込み手順

侍テラコヤの申し込み手順をみていきましょう!

申し込みは最短30秒で完了します。

この機会に是非申し込んでみてはいかがでしょうか?

【1分で登録完了】受講料0円! ZeroPlus Gateの無料体験レッスン申し込み手順

ZeroPlus Gateの無料体験レッスン申し込み手順をみていきましょう。

受講スタートまでの流れは以下の通りです。

無料期間は予告なく終了する可能性があります。

少しでも気になる方は是非申し込んでみてはいかがでしょうか?

【10秒で完了】本気のパソコン塾の相談会/無料トライアル申し込み手順

STEP.1

相談会予約

＼【期間限定】無料相談会参加特典3つあり!／

7日間無料体験・無料相談会に申し込む! 30秒簡単予約!

• 特典1：学習コンテンツの1週間無料トライアル
• 特典2：学習管理シートプレゼント
• 特典3：副業収入獲得ノウハウ動画プレゼント

相談会はオンライン（Google meet）で実施致します。

ご希望の日時をご予約ください。

※所要時間は30分を予定しております。

STEP.2

相談会の概要

アドバイザーがお客様のキャリアや学習の課題を丁寧に伺った上で、今後についてのアドバイスを致します。

当日お話する内容例

• エンジニアを取り巻く環境
• 挫折しないための学習の進め方
• プログラミング言語について
• 本気のパソコン塾について

また、現状の課題や不安な事は、遠慮なくご質問ください。

ご相談いただける内容例

• プログラミング学習に関して
• 転職・副業・起業について

＼【期間限定】無料相談会参加特典3つあり!／

7日間無料体験・無料相談会に申し込む! 30秒簡単予約!

• 特典1：学習コンテンツの1週間無料トライアル
• 特典2：学習管理シートプレゼント
• 特典3：副業収入獲得ノウハウ動画プレゼント