〈PR〉プロが選ぶ!2023年最新!おすすめプログラミングスクール比較ガイド

CSS Borderの使い方!初心者でも簡単に使える便利なテクニック

cssを勉強し始めの頃は、borderプロパティ
の実装方法がいまいちピンときませんよね。

border-style、border-width、border-colorなど、CSSのborderプロパティは様々な設定が可能です。
この記事では、実際のコードを交えて、使い方を詳しく解説していきます。

今回は、初心者でも簡単に実装できるCSSのborderプロパティを紹介します。

目次

  1. border-styleプロパティを使ったボーダースタイルの変更方法
  2. border-colorプロパティを使ってボーダーの色をカスタマイズする方法
  3. border-widthプロパティを使ってボーダーの太さを調整する方法
  4. border-radiusプロパティを使って角丸ボーダーを作る方法
  5. box-shadowプロパティを使って影付きボーダーを作る方法

border-styleプロパティを使ったボーダースタイルの変更方法

Webデザインにおいて、ボーダーは重要な要素の1つです。ボーダーを上手に使うことで、Webページのレイアウトをより見やすく、美しくすることができます。

ハック君
ハック君

編集長、border-styleプロパティって何が出来るんですか( ・∇・)

UIHACK
編集長
UIHACK 編集長

CSSのborder-styleプロパティを使えば、ボーダースタイルを簡単に変更することができます。このプロパティを使うことで、実線、点線、二重線、破線など、様々なボーダースタイルを指定できます。

今回は、border-styleプロパティを使ったボーダースタイルの変更方法について、詳しく解説していきます。

CSSで指定するborder-styleプロパティとは何か?

UIHACK
編集長
UIHACK 編集長

CSSのborder-styleプロパティは、要素に対してボーダースタイルを指定するためのプロパティです。

border-styleプロパティを使うことで、ボーダーの線の種類を実線、点線、破線、二重線など、様々なスタイルに指定することができます。

border-styleプロパティは、border-widthプロパティとborder-colorプロパティと組み合わせて使用する
ことが一般的で、これらのプロパティを合わせて、要素のボーダー全体のスタイルを指定することができます。

ハック君
ハック君

な、な、成程!
例えば、以下のコードはボーダーの幅が1ピクセル、スタイルが実線、色が黒色であることを指定するという事ですか???

border: 1px solid #000000;
UIHACK
編集長
UIHACK 編集長

正解!!!
意外とやるね( ^ω^ )

一括でborder-styleプロパティを指定する方法はあるのか

ハック君
ハック君

一括でborder-styleプロパティを指定する方法ってあります?

UIHACK
編集長
UIHACK 編集長

YES!
複数のボーダースタイルを一度に指定することができます。
以下は、一括でborder-styleプロパティを指定するためのCSSコードの例です。

border-style: solid dashed dotted double;
UIHACK
編集長
UIHACK 編集長

この例では、四つの値がスペースで区切られています。それぞれの値は、左上から時計回りに適用されます。
したがって、上の例では、左上のボーダーが実線、上辺のボーダーが破線、右上のボーダーが点線、右辺のボーダーが二重線で表示されます。一括で指定することで、簡単に複数のボーダースタイルを適用することができます。

border-styleプロパティで出来るボーダースタイルの種類とは?

border-styleプロパティで指定できるボーダースタイルの種類は、以下のようになります。

ハック君
ハック君

border-styleプロパティで指定できるボーダースタイルの種類知りたいので、教えてもらっていいですか?

プロバティ内容
solid実線のボーダー
dashed破線のボーダー
dotted点線のボーダー
double二重線のボーダー
groove立体的な凹凸のあるボーダー
ridge立体的な凹凸のあるボーダー
inset凹んで見えるボーダー
outset膨らんで見えるボーダー
noneボーダーを非表示にする
hiddenボーダーを非表示にする(但し、要素の領域は確保される)
UIHACK
編集長
UIHACK 編集長

これらのボーダースタイルを組み合わせて、様々なデザインのボーダーを作ることができます。

border-colorプロパティを使ってボーダーの色をカスタマイズする方法

ハック君
ハック君

CSSのborder-colorプロパティを使うとどんな風に変化するんですか?

UIHACK
編集長
UIHACK 編集長

