ウェブサイトに横線を入れて、コンテンツの区切りをわかりやすくしたい。
こんなお悩みを解決するための記事です。
いきなりですが、結論です。HTMLで水平線（横線）を引くには、<hr>というタグを使用します。
とても簡単なので、この機会にマスターしておきましょう。
本記事では、<hr>の基本的な使い方と、デザインカスタマイズの方法、使用上の注意点を網羅的に解説します。
スポンサードサーチ
本記事のもくじ
【hrタグとは】使い方と注意点を解説
<hr>は、Horizontal Ruleの略でして、文字通り、水平線を引くためのHTMlタグです。
属性を付与することができるので、太さや長さ、左右・中央寄せなどを自由に設定することができます。
hrタグの使い方
使い方はとてもシンプル。
<hr>を記載した部分に、水平線が挿入されます。
<p>hrタグは水平線を挿入するためのHTMLタグです</p>
<hr>
<p>たったこれだけで、水平線が挿入されます。</p>
<p>ちなみに、hrタグには終了タグが存在しません。</p>
こんな感じで、<hr>を挿入した部分に水平線が表示されます。
hrタグに付与できる属性
<hr>に付与できる属性は下記の通り。
- size：水平線の太さ
- width：水平線の長さ
- align：表示位置（左右・中央寄せ）
- noshade：影をつけない
<hr size="10">
<hr width="300">
<hr align="center">
<hr nosade="">ブラウザでの見え方
こんな感じで水平線の見栄えを整えることができます。
CSSでhrタグの見た目を整える
<hr>は、CSSによって見た目を整えることもできます。
<hr class="sample">
<!--クラス名を振ります-->.sample {
border:1px solid #25BFE0;
}
上記の通り、<hr>にクラス属性名を振って、それをCSSでカスタマイズするだけ。簡単です。
デザイン目的でhrタグを使用してはいけない
上記の通り、とても簡単なので、ついつい線を引きたいときに使ってしまいがちな<hr>ですが、デザイン目的での使用はNGです。
HTMLコード全般に言えることなのですが、タグには役割があります。
<hr>の役割は「段落レベルでの区切り」なので、意味的に区切りをつけたい文章に挿入するのが本来の使用目的になります。
<h2>冷奴の作り方</h2>
<h3>手順</h3>
<p>①：豆腐を食べたいサイズに切ります。</p>
<p>②：薬味を刻みます。（ネギ、生姜、海苔 etc...）</p>
<p>③：醤油をかけて出来上がり。</p>
<hr>
<p>僕のおすすめは、シーチキン、ネギ、ゴマ、ごま油で中華風に仕上げた冷奴です。</p>
こんな感じで、段落の意味をいったん仕切りたい部分に使うのが<hr>というわけですね。
答え：CSSで挿入しましょう
水平線そのものに意味を持たない（デザイン目的）場合は、CSSでカスタマイズしましょう。
divタグとCSSでラインを作る方法
本記事では、<div>を使ったラインを作る方法を解説します。
HTMLを使う際、<div>はとても便利なタグです。「<div>って、どういうタグですか？」という人は、この機会に合わせて覚えておくことのがおすすめです。
<div>については、下記の記事で詳しく解説しています。
» 参考記事：【divタグとは】基本的な使い方とspanとの違いを解説（初心者向けです）
divタグとCSSで水平線を作る
<div class="border">.border {
border-bottom:2px dashed #25BFE0;
padding-top: 15px;
padding-bottom: 15px;
}
この方法では、ボックスを作り、その下線部分のみをCSSで表示させています。
下線である必要はなく、上線を表示させたいなら、border-bottomをborder-topに変えるだけでOKです。
また、上下には15ピクセルずつの余白を取っているので、上下の間隔を詰めたい、あるいは広げたい場合は、paddingの数値を変更してください。
スポンサードサーチ
まとめ：hrタグは意味の区切りに使おう
本記事は以上です。
<hr>は水平線を作るためのHTMLタグです。
ですが、<hr>を使う際は、上下の要素に意味的な区切りがある場合に留めておきましょう。
デザインだけを目的として水平線を引く場合は、<div>とCSSで調整すれば、検索エンジンにも優しく、好きな場所に自由な横線を引くことができます。
おわり。
