かんたんHTML&CSS hr, 水平線の太さ・色などの変更方法

HTMLの水平線を表示するのはかんたんで、hrタグを書くだけです。CSSでデザインの変更もできます。

太さや色、グラデーション、画像などサンプルを作りながら、かんたんに誰にも分かるように解説します。

デフォルトのhrタグのしくみもくわしく解説します。

HTMLで水平線を描く

水平線を描くのはかんたんです。<hr />を使うだけです。<hr />は開始タグも終了タグもありません。

デフォルトでは次のようになります。

<hr />

HTMLの結果です。

hrタグのしくみ

hrタグのデザイン変更を行う前に、hrタグがどのようにして水平線を表現しているのか、中身をのぞいてみます。

hrタグのCSSのデフォルトはこうなっています。

hr {
    display: block;
    unicode-bidi: isolate;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
}

分かりにくいですね？

user agent stylesheetは、普通のCSSとはちがうプロパティをもっています。これを理解しようとしなくていいです。

見慣れた書き方では次のようになります。

.hr-default {
    display: block;
    height: 0;
    width: auto;
    margin: 0.5em 0;
    border: 1px inset;
}

これなら分かりますね？

クラス名は適当につけています。これを使うと、divでもhrタグと同じことができます。

サンプルコードで見てましょう。CSSはさっきのものを使います。

<div>デフォルト</div>
<hr />
<br />
<div>デフォルトと同じものをdivで表現</div>
<div class="hr-default"></div>

HTMLの結果です。

同じ結果がでました。

CSSを見ると、hrタグはborderだけで水平線をつくっていることがわかります。

水平線がほんのり二重線に見えるのはborderの種類がinsetだから。それがわかるようにborderの太さを大きくします。

insetは、

というもので、これを使って水平線を立体的に見せます。

太さを大きくすることで、コンポーネント本体は使わずに、borderだけで線を出していることもわかります。

（heightが0）

hrのしくみから、hrタグのデザインを変える方法は3つです。

じっさいに、hrタグの水平線をいろいろな方法で変更してみましょう。

水平線の太さと色を変更する

水平線の太さだけを変更する方法は、borderの太さを変更するだけでできます。

<hr class="border-width-bold" />

.border-width-bold {
    border-width: 3px;
}

borderの幅を変更するクラスを用意しました。HTMLの結果です。

デフォルトの色は見た目がよくありません。

次に色を変更します。色を変える方法は2つです。

<hr class="border-width-bold-half border-color" />
<hr class="border-clear box-width-bold box-color" />

.border-clear {
    border: none;
}
.border-width-bold {
    border-width: 3px;
}
.border-width-bold-half {
    border-width: 1.5px;
}
.box-width-bold {
    height: 3px;
}
.border-color {
  border-color: rgba(130, 215, 255, 0.7);
}
.box-color {
  background: rgba(130, 215, 255, 0.7);
}

borderの太さを変更するクラス、コンポーネント本体の太さを変更するクラス、borderのクリアのクラスを追加しました。

コンポーネント本体を使うときは、太さにheightを使います。

HTMLの結果です。

2つの結果は少しちがいます。これは、borderに水平線の種類（inset）が指定されているからです。

次は、線の種類を変更してみましょう。

水平線の種類を変更する

水平線の種類はborderの線種で表現します。コンポーネント本体も使えなくはないですが、作業がかんたんでないのでほとんど使いません。

<div>solid（一本線）</div>
<hr class="border-clear border-color solid" />
<div>double（二本線）</div>
<hr class="border-clear border-color double" />
<div>groove（くぼみ）</div>
<hr class="border-clear border-color groove" />
<div><small>拡大</small></div>
<hr class="border-clear border-color groove border-width-20" />
<div>ridge（隆起）</div>
<hr class="border-clear border-color ridge" />
<div><small>拡大</small></div>
<hr class="border-clear border-color ridge border-width-20" />
<div>inset（左・上は暗く、右・下は明るくして立体表現。hrのデフォルト）</div>
<hr class="border-color inset" />
<div><small>拡大</small></div>
<hr class="border-color inset border-width-20" />
<div>outset（左・上は明るく、右・下は暗くして立体表現）</div>
<hr class="border-color outset" />
<div><small>拡大</small></div>
<hr class="border-color outset border-width-20" />
<div>dashed（破線）</div>
<hr class="border-clear border-color dashed" />
<div>dotted（点線）</div>
<hr class="border-clear border-color dotted" />

