SoyaBlog

これを見れば解決しそうや

HOME>CSS>要素の境界を設定するborderについて解説
ブログ投稿日時:
ブログ更新日時:
要素の境界を設定するborderについて解説

要素の境界を設定するborderについて解説

  1. borderとは
  2. borderの指定方法
  3. 今回のまとめ

1.borderとは

borderとは、要素の境界を設定するプロパティです。

2.borderの指定方法

borderを指定するときは下記の画像のように線の太さ、線の種類、線の色の3つを指定します。

orderの指定方法

それでは、実際のコードとCSSの表示を見ていきましょう。

<div>赤いborderです。</div>
border: 3px solid red;
HTMLとCSSの表示
赤いborderです。

線の太さを3px、線の種類をsolid、線の色をredで指定したので枠線が表示されました。

線の太さ、線の種類、線の色について様々な指定があるので、それぞれの指定方法をもう少し詳しく見ていこうと思います。

線の太さを指定する

borderで線の太さだけを指定したいときはborder-widhtを使って指定します。

しかし、border-widhtだと上下左右の線の全てに太さが指定されてしまうので、特定の方向の線だけに太さを指定する場合は下記のようなプロパティを使用します。

・ border-top-width (上の線だけ)

・ border-right-width (右の線だけ)

・ border-bottom-width (下の線だけ)

・ border-left-width (左の線だけ)

borderの太さを指定する方法は主に2つあります。

1つ目はexやrem、emなどを使って個別に指定する方法です。

2つ目はthinやmedium、thickなどの値を使って指定する方法です。

ちなみにそれぞれの値の太さは下記の通りです。

・ thin (細い線)

・ medium (中程度の線)

・ thick (太い線)

それでは、様々な指定をした時の表示を確認してみましょう。

<div class="px-08">線の太さは8pxです。</div>

<div class="thin">これは細い線の指定です。</div>

<div class="medium">これは中程度の線の指定です。</div>

<div class="thick">これは太い線の指定です。</div>

<div class="individual">上下左右の線の太さを個別に指定します。</div>
div {
 border: solid red;
}

.px-08 {
 border-width: 8px;
}

.thin {
 border-width: thin;
}

.medium {
 border-width: medium;
}

.thick {
 border-width: thick;
}

.individual {
 border-top-width: 8px;
 border-right-width: thin;
 border-bottom-width: medium;
 border-left-width: thick;
}
HTMLとCSSの表示
線の太さは8pxです。
これは細い線の指定です。
これは中程度の線の指定です。
これは太い線の指定です。
上下左右の線の太さを個別に指定します。

線の種類を指定する

borderで線の種類だけを指定したいときはborder-styleを使って指定します。

これもborder-styleだと上下左右の線の全てに種類が指定されてしまうので、特定の方向の線だけに種類を指定する場合は下記のようなプロパティを使用します。

・ border-top-style (上の線だけ)

・ border-right-style (右の線だけ)

・ border-bottom-style (下の線だけ)

・ border-left-style (左の線だけ)

borderの種類を指定するときは値を使って指定します。

borderの種類は多いので、これは実際にCSSの表示で確認してみましょう。

<div class="solid">線の種類は実線(solid)です。</div>

<div class="dashed">線の種類は粗い点(dashed)です。</div>

<div class="dotted">線の種類は点線(dotted)です。</div>

<div class="double">線の種類は2重線(double)です。</div>

<div class="groove">線の種類は谷線(groove)です。</div>

<div class="ridge">線の種類は山線(ridge)です。</div>

<div class="inset">線の種類は内線(inset)です。</div>

<div class="outset">線の種類は外線(outset)です。</div>

<div class="individual">上下左右の線の種類を個別に指定します。</div>
div {
 border: 5px red;
}

.solid {
 border-style: solid;
}

.dashed {
 border-style: dashed;
}

.dotted {
 border-style: dotted;
}

.double {
 border-style: double;
}

.groove {
 border-style: groove;
}

.ridge {
 border-style: ridge;
}

.inset {
 border-style: inset;
}

.outset {
 border-style: outset;
}

.individual {
 border-top-style: solid;
 border-right-style: dashed;
 border-bottom-style: dotted;
 border-left-style: double;
}
HTMLとCSSの表示
線の種類は実線(solid)です。
線の種類は粗い点(dashed)です。
線の種類は点線(dotted)です。
線の種類は2重線(double)です。
線の種類は谷線(groove)です。
線の種類は山線(ridge)です。
線の種類は内線(inset)です。
線の種類は外線(outset)です。
上下左右の線の種類を個別に指定します。

上記のように線の種類が多いのでデザインに合わせて使い分けていきましょう。

線の色を指定する

borderで線の色だけを指定したいときはborder-colorを使って指定します。

これもborder-colorだと上下左右の線の全てに種類が指定されてしまうので、特定の方向の線だけに種類を指定する場合は下記のようなプロパティを使用します。

・ border-top-color (上の線だけ)

・ border-right-color (右の線だけ)

・ border-bottom-color (下の線だけ)

・ border-left-color (左の線だけ)

borderの色を指定するときはカラーネーム、カラーコード、rgbaを使って指定します。

それでは、カラーネーム、カラーコード、rgbaを使って指定した時の表示を確認してみましょう。

<div class="color-name">色はカラーネームで指定しています。</p>

<div class="color-code">色はカラーコードで指定しています。</p>

<div class="color-rgba">色はrgbaで指定しています。</p>

<div class="color-individual">上下左右の線の色を個別に指定します。</div>
div {
 border: 5px solid;
}

color-name {
 border-color: red;
}

color-code {
 border-color: #00ff00;
}

color-rgba {
 border-color: rgba($color: #0000ff, $alpha: 0.3);
}

color-individual {
 border-top-style: red;
 border-right-style: green;
 border-bottom-style: blue;
 border-left-style: yellow;
}
HTMLとCSSの表示
色はカラーネームで指定しています。
色はカラーコードで指定しています。
色はrgbaで指定しています。
上下左右の線の色を個別に指定します。

3.今回のまとめ

この記事ではborderについて解説しました。

borderを指定するときは線の太さ、線の種類、線の色の3つを指定します。

それぞれ様々な指定方法があるので忘れてしまった場合はこのブログを見に来てください。

最後までお読みいただきありがとうございます。