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

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

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

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

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

HTMLで水平線を描く
hrタグのしくみ
水平線の太さと色を変更する
水平線の種類を変更する
水平線にグラデーションをつける
水平線に画像を使う
まとめ

HTMLで水平線を描く

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

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

HTML

<hr />

HTMLの結果です。

hrタグのしくみ

hrタグはborderと同じ

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

ソースコードサンプルのボックスにタップやマウスを合わせると、右上にコピーボタンが出ます。

慣れないうちは、とりあえずコピー&ペーストで、自分で動かすところから始めると良いです。

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

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とはちがうプロパティをもっています。これを理解しようとしなくていいです。

user agent stylesheetは、HTMLタグのデフォルトのスタイル。

ブラウザしか使わない独自のCSSプロパティをもっている。ふつうのCSSより細かいものが多い。

銀色のダサいボタンのスタイルもuser agent stylesheet。

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

CSS

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

これなら分かりますね？

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

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

HTML

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

HTMLの結果です。

デフォルト

デフォルトと同じものをdivで表現

同じ結果がでました。

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

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

insetは、

左と上を暗く・右と下を明るくして、コンポーネント全体を立体的にくぼんで見せる

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

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

（heightが0）

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

デフォルトのborderを消して、コンポーネントの本体で表現する。（heightを0より大きく）
デフォルトのborderを消して、新しいborderで表現する。
borderとコンポーネントの本体の両方で表現する。

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

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

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

HTML

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

CSS

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

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

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

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

borderの色を変える。
borderを消してコンポーネントの本体を使う。

HTML

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

CSS

.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の線種で表現します。コンポーネント本体も使えなくはないですが、作業がかんたんでないのでほとんど使いません。

HTML

コードを表示閉じる

<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" />

CSS

コードを表示閉じる

.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の結果です。

solid（一本線）

double（二本線）

groove（くぼみ）

拡大

ridge（隆起）

拡大

inset（左・上は暗く、右・下は明るくして立体表現。hrのデフォルト）

拡大

outset（左・上は明るく、右・下は暗くして立体表現）

拡大

dashed（破線）

dotted（点線）

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

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

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

HTML

<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の結果です。

border

box

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

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

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

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

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

HTML

<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とコンポーネント本体用にそれぞれ追加します。

CSS

.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

box

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

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

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

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

水平線に画像を使う

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

HTML

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

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

CSS

.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

box

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

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

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

border-image