40代高卒者がIT転職に成功するためのデザインスキル【border】

programming
DMM WEBCAMP

こんにちは、フローです。

今回は、CSSのborder要素について書いていきたいと思います。

borderも必ずと言っていいほど使われる要素なので覚えておきましょう。

前回の記事はこちらです。

borderとは

Webデザインにおいて非常に一般的な要素です。

borderは、HTML要素の周りに線や枠線を描画するために使用されるCSSプロパティです。

様々な使い方があり、borderの概要といくつかの一般的な使い方を説明します。

borderの基本構文

以下の3つのサブプロパティを組み合わせて使用します。

border-width

枠線の太さを指定します。

border-style

枠線のスタイルを指定します。

例: solid（実線）, dashed（破線）, dotted（点線）など。

border-color

枠線の色を指定します。

これらのサブプロパティを組み合わせた例

border: 2px solid #ff0000;

個別の辺に対してborderを指定

個別の辺に対して異なるborderを設定したい場合、以下のプロパティを使用します。

・top

・right

・bottom

・left

これらのプロパティを使用した例:

border-top: 2px solid #ff0000;
border-bottom: 4px dashed #00ff00;

border-radiusで角丸を作成

要素の角を丸めることができます。値を増やすほど、角が丸くなります。

border-radius: 10px;

複数の値を指定して角丸をカスタマイズ

複数の値を指定することで、異なる半径を持つ角丸を作成できます。

border-radius: 10px 20px 30px 40px;

これらの使い方を組み合わせることで、

様々なデザインを作成することができます。

borderプロパティは、Webデザインにおいて要素を区切ったり、

強調したりするために非常に便利です。

borderを使った例

まずは記述例をみていきましょう。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="box">Box 1</div>
  <div class="box2">Box 2</div>
  <div class="rounded-box">Box 3</div>
  <div class="custom-rounded-box">Box 4</div>
</body>
</html>

CSS

.box {
  border: 2px solid #ff0000;
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

.box2 {
  border-top: 2px solid #ff0000;
  border-bottom: 4px dashed #00ff00;
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

.rounded-box {
  border: 2px solid #ff0000;
  border-radius: 10px;
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

.custom-rounded-box {
  border: 2px solid #ff0000;
  border-radius: 10px 20px 30px 40px;
  width: 100px;
  height: 100px;
}

上記のHTMLでは、4つの異なるデザインのボックスを作成しています。それぞれのボックスには、上記で説明したCSSのborderプロパティが適用されています。

Box 1: シンプルな実線の枠線が付いたボックス

Box 2: 上部に実線の枠線、下部に破線の枠線が付いたボックス

Box 3: 角丸の実線の枠線が付いたボックス

Box 4: カスタマイズされた角丸の実線の枠線が付いたボックス

CSSの詳しい説明

.box {

HTML要素に適用するためのクラスセレクターです。このセレクターによって、クラス名が”box”の要素に対してスタイルが適用されます。

border: 2px solid #ff0000;

周囲に太さ2ピクセル、実線スタイル、赤色（#ff0000）の枠線を描画します。

width: 100px;

幅を100ピクセルに設定します。

height: 100px;

高さを100ピクセルに設定します。

margin-bottom: 20px;

下部に外側の余白（マージン）を20ピクセル設定します。

}

.boxセレクターのスタイルルールの終了を示します。

.box2 {

クラス名が”box2″の要素に対してスタイルを適用するためのクラスセレクターです。

border-top: 2px solid #ff0000;

上部に太さ2ピクセル、実線スタイル、赤色（#ff0000）の枠線を描画します。

border-bottom: 4px dashed #00ff00;

下部に太さ4ピクセル、破線スタイル、緑色（#00ff00）の枠線を描画します。

width: 100px;

幅を100ピクセルに設定します。

height: 100px;

高さを100ピクセルに設定します。

margin-bottom: 20px;

下部に外側の余白（マージン）を20ピクセル設定します。

}

.box2セレクターのスタイルルールの終了を示します。

.rounded-box {

クラス名が”rounded-box”の要素に対してスタイルを適用するためのクラスセレクターです。

border: 2px solid #ff0000;

周囲に太さ2ピクセル、実線スタイル、赤色（#ff0000）の枠線を描画します。

border-radius: 10px;

角を丸めるための半径を10ピクセルに設定します。これにより、要素の角が丸くなります。

width: 100px;

幅を100ピクセルに設定します。

height: 100px;

高さを100ピクセルに設定します。

margin-bottom: 20px;

下部に外側の余白（マージン）を20ピクセル設定します。

}

.rounded-boxセレクターのスタイルルールの終了を示します。

.custom-rounded-box {

クラス名が”custom-rounded-box”の要素に対してスタイルを適用するためのクラスセレクターです。

border: 2px solid #ff0000;

周囲に太さ2ピクセル、実線スタイル、赤色（#ff0000）の枠線を描画します。

border-radius: 10px 20px 30px 40px;

角を丸めるための半径を、左上が10ピクセル、右上が20ピクセル、右下が30ピクセル、左下が40ピクセルに設定します。これにより、要素の角が異なる半径で丸くなります。

width: 100px;

幅を100ピクセルに設定します。

height: 100px;

高さを100ピクセルに設定します。

}

.custom-rounded-boxセレクターのスタイルルールの終了を示します。

上記のCSSは、

それぞれのクラスセレクター（.box, .box2, .rounded-box, .custom-rounded-box）

に対して、

異なる枠線や角丸の設定を行っています。

HTML要素にこれらのクラスを適用することで、

枠線や角丸のデザインが反映されます。

まとめ

以上がborderの基本的な使い方の例です。

よく使う要素なので、色々試して遊んでみて下さい。

レッツチャレンジ！