CSSで作るボーダーと影のデザイン – 枠線や画像ボーダーの設定方法から、ボックスシャドウの表示まで解説

CSSを使ったボーダーや影のデザインは、Webページの見た目を美しくするために欠かせないテクニックの一つです。

本記事では、枠線の設定方法や画像ボーダーの表示、ボックスシャドウの使い方など、CSSを用いたボーダーや影の設定について詳しく解説します。

Webデザインにおいて必要不可欠なスキルの一つであるCSSの使い方を、初心者から上級者まで幅広く学べます。

CSSでボーダーや影を設定する方法を知りたいんですが、教えてもらえますか？CSSでボーダーや影を設定する方法について知りたいです。

枠線の設定方法、枠線の種類や色の指定、画像ボーダーの表示方法、ボーダーの角丸の指定、そして、ボックスシャドウの設定方法について詳しく解説しましょう。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

基本的なボーダーのスタイル

最初に基本的なボーダーのスタイルについて説明します。

線ボーダー

CSSの基本的なボーダースタイルは、線ボーダーです。以下は、線ボーダーを作成するためのCSSの例です。

border: 1px solid #000000;

破線ボーダー

破線ボーダーは、点線や一点鎖線などの異なるスタイルで表示されます。以下は、破線ボーダーを作成するためのCSSの例です。

border: 1px dashed #000000;

この例では、1ピクセルの黒い破線ボーダーが作成されます。borderプロパティには、dashedまたはdottedという値を指定することで、破線や点線のスタイルを指定することができます。

丸い角のボーダー

border-radiusプロパティを使用することで、四角形の要素を角丸にすることができます。以下は、角丸にした四角形の要素に対して線ボーダーを追加するためのCSSの例です。

border: 1px solid #000000;
border-radius: 10px;

この例では、10ピクセルの角丸にした四角形に、1ピクセルの黒い線ボーダーが追加されます。

グラデーションボーダー

CSSのbackgroundプロパティを使用することで、グラデーションを作成することができます。同様に、border-imageプロパティを使用することで、グラデーションをボーダーとして使用することができます。以下は、グラデーションボーダーを作成するためのCSSの例です。

