WEBサイトを作っていると、
- コンテンツを区切りたい
- 話題が変わる時に罫線を入れたい
という場面に出くわすことがある。
そこで今回はHTML初心者に向けて、
- hrタグで罫線を引く
- CSSで罫線を引く
の2つの方法を紹介する。
罫線が引けなくて困っている初心者の人は、参考にしてほしい。
hrタグとは
hrタグとは、任意の場所に水平線（罫線）を引くために使うもののこと。hrタグを使うと画面の横幅いっぱいに広がって、hrタグの次の要素は自動的に改行される。
コンテンツを区切りたい時や、文章内で話題が変わった時に使われることが多い。
hrタグはimgタグやbrタグのように1つで完結した要素のため、終了タグ（閉じタグ）は必要ない。
初期状態では影のついた立体的な線で勝手に表現されるが、属性を与えることである程度見た目を変更することも。CSSを設定すればもっと自由な装飾も可能。
hrタグに指定できる属性
色を変える【color】
color属性に指定した色に変更できる。以下の場合、赤い線に変わる。
<hr color="#ff0000">
</pre>
長さを変える【width】
width属性に指定した長さに変更できる。長さはpxまたは%で指定でき、数値が大きいほど長い線になる。
<hr width="300px">
太さを変える【size】
size属性に指定した太さに変更できます。pxで太さを指定する。
<hr size="5px">
影をなくす【noshade】
noshade属性を指定することで、初期に表示されていた影が消える。
<hr noshade>
hrタグの見た目をCSSで変更する
hrタグに指定できる属性を紹介したが、見た目の変更はCSSで指定することが推奨されている。
hrタグの見た目を変更したい場合はCSSで設定するのがおすすめ。
borderスタイルを設定すると、divタグやpタグに設定した時と同様に要素の周りに罫線を引くことができる。
以下のようにhrタグに高さを指定するとわかりやすい。
HTML
<hr class="line">
CSS
.line{
border:1px solid #ff0000;
height:10px;
}
10pxで指定されたhrタグの周りに罫線が引かれているのがわかる。
hrタグには初期状態で立体的な影が表示されてしまうため、影を消したい場合は以下のように設定しておく。
HTML
<hr class="line">
CSS
css:css
.line{
border:none;
height:5px;
background-color:#ff0000;
}
borderをなくし、代わりにbackground-colorで背景色を指定することで罫線を実現できる。
区切りたい要素にCSSを指定する
hrタグで罫線を引く他に、divやpなどの区切りたい要素自体にCSSを指定して罫線を引く方法も。
例えば、文章の区切りに罫線を引きたい場合はこんな感じ。
HTML
<p>
文章１です。
</p>
<p class="line">
この上に罫線を引きます。
</p>
CSS
css:css
.line{
border-top:1px solid #ff0000;
}
このように、border-topを指定することで罫線を実現できる。
borderは、
| border-top | 要素の上 |
|---|---|
| border-bottom | 要素の下 |
| border-right | 要素の右 |
| border-left | 要素の左 |
のように上下左右を個別に設定することができる。
区切りたい部分にだけborderを指定することで、罫線のような見た目が簡単に表現できる。
まとめ
以上、HTMLで罫線を引く方法について
- hrタグで罫線を引く方法と見た目の変え方
- 要素にCSSを指定して罫線を引く方法
を紹介した。
WEBページを作っている途中「罫線を引きたいな〜」という場面があれば参考にしてほしい。
かずきち
プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。
【ウェブカツ公式WEBサイト】
https://webukatu.com/