.border-width-20 {
    border-width: 20px;
}
.solid {
    border-bottom-style: solid;
}
.double {
    border-bottom-style: double;
}
.groove {
    border-bottom-style: groove;
}
.ridge {
    border-bottom-style: ridge;
}
.inset {
    border-style: inset;
}
.outset {
    border-style: outset;
}
.dashed {
    border-bottom-style: dashed;
}
.dotted {
    border-bottom-style: dotted;
}

それぞれの線種のクラスを追加しました。

solid, inset, outset以外、すべてのborderを使うと、左右の端やtopとbottomの境などの影響で、きれいに水平線ができません。

このような線種は、border-topまたはborder-bottomの1つを使うことできれいな水平線ができます。

また、わかりやすいように拡大表示のクラスも追加しています。

HTMLの結果です。

groove, ridgeは、borderひとつでくぼみ・隆起をつくっています。

一方、inset, outsetは、left, top, right, bottomのborder全体でつくっているので、すべてのborderを使わないとくぼみ・隆起はできません。

一本線（solid）なら、コンポーネント本体でもできます。

<div>border</div>
<hr class="border-clear border-color solid border-width-bold" />
<div>box</div>
<hr class="border-clear box-color box-width-bold" />

CSSは前に作ったものを使います。HTMLの結果です。

2つの結果が同じになりました。

hrタグはグラデーションをつけることもできます。次はグラデーションをつけてみましょう。

水平線にグラデーションをつける

グラデーションは、borderとコンポーネント本体どちらでもつけることができます。

サンプルコードを見てみましょう。

<div>border</div>
<hr class="border-clear border-color border-width-bold solid border-gradient" />
<hr class="border-clear border-color border-width-bold double border-gradient" />
<hr class="border-clear border-color border-width-bold dotted border-gradient" />
<div>box</div>
<hr class="border-clear box-color box-width-bold box-gradient" />

グラデーションのクラスをborderとコンポーネント本体用にそれぞれ追加します。

.border-gradient {
    border-image: linear-gradient(to right, rgb(127, 194, 239), #fff);
    border-image-slice: 1;
}
.box-gradient {
    background: linear-gradient(to right, rgb(127, 194, 239), #fff);
}

それぞれのグラデーションのクラスを追加しました。

HTMLの結果です。

すべて結果が同じになりました。

borderのグラデーションは、border-colorではできません。本来は画像を指定するborder-imageを使って、グラデーションを画像として表示します。

border-imageは、画像をひとつの線種としてあつかい、solidやdoubleなどは上書きするのでborderの線種は使えません。

hrタグでグラデーションを使うときは、borderではなく、コンポーネントの本体を使うほうがよいでしょう。

水平線に画像を使う

グラデーションのところで、画像を使うborder-imageをご紹介しました。もちろん、画像を水平線に使うこともできます。

<div>border</div>
<hr class="border-clear border-image" />
<div>box</div>
<hr class="border-clear box-image" />

画像のクラスをborderとコンポーネント本体用にそれぞれ追加します。

.border-image {
    border-bottom: 50px solid;
    border-image: url('https://tadtadya.com/wp-content/uploads/2018/10/1184212-border-image-150x150.png') repeat;
    border-image-slice: 50;
}
.box-image {
    background: url('https://tadtadya.com/wp-content/uploads/2017/05/1184212-150x150.png');
    background-size: 50px;
    height: 50px;
}

それぞれの画像のクラスを追加しました。

HTMLの結果です。

少しちがいますが、ほぼ同じ結果になりました。

border-imageとbackgroundで使う画像は考え方がちがい、border-imageのときは9分割の画像を使うのが一般的です。

今回使ったサンプル画像はこちらです。

border-image

background

hrタグでは、border-topまたはborder-bottomだけを使うので、9分割の画像のうち使うのは3つです。9つの画像をまとめる意味がありません。

画像をそのまま使うときは、コンポーネントの本体を使うほうがかんたんです。

まとめ

hrタグはborderでできています。でも、カスタマイズするときは、borderだけでなく、コンポーネントの本体も使えます。

コンポーネントの本体のCSSの設定はdivと同じです。border、コンポーネント本体のどちらを使ってもむずかしくありません。