border: 10px solid;
border-image: linear-gradient(to right, #ff0000, #0000ff);

枠線の太さを指定する方法

枠線の太さを指定するには、CSSのborder-widthプロパティを使用します。このプロパティを使用することで、要素に対する枠線の太さを指定することができます。

border-widthプロパティには、以下のような値を指定することができます。

thin: 1ピクセル程度の薄い線を指定します。
medium: デフォルトの太さを指定します。
thick: mediumよりも太い線を指定します。
任意のピクセル値: border-widthプロパティには、ピクセル値を指定することもできます。例えば、border-width: 2px;と指定することで、2ピクセルの太さの線を作成することができます。

また、border-widthプロパティには、上下左右のそれぞれの線について個別に指定することもできます。以下は、上下に2ピクセル、左右に4ピクセルの線を作成するためのCSSの例です。

border-top-width: 2px;
border-bottom-width: 2px;
border-left-width: 4px;
border-right-width: 4px;

このように、border-widthプロパティを使用することで、要素の枠線の太さを柔軟に指定することができます。ただし、線の太さが増えると、レイアウトに影響を与える場合があるため、注意が必要です。

枠線の種類を指定する方法

枠線の種類を指定するには、CSSのborder-styleプロパティを使用します。このプロパティを使用することで、要素に対して異なる種類の枠線を作成することができます。

border-styleプロパティには、以下のような値を指定することができます。

none: 枠線を表示しないことを指定します。
solid: 一定の太さの線を指定します。
dashed: 破線の線を指定します。
dotted: 点線の線を指定します。
double: 二重線を指定します。
groove: 3D凹面の線を指定します。
ridge: 3D凸面の線を指定します。
inset: 3D凹面の線を指定します。
outset: 3D凸面の線を指定します。

以下は、異なる種類の枠線を作成するためのCSSの例です。

border: 1px solid #000000; /* 実線 */
border: 1px dashed #000000; /* 破線 */
border: 1px dotted #000000; /* 点線 */
border: 1px double #000000; /* 二重線 */
border: 1px groove #000000; /* 3D凹面 */
border: 1px ridge #000000; /* 3D凸面 */
border: 1px inset #000000; /* 3D凹面 */
border: 1px outset #000000; /* 3D凸面 */

このように、border-styleプロパティを使用することで、要素に対して様々な種類の枠線を作成することができます。また、border-styleプロパティは上下左右のそれぞれの線について個別に指定することもできます。

枠線の色を指定する方法

枠線の色を指定するには、CSSのborder-colorプロパティを使用します。このプロパティを使用することで、要素に対して異なる色の枠線を作成することができます。

border-colorプロパティには、以下のような値を指定することができます。

任意のカラーコード: border-colorプロパティには、カラーコードを指定することができます。例えば、border-color: #ff0000;と指定することで、赤い色の枠線を作成することができます。
transparent: 枠線を透明にします。
currentColor: 要素自身の色を使用します。

また、border-colorプロパティには、上下左右のそれぞれの線について個別に指定することもできます。以下は、上下に赤い色、左右に緑の色の線を作成するためのCSSの例です。

border-top-color: #ff0000;
border-bottom-color: #ff0000;
border-left-color: #00ff00;
border-right-color: #00ff00;

このように、border-colorプロパティを使用することで、要素に対して異なる色の枠線を作成することができます。

また、border-colorプロパティは、上下左右のすべての線の色を同じにする場合は、borderプロパティを使用することもできます。

border: 1px solid #ff0000; /* 赤い色の線 */

枠線スタイルを一括指定する方法

枠線スタイルを一括指定するには、CSSのborderプロパティを使用します。このプロパティを使用することで、要素に対して異なる太さ、スタイル、色の枠線を一括で指定することができます。

borderプロパティには、以下のような値を指定することができます。

border: [border-width] [border-style] [border-color];

border-width、border-style、border-colorは、それぞれ枠線の太さ、スタイル、色を指定するためのプロパティです。

以下は、太さが1ピクセル、スタイルが実線、色が黒い枠線を作成するためのCSSの例です。

border: 1px solid #000000;

また、borderプロパティでは、上下左右のそれぞれの線について個別に指定することもできます。以下は、上下に2ピクセルの線を、左右に4ピクセルの線を作成するためのCSSの例です。

border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
border-left: 4px solid #000000;
border-right: 4px solid #000000;

このように、borderプロパティを使用することで、要素に対して異なる太さ、スタイル、色の枠線を一括で指定することができます。

枠線の角丸を指定する方法

枠線の角丸を指定するには、CSSのborder-radiusプロパティを使用します。このプロパティを使用することで、四角形の要素に角丸を指定することができます。

border-radiusプロパティには、以下のような値を指定することができます。

任意のピクセル値: border-radiusプロパティには、ピクセル値を指定することができます。例えば、border-radius: 10px;と指定することで、10ピクセルの角丸を作成することができます。
50%: 要素の幅または高さの50%を指定することで、要素に対して円形の角丸を作成することができます。

また、border-radiusプロパティには、上下左右のそれぞれの線について個別に指定することもできます。以下は、上下に10ピクセル、左右に20ピクセルの角丸を指定するためのCSSの例です。

border-top-left-radius: 10px 20px;
border-top-right-radius: 10px 20px;
border-bottom-left-radius: 10px 20px;
border-bottom-right-radius: 10px 20px;

また、border-radiusプロパティでは、単一の値を指定することで、四隅の角丸を同じサイズに指定することもできます。以下は、全ての角に10ピクセルの角丸を指定するためのCSSの例です。

border-radius: 10px;

このように、border-radiusプロパティを使用することで、四角形の要素に対して角丸を指定することができます。ただし、角丸の大きさが大きくなりすぎると、レイアウトに影響を与える場合があるため、注意が必要です。

画像ボーダーのイメージを指定する方法

画像ボーダーのイメージを指定するには、CSSのborder-imageプロパティを使用します。このプロパティを使用することで、要素に対して画像を使用したボーダーを作成することができます。

border-imageプロパティには、以下のような値を指定することができます。

border-image: [image-source] [image-slice] [image-width] [image-outset] [image-repeat];

image-source: ボーダーのイメージを指定するためのURLを指定します。
image-slice: ボーダーのイメージをどの部分から切り出すかを指定します。
image-width: ボーダーのイメージの幅を指定します。
image-outset: ボーダーのイメージの外側の余白を指定します。
image-repeat: ボーダーのイメージを繰り返す方法を指定します。

以下は、画像を使用したボーダーを作成するためのCSSの例です。

border-image: url(border.png) 30 30 round;

この例では、border.pngという画像をボーダーのイメージとして使用し、30という値をimage-sliceとimage-widthに指定しています。また、roundという値をimage-repeatに指定しています。これにより、画像が円形に繰り返されるようにボーダーが作成されます。

border-imageプロパティでは、上下左右のそれぞれの線について個別に指定することもできます。以下は、上下にはborder-top-imageを使用し、左右にはborder-right-imageを使用するボーダーを作成するためのCSSの例です。

border-top-image: url(top.png) 30 30 round;
border-right-image: url(right.png) 30 30 round;

このように、border-imageプロパティを使用することで、要素に対して画像を使用したボーダーを作成することができます。ただし、画像の読み込みに時間がかかるため、大きな画像を使用する場合はパフォーマンスに影響が出る場合があるため、注意が必要です。

画像ボーダーの表示位置を指定する方法

画像ボーダーの表示位置を指定するには、CSSのborder-image-sliceプロパティを使用します。このプロパティを使用することで、ボーダーのイメージをどの部分から切り出すかを指定することができます。

border-image-sliceプロパティには、以下のような値を指定することができます。

border-image-slice: [top] [right] [bottom] [left];

[top]、[right]、[bottom]、[left]は、それぞれ上、右、下、左の部分からボーダーのイメージを切り出す位置を指定するための値です。

以下は、画像ボーダーの表示位置を指定するためのCSSの例です。

border-image: url(border.png) 30 fill;
border-image-slice: 30% 70% 30% 70%;

この例では、border.pngという画像をボーダーのイメージとして使用し、30という値をborder-imageのimage-widthとして指定しています。また、fillという値をborder-imageのimage-repeatに指定しています。これにより、画像が繰り返されるようにボーダーが作成されます。さらに、border-image-sliceプロパティには、30% 70% 30% 70%という値を指定しています。これにより、ボーダーの上下には全体の30%の範囲から切り出され、左右には全体の70%の範囲から切り出されたイメージが使用されます。

このように、border-image-sliceプロパティを使用することで、画像ボーダーの表示位置を細かく調整することができます。

画像ボーダーの太さを指定する方法

画像ボーダーの太さを指定するには、CSSのborder-image-widthプロパティを使用します。このプロパティを使用することで、ボーダーのイメージの幅を指定することができます。

border-image-widthプロパティには、以下のような値を指定することができます。

border-image-width: [top] [right] [bottom] [left];

[top]、[right]、[bottom]、[left]は、それぞれ上、右、下、左のボーダーのイメージの幅を指定するための値です。

以下は、画像ボーダーの太さを指定するためのCSSの例です。

border-image: url(border.png) 30 fill;
border-image-width: 10px 20px 10px 20px;

この例では、border.pngという画像をボーダーのイメージとして使用し、30という値をborder-imageのimage-widthとして指定しています。また、fillという値をborder-imageのimage-repeatに指定しています。これにより、画像が繰り返されるようにボーダーが作成されます。さらに、border-image-widthプロパティには、10px 20px 10px 20pxという値を指定しています。これにより、ボーダーの上下には10ピクセルの幅のイメージが使用され、左右には20ピクセルの幅のイメージが使用されます。

このように、border-image-widthプロパティを使用することで、画像ボーダーの幅を調整することができます。

画像ボーダーの拡張を指定する

画像ボーダーの拡張を指定するには、CSSのborder-image-outsetプロパティを使用します。このプロパティを使用することで、ボーダーのイメージの外側の余白を指定することができます。

border-image-outsetプロパティには、以下のような値を指定することができます。

border-image-outset: [top] [right] [bottom] [left];

[top]、[right]、[bottom]、[left]は、それぞれ上、右、下、左のボーダーのイメージの外側の余白を指定するための値です。

以下は、画像ボーダーの拡張を指定するためのCSSの例です。

border-image: url(border.png) 30 fill;
border-image-outset: 10px 20px 10px 20px;

この例では、border.pngという画像をボーダーのイメージとして使用し、30という値をborder-imageのimage-widthとして指定しています。また、fillという値をborder-imageのimage-repeatに指定しています。これにより、画像が繰り返されるようにボーダーが作成されます。さらに、border-image-outsetプロパティには、10px 20px 10px 20pxという値を指定しています。これにより、ボーダーの上下には10ピクセルの余白が追加され、左右には20ピクセルの余白が追加されます。

このように、border-image-outsetプロパティを使用することで、画像ボーダーの外側に余白を追加することができます。

画像ボーダーの繰り返しを指定する方法

画像ボーダーの繰り返しを指定するには、CSSのborder-image-repeatプロパティを使用します。このプロパティを使用することで、ボーダーのイメージをどのように繰り返すかを指定することができます。

border-image-repeatプロパティには、以下のような値を指定することができます。

stretch: ボーダーの幅に合わせてイメージを拡大・縮小します。
repeat: イメージを繰り返します。
round: ボーダーの幅に合わせてイメージを拡大・縮小し、最大限までイメージを繰り返します。ただし、イメージが歪む可能性があります。
space: イメージをボーダーの間隔に応じて繰り返します。ボーダーの間隔が等間隔でない場合、イメージが歪む可能性があります。

以下は、画像ボーダーの繰り返しを指定するためのCSSの例です。

border-image: url(border.png) 30 repeat;
border-image-repeat: round;

この例では、border.pngという画像をボーダーのイメージとして使用し、30という値をborder-imageのimage-widthとして指定しています。また、repeatという値をborder-imageのimage-repeatに指定しています。これにより、画像が繰り返されるようにボーダーが作成されます。さらに、border-image-repeatプロパティには、roundという値を指定しています。これにより、ボーダーの幅に合わせてイメージを拡大・縮小し、最大限までイメージを繰り返します。

このように、border-image-repeatプロパティを使用することで、画像ボーダーの繰り返し方法を指定することができます。

画像ボーダーのスタイルを一括指定する方法

画像ボーダーのスタイルを一括指定するには、CSSのborder-imageプロパティを使用します。このプロパティを使用することで、ボーダーのイメージ、イメージのスライス、イメージの幅、イメージの外側の余白、イメージの繰り返し方法をまとめて指定することができます。

border-imageプロパティには、以下のような値を指定することができます。

border-image: [image-source] [image-slice] [image-width] [image-outset] [image-repeat];

image-source: ボーダーのイメージを指定するためのURLを指定します。
image-slice: ボーダーのイメージをどの部分から切り出すかを指定します。
image-width: ボーダーのイメージの幅を指定します。
image-outset: ボーダーのイメージの外側の余白を指定します。
image-repeat: ボーダーのイメージを繰り返す方法を指定します。

以下は、画像ボーダーのスタイルを一括指定するためのCSSの例です。

border-image: url(border.png) 30 fill 10px round;

この例では、border.pngという画像をボーダーのイメージとして使用し、30という値をimage-sliceとimage-widthに指定しています。また、fillという値をimage-repeatに指定しています。これにより、画像が繰り返されるようにボーダーが作成されます。さらに、10pxという値をimage-outsetに指定しています。そして、roundという値をimage-repeatに指定しています。これにより、ボーダーの幅に合わせてイメージを拡大・縮小し、最大限までイメージを繰り返します。

このように、border-imageプロパティを使用することで、画像ボーダーのスタイルを一括指定することができます。ただし、画像の読み込みに時間がかかるため、大きな画像を使用する場合はパフォーマンスに影響が出る場合があるため、注意が必要です。

ボックスの影を表示する方法

ボックスの影を表示するには、CSSのbox-shadowプロパティを使用します。このプロパティを使用することで、ボックスに影を付けることができます。

box-shadowプロパティには、以下のような値を指定することができます。

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];

[horizontal offset]: 水平方向の影の位置を指定します。負の値を指定すると左に移動し、正の値を指定すると右に移動します。
[vertical offset]: 垂直方向の影の位置を指定します。負の値を指定すると上に移動し、正の値を指定すると下に移動します。
[blur radius]: 影のぼかしの量を指定します。値が大きいほどぼやけた影になります。
[spread radius]: 影の拡散の量を指定します。値が正の場合、影が拡大し、値が負の場合、影が収縮します。省略すると影がボックスと同じサイズになります。
[color]: 影の色を指定します。色の指定方法は、キーワード、RGB、RGBA、HSL、HSLA、HEXなどがあります。

以下は、ボックスの影を表示するためのCSSの例です。

box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

この例では、水平方向に2ピクセル、垂直方向に2ピクセルの位置に影を付け、ぼかしの量を5ピクセルに設定しています。そして、色には、黒色（RGB値で表すと0, 0, 0）に不透明度0.3を設定した、半透明のグレー色を指定しています。

このように、box-shadowプロパティを使用することで、ボックスに影を付けることができます。影の大きさや位置、ぼかしの量、色などを調整することで、様々な表現が可能です。

まとめ

枠線の設定方法や画像ボーダーの表示、ボックスシャドウの使い方など、CSSを用いたボーダーや影の設定について解説しました。

枠線の設定方法: CSSのborderプロパティを使用することで、線の太さ、色、スタイルを指定することができる。
枠線の種類の指定方法: border-styleプロパティを使用することで、枠線の種類を指定することができる。
枠線の色の指定方法: border-colorプロパティを使用することで、枠線の色を指定することができる。
枠線スタイルの一括指定方法: CSSのborderプロパティを使用して、一度に複数のスタイルを指定することができる。
枠線の角丸の指定方法: border-radiusプロパティを使用することで、枠線の角を丸くすることができる。
画像ボーダーの指定方法: CSSのborder-imageプロパティを使用することで、画像をボーダーとして使用することができる。
画像ボーダーの表示位置の指定方法: border-image-sliceプロパティを使用することで、画像ボーダーの表示位置を指定することができる。
画像ボーダーの太さの指定方法: border-image-widthプロパティを使用することで、画像ボーダーの太さを指定することができる。
画像ボーダーの拡張の指定方法: border-image-outsetプロパティを使用することで、画像ボーダーを拡張することができる。
画像ボーダーの繰り返しの指定方法: border-image-repeatプロパティを使用することで、画像ボーダーの繰り返し方法を指定することができる。
ボックスシャドウの設定方法: CSSのbox-shadowプロパティを使用することで、ボックスに影をつけることができる。

これらの知識を身につけることで、ボーダーや影を自由自在に設定することができるようになります。また、適切に使うことで、Webページの見た目をより魅力的にすることができます。

枠線や画像ボーダー、ボックスシャドウの設定方法についてわかりました！実際に試してみたいと思います。

今回紹介したCSSを使ったボーダーや影の設定方法をマスターし、Webページの見た目をより魅力的にしていきましょう。ただし、過剰に使いすぎると見た目がごちゃごちゃしてしまうこともあるので、適度に使うようにしましょう。

さらに、各設定を組み合わせることで、より複雑なデザインを実現できるので、自分なりのアイデアを出してみると良いでしょう。