ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

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

html5 css3 image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

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

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

デフォルトの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

sample image

background

パソコンをする人 上手く行った

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

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

まとめ

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

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

前の投稿
HTMLとCSSだけで円を描く方法。サイズ、色はCSSで変更できる。
HTMLとCSSだけで作る軽量サンプルのまとめ(:checked疑似クラス)
次の投稿

HTML&CSSの本

post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。

コメントを残す

*