HTMLで罫線を引く方法！CSSを使ったデザインの変え方もご紹介　byウェブカツ

WEBサイトを作っていると、

- コンテンツを区切りたい
- 話題が変わる時に罫線を入れたい

という場面に出くわすことがある。

そこで今回はHTML初心者に向けて、

- hrタグで罫線を引く
- CSSで罫線を引く

の2つの方法を紹介する。

罫線が引けなくて困っている初心者の人は、参考にしてほしい。

hrタグとは
--------
hrタグとは、**任意の場所に水平線（罫線）を引く**ために使うもののこと。hrタグを使うと画面の横幅いっぱいに広がって、hrタグの次の要素は自動的に改行される。

**コンテンツを区切りたい時**や、**文章内で話題が変わった時**に使われることが多い。

hrタグはimgタグやbrタグのように1つで完結した要素のため、**終了タグ（閉じタグ）は必要ない。**

初期状態では影のついた立体的な線で勝手に表現されるが、属性を与えることである程度見た目を変更することも。CSSを設定すればもっと自由な装飾も可能。

hrタグに指定できる属性
--------------

### 色を変える【color】
color属性に<span class="keiko_yellow">**指定した色**</span>に変更できる。以下の場合、赤い線に変わる。

```php5:php
<hr color="#ff0000">
</pre>
```
[![](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_line1.png)](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_line1.png)

### 長さを変える【width】
width属性に**<span class="keiko_yellow">指定した長さ</span>**に変更できる。長さは**px**または**%**で指定でき、数値が大きいほど長い線になる。

```php5:php
<hr width="300px">
```
[![](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_line2.png)](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_line2.png)

### 太さを変える【size】
size属性に<span class="keiko_yellow">**指定した太さ**</span>に変更できます。**px**で太さを指定する。

```php5:php
<hr size="5px">
```
[![](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_line3.png)](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_line3.png)

### 影をなくす【noshade】
noshade属性を指定することで、<span class="keiko_yellow">**初期に表示されていた影が消える**</span>。

```php5:php
<hr noshade>
```
[![](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_line4.png)](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_line4.png)

hrタグの見た目をCSSで変更する
-------------------
hrタグに指定できる属性を紹介したが、**見た目の変更はCSSで指定することが推奨**されている。

hrタグの見た目を変更したい場合はCSSで設定するのがおすすめ。

**borderスタイル**を設定すると、divタグやpタグに設定した時と同様に**要素の周りに罫線を引く**ことができる。

以下のようにhrタグに高さを指定するとわかりやすい。

**HTML**

```html:html
<hr class="line">
```
**CSS**

```css:css
.line{
border:1px solid #ff0000;
height:10px;
}
```
[![](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_line5.png)](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_line5.png)

10pxで指定されたhrタグの周りに罫線が引かれているのがわかる。

hrタグには初期状態で立体的な影が表示されてしまうため、**影を消したい場合**は以下のように設定しておく。

**HTML**

```html:html
<hr class="line">
```
**CSS**
```css:css
.line{
border:none;
height:5px;
background-color:#ff0000;
}
```
borderをなくし、代わりに**background-color**で**背景色を指定**することで罫線を実現できる。

区切りたい要素にCSSを指定する
----------------
hrタグで罫線を引く他に、divやpなどの**区切りたい要素自体にCSSを指定**して罫線を引く方法も。

例えば、文章の区切りに罫線を引きたい場合はこんな感じ。

**HTML**

```html:html
<p>
文章１です。
</p>

<p class="line">
この上に罫線を引きます。
</p>
```
**CSS**
```css:css
.line{
border-top:1px solid #ff0000;
}
```
[![](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_line7.png)](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_line7.png)

このように、**border-top**を指定することで罫線を実現できる。

borderは、

border-top    | 要素の上
------------- | ----
border-bottom | 要素の下
border-right  | 要素の右
border-left   | 要素の左
のように上下左右を個別に設定することができる。

**区切りたい部分にだけborderを指定する**ことで、**罫線のような見た目**が簡単に表現できる。

まとめ
---
以上、HTMLで罫線を引く方法について

- hrタグで罫線を引く方法と見た目の変え方
- 要素にCSSを指定して罫線を引く方法

を紹介した。

WEBページを作っている途中**「罫線を引きたいな〜」**という場面があれば参考にしてほしい。

---
#### かずきち
プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。

【ウェブカツ公式WEBサイト】
[https://webukatu.com/](https://webukatu.com/?utm_source=blog&utm_medium=bl02&utm_campaign=blog_pr)