要素のボーダーの色をカスタマイズすることができます。
以下は、border-colorプロパティを使用してボーダーの色をカスタマイズする方法です。

全てのボーダーに同じ色を指定する

要素に対して、border-colorプロパティを指定し、ボーダーの色をカスタマイズすることができます。例えば、以下のように記述することで、赤いボーダーを作成することができます。

border-color: red;
各ボーダーに別々の色を指定する

要素に対して、border-top-color、border-right-color、border-bottom-color、border-left-colorの各プロパティを使用することで、各ボーダーに別々の色を指定することができます。例えば、以下のように記述することで、上下左右のボーダーにそれぞれ異なる色を指定することができます。

border-top-color: red;
border-right-color: blue;
border-bottom-color: green;
border-left-color: yellow;
異なるボーダーの色を一括で指定する

要素に対して、border-colorプロパティを使用することで、異なるボーダーの色を一括で指定することができます。例えば、以下のように記述することで、上下左右のボーダーに同じ色を指定することができます。

また、以下のように、複数の値をカンマ区切りで指定することで、異なるボーダーにそれぞれ異なる色を指定することができます。

border-color: red, blue, green, yellow;

これらの方法を駆使することで、様々なデザインのボーダーを作成することができます。

border-colorプロパティで指定できる色の種類とは

ハック君
ハック君

border-colorプロパティで指定できる色の種類って何があるんですか?

プロバティ内容
キーワードblack、white、redなどの英語のキーワードで指定する方法があります。
RGB値赤、緑、青の値を0~255の範囲で指定する方法があります。
RGBA値RGB値に透明度(アルファ値)を追加したもので、RGBA(R,G,B,A)の形式で指定します。
HEX値16進数で指定する方法があります。
HSL値色相、彩度、輝度の3つの値を使って色を指定する方法があります。
HSLA値HSL値に透明度(アルファ値)を追加したもので、HSLA(H,S,L,A)の形式で指定します。
UIHACK
編集長
UIHACK 編集長

おおくは、キーワード、RGB値で指定する事が多いかな。

border-colorプロパティを使用する要素の指定方法について

ハック君
ハック君

今更なんですけど、border-colorプロパティも実装方法を教えてもらっていいですか?

UIHACK
編集長
UIHACK 編集長

border-colorプロパティを使用する要素を指定するには、CSSのセレクタを使います。セレクタには、要素の種類、クラス、IDなどを指定することができます。
たとえば、以下のようなCSSコードを書くことで、h1要素のボーダーの色を赤に設定することができます。

h1 {
  border-color: red;
}
UIHACK
編集長
UIHACK 編集長

また、複数の要素に同じスタイルを適用したい場合は、クラスを指定してグループ化することができます。

.my-class {
  border-color: blue;
}
ハック君
ハック君

HTMLの要素にクラスを追加する時って、どうするんでしたっけ(^_^;)

<div class="my-class">ボーダーの色が青になります</div>
UIHACK
編集長
UIHACK 編集長

上記のように実装するよ( ^ω^ )

複数のborderを持つ要素におけるborder-colorプロパティの指定方法

ハック君
ハック君

複数のborderを指定したいんですんけど…

UIHACK
編集長
UIHACK 編集長

1つ目の方法は、各borderに対して個別にborder-colorプロパティを指定する方法です。例えば、次のようなCSSを使って、上下左右のborderの色をそれぞれ異なる色に指定することができます。

border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
UIHACK
編集長
UIHACK 編集長

2つ目の方法は、複数のborderに同じ色を指定する方法です。この場合、border-colorプロパティにカンマ区切りで複数の値を指定することができます。たとえば、次のCSSでは上下のborderには赤色、左右のborderには青色を指定しています。

border-color: red blue red blue;
UIHACK
編集長
UIHACK 編集長

3つ目の方法は、異なるborderに同じ色を指定する方法です。この場合、border-colorプロパティに複数の値を指定することができます。たとえば、次のCSSでは上下のborderには赤色、左右のborderには青色を指定しています。

border-color: red blue;
UIHACK
編集長
UIHACK 編集長

このように、複数のborderを持つ要素においては、border-colorプロパティをうまく活用することで、様々なボーダーの色の組み合わせを実現することができます。

border-widthプロパティを使ってボーダーの太さを調整する方法

ハック君
ハック君

次は、borderの幅を変更したいんです。編集長!!!

UIHACK
編集長
UIHACK 編集長

了解!
border-widthプロパティを使用すると、要素のボーダーの太さを指定することができます。このプロパティを使用することで、ボーダーの太さを細かく調整することができるよ。

border-widthプロパティは、要素の4つの辺(上、右、下、左)のボーダーの太さを指定することができます。また、一括で指定することもできます。具体的には、以下のように指定します。

/* 個別に指定する場合 */
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;

/* 一括で指定する場合 */
border-width: 1px 2px 3px 4px; /* 上 右 下 左 */
border-width: 1px 2px 3px; /* 上 左右 下 */
border-width: 1px 2px; /* 上下 左右 */
border-width: 1px; /* 上下左右 */
UIHACK
編集長
UIHACK 編集長

以上のように、個別に指定する場合は、それぞれの辺ごとにプロパティを指定します。一方、一括で指定する場合は、上から時計回りに上、右、下、左の順で指定します。また、省略する場合は、上下左右の順で省略することができます。

border-widthプロパティで指定できる太さの種類とは

ハック君
ハック君

これまでの流れだと、絶対太さの種類も、色々ありますよね?

UIHACK
編集長
UIHACK 編集長

勘がするどい!!!
CSSのborder-widthプロパティは、要素のボーダーの太さを指定するためのプロパティです。border-widthプロパティで指定できる値には、次の種類があります。

プロバティ内容
単一の値すべてのボーダーに同じ幅を指定することができます。
2つの値上下と左右のボーダー幅を別々に指定することができます。
3つの値上下と左右のボーダー幅を別々に指定し、左右のボーダー幅が中央の幅と同じになります。
4つの値上下左右のそれぞれのボーダー幅を別々に指定することができます。
UIHACK
編集長
UIHACK 編集長

これらの値は、ピクセルやemなどの単位で指定することができます。

border-widthプロパティを使用する要素の指定方法について

ハック君
ハック君

border-widthプロパティを使用する要素の指定方法ってどうするんですか。

UIHACK
編集長
UIHACK 編集長

CSSのセレクターを使って行います。要素単体に対して適用する場合は、その要素のセレクターを指定します。複数の要素に対して一括で指定する場合は、クラス名やID名などの共通のセレクターを指定します。

例えば、ヘッダーのボーダーの太さを1pxにする場合は、以下のように記述します。

header {
  border-width: 1px;
}
UIHACK
編集長
UIHACK 編集長

複数の要素に同じボーダーの太さを適用する場合は、共通のクラス名を指定します。
例えば、クラス名が「box」の要素に1pxのボーダーを適用する場合は、以下のように記述します。

.box {
  border-width: 1px;
}
UIHACK
編集長
UIHACK 編集長

これにより、クラス名が「box」の要素全てに1pxのボーダーが適用されます。

連続したborderを持つ要素におけるborder-widthプロパティの指定方法

UIHACK
編集長
UIHACK 編集長

border-widthプロパティを使用する要素の指定方法は、CSSのセレクターを使って行います。要素単体に対して適用する場合は、その要素のセレクターを指定します。複数の要素に対して一括で指定する場合は、クラス名やID名などの共通のセレクターを指定します。

例えば、ヘッダーのボーダーの太さを1pxにする場合は、以下のように記述します。

header {
  border-width: 1px;
}
UIHACK
編集長
UIHACK 編集長

複数の要素に同じボーダーの太さを適用する場合は、共通のクラス名を指定します。例えば、クラス名が「box」の要素に1pxのボーダーを適用する場合は、以下のように記述します。

.box {
  border-width: 1px;
}
UIHACK
編集長
UIHACK 編集長

これにより、クラス名が「box」の要素全てに1pxのボーダーが適用されます。

連続したborderを持つ要素におけるborder-widthプロパティの指定方法

UIHACK
編集長
UIHACK 編集長

連続したborderを持つ要素においては、border-widthプロパティを使って各borderの太さを指定することができます。例えば、上下左右にborderがある要素では、次のように指定できます。

/*上下左右が異なる太さ*/
border-width:1px 2px 3px 4px;

/*上下左右が均一の太さ*/
border-width: 5px;

/*特定の要素のみ太さ*/
border-top-width: 6px;

border-radiusプロパティを使って角丸ボーダーを作る方法

ハック君
ハック君

borderで実装する時なんですけど、四隅を円形に出来たりしないんでしたっけ?

UIHACK
編集長
UIHACK 編集長

いい質問!!!
border-radiusプロパティを使用すると、四隅が円形になったり、四隅の角度を変更して角丸にできるボーダーを作成できます。以下は、border-radiusプロパティを使用して角丸ボーダーを作成する方法の例です。

/* 四隅を円形にする */
border-radius: 50%;

/* 左上と右下の角度を変更する */
border-radius: 10px 0 0 10px;

/* 四隅全ての角度を変更する */
border-radius: 10px;
UIHACK
編集長
UIHACK 編集長

ちなみに、HTMLを使用した角丸ボーダーの作成方法は以下のようにするよ( ^ω^ )

<div style="border-radius: 10px; background-color: #f0f0f0;">
  <p>テキストや要素を含む角丸ボーダーの例</p>
</div>
UIHACK
編集長
UIHACK 編集長

border-radiusプロパティについての詳細な説明は、CSSのリファレンスサイトなどで確認することができます。

border-radiusプロパティの基本的な使い方とは?

UIHACK
編集長
UIHACK 編集長

border-radiusプロパティは、要素の角を丸めるために使用されるCSSプロパティです。このプロパティは、四角形の要素を角丸にすることができ、丸い形状の要素を作成することができます。基本的には、次のように使用します。

selector {
  border-radius: value;
}
UIHACK
編集長
UIHACK 編集長

ここで、valueには、要素の角を丸めるために使用する値を指定します。値には、単一の値または4つの値を指定でき、それぞれの値は左上、右上、右下、左下の角に適用されます

例えば、以下のように指定することができます。

selector {
  border-radius: 10px;
}

これにより、四角形の要素のすべての角が10ピクセルの半径で角丸になります。

border-radiusプロパティで丸いボーダーを指定する方法

UIHACK
編集長
UIHACK 編集長

border-radiusプロパティを使用して丸いボーダーを指定するには、次のようにします。

border-radius: 50%;
UIHACK
編集長
UIHACK 編集長

このように、border-radiusプロパティに値として50%を指定することで、要素が円形になります。この場合、要素の高さと幅は等しい必要があります。
また、値を調整することで、より楕円形のボーダーを作成することもできます。たとえば、次のようにします。

border-radius: 20% 50%;
UIHACK
編集長
UIHACK 編集長

この場合、左上と右下の角が20%、右上と左下の角が50%の楕円形になります。値を調整することで、さまざまな形状の角丸ボーダーを作成できます。

複数のborderを持つ要素におけるborder-radiusプロパティの指定方法

ハック君
ハック君

複数の要素も勿論指定できなよね( ・∇・)

UIHACK
編集長
UIHACK 編集長

例えば、四角形の要素で左上と右下の角だけを丸めたい場合は、次のように指定できます。

border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
UIHACK
編集長
UIHACK 編集長

同様に、左下と右上の角を丸めたい場合は、次のように指定できます。

border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
ハック君
ハック君

複数の角をまとめて指定することもできますよ。
例えば、全ての角を同じ半径で丸めたい場合は、次のように指定するよ。

border-radius: 10px;
UIHACK
編集長
UIHACK 編集長

なんでいきなり解説し始めたの?仕事とらないでよΣ(‘◉⌓◉’)
また、独立した角に対して異なる半径を指定することもできます。

border-radius: 10px 20px 30px 40px;
UIHACK
編集長
UIHACK 編集長

この場合、左上の角に10px、右上の角に20px、右下の角に30px、左下の角に40pxの半径が指定されます。

box-shadowプロパティを使って影付きボーダーを作る方法

ハック君
ハック君

次は影をつける説明ですか?

UIHACK
編集長
UIHACK 編集長

ネタバレしないでよ♪
box-shadowプロパティを使用すると、要素に影を付けることができます。これにより、要素に立体感や奥行きを与え、デザインの幅を広げることができます。
以下にbox-shadowプロパティを使用して影付きボーダーを作成する方法を示します。

.shadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
UIHACK
編集長
UIHACK 編集長

上記の例では、.shadowクラスを持つ要素に影を付けています。box-shadowプロパティには、影の位置、ぼかし半径、色などを指定することができます。ここでは、0 0 10pxという値を指定しています。これは、影の位置を指定する値(横方向、縦方向、ぼかし半径)であり、rgba(0, 0, 0, 0.5)は影の色を指定しています。

ハック君
ハック君

影を付けたい要素に対して、このようにbox-shadowプロパティを指定することで、影を付けることができるんですね。影の位置やぼかし半径、色を調整することで、いろんな影の表現が出来そう♪

box-shadowプロパティの使い方とは

UIHACK
編集長
UIHACK 編集長

box-shadowプロパティは、要素に影を付けるためのCSSプロパティ。このプロパティを使用すると、要素の周りに影を付けることができます。box-shadowプロパティには、以下のような値を指定できます。

  1. 水平方向のオフセット値
  2. 垂直方向のオフセット値
  3. ブラー半径
  4. スプレッド半径
  5. 影の色
UIHACK
編集長
UIHACK 編集長

これらの値を組み合わせて、要素に様々な種類の影を付けることができます。例えば、次のようなCSSコードを使用すると、要素に黒い影を付けることができます。

box-shadow: 2px 2px 5px #000;
UIHACK
編集長
UIHACK 編集長

この場合、2pxの水平方向のオフセット、2pxの垂直方向のオフセット、5pxのブラー半径を指定しています。そして、影の色は#000(黒)で指定されています。

box-shadowプロパティを使って影付きボーダーを指定する方法

ハック君
ハック君

box-shadowプロパティを使用すると、要素に影をつけることができるんですよね。
影付きボーダーを組み合わせると作成できるんじゃないですか。

UIHACK
編集長
UIHACK 編集長

そうそう!
box-shadowプロパティを使用すると、要素に影をつけることができます。以下はbox-shadowプロパティを使用して影付きボーダーを作成する方法の例です。

.example {
  box-shadow: 0 0 10px #000;
}
UIHACK
編集長
UIHACK 編集長

上記の例では、.example要素に、x軸方向とy軸方向に0のずれ、10pxのぼかし、そして黒色の影を設定しています。

ハック君
ハック君

なるほど!複数の影を指定するには、例えば以下のように実装するんじゃないですか。

.example {
  box-shadow: 0 0 10px #000,
              0 0 20px #000,
              0 0 30px #000;
}
UIHACK
編集長
UIHACK 編集長

正解!素晴らしい!
複数の影を重ねることで、より奥行きのある影を作ることができます。

上記の例では、.example要素に、最初の影が10pxのぼかし、2番目の影が20pxのぼかし、3番目の影が30pxのぼかしを持つ黒色の影を設定しています。

ひとことメモ

box-shadowプロパティは、影の位置、ぼかしの大きさ、影の色などを指定できるため、多様な影付きボーダーを作ることができます。

borderとbox-shadowプロパティの違いについて

ハック君
ハック君

borderプロパティとbox-shadowプロパティは、要素に周囲の視覚的な境界を与えるために使用されるプロパティですが、異なる役割を持ってるんですね。

UIHACK
編集長
UIHACK 編集長

そうなんだよ!
borderプロパティは、要素の周囲に枠線を設定するためのプロパティであり、枠線の太さ、スタイル、色、角丸を設定できます。一方、box-shadowプロパティは、要素に影を付けるためのプロパティであり、影の位置、サイズ、色、境界の形状を指定できます。

ハック君
ハック君

つまり、border要素の境界線を定義するために使用され、box-shadow要素に影を付けるために使用

borderは要素の形状を決定するのに対して、box-shadow要素の形状に影を付けることができます

また、box-shadow要素の周りに影を付けることができるのに対して、borderは要素の周りに線を引くことができます。

UIHACK
編集長
UIHACK 編集長

おぉーーー!
まとめてくれてありがとう( ^ω^ )

おさらい

UIHACK
編集長
UIHACK 編集長

CSSのborderプロパティを駆使した、美しいWebデザインを実現できます。
色々な記述を組み合わせると、自分好みのデザインができますのでお試しください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です