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

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
html5 css3 image

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;
}

分かりにくいですね? これは理解しようとする必要はありません。分かりやすい書き方では次のコードになります。

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

これなら分かりますね? クラス名は適当につけています。これを使うと、divでもhrタグと同じことができます。サンプルコードで見てましょう。

HTMLは次のコードです。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: rgb(127, 194, 239);
}
.box-color {
    background: rgb(127, 194, 239);
}

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全体でくぼみ・隆起を表現する違いがあります。

一本線(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は、画像を1つの線種としてあつかい、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、コンポーネント本体のどちらを使ってもむずかしいことはありません。

 

最近Webカテゴリでよく読まれている記事です。
post-cta-image
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事を気に入ったらぜひシェアも!!