CSS 入門

CSS 境界線（Border）

ボーダー（境界線）は、要素の端を定義してレイアウト全体を整えるだけでなく、ユーザーの注意を惹きつけ、階層構造を作り出し、ウェブサイトのビジュアルアイデンティティを強化するための強力なツールです。

この章では、ボーダーの外観をコントロールする様々なプロパティを深く掘り下げ、美しく実用的なデザインを作成する手法を学びます。

1. CSS ボーダープロパティの理解

CSSの border プロパティは、実際には3つの独立したプロパティ（border-width：幅、border-style：スタイル、border-color：カラー）をまとめて設定できるショートハンドプロパティです。これらのプロパティは個別に設定することも可能ですが、ショートハンドを使用することでコードをより簡潔に記述できます。

1.1 ボーダーの幅 (Border Width)

border-width プロパティは、要素のボーダーの太さを設定します。ピクセル (px)、ポイント (pt)、エム (em)、またはその他の標準的なCSS単位を受け入れます。border-top-width、border-right-width、border-bottom-width、border-left-width プロパティを使用することで、各辺に異なる幅を設定することも可能です。

コード例：

.example {
  border-width: 2px; /* すべての辺を 2px に設定 */
}

.example-sides {
  border-top-width: 1px;
  border-right-width: 3px;
  border-bottom-width: 5px;
  border-left-width: 3px;
}

.example-shorthand {
    border-width: 1px 3px 5px; /* 上 1px, 左右 3px, 下 5px */
}

.example-all-shorthand {
    border-width: 1px 3px 5px 7px; /* 上、右、下、左 の順 */
}

また、thin（細い）、medium（中間）、thick（太い）といったキーワードも使用できますが、具体的なピクセル値はブラウザによって異なるため、正確なデザインには単位指定が推奨されます。

1.2 ボーダーのスタイル (Border Style)

border-style プロパティは、ボーダーの外観を指定します。利用可能な主な値は以下の通りです。

  • solid：一本の連続した実線。
  • dashed：短い四角形の点線（ダッシュ線）。
  • dotted：丸い点の羅列（ドット線）。
  • double：二本の平行な実線。border-width はこれら二本の線と隙間の合計の太さを決定します。
  • groove：彫り込まれたような溝効果をシミュレートします。
  • ridge：groove とは逆に、浮き上がった隆起効果を出します。
  • inset：ボックス全体がページに埋め込まれているように見せます。
  • outset：ボックス全体がページから浮き上がっているように見せます。
  • none：ボーダーを表示しません。注意： 幅やカラーを設定しても、スタイルを指定しない限りボーダーは表示されません。
  • hidden：none と同様ですが、テーブルのボーダー競合を解決する際に使用されます。

border-width と同様に、border-top-style などのプロパティで各辺個別のスタイルを指定できます。

コード例：

.solid {
  border-style: solid;  /* 実線 */
}
.dashed {
  border-style: dashed; /* 破線 */
}
.dotted {
  border-style: dotted; /* 点線 */
}
.double {
  border-style: double; /* 二重線 */
}
.mixed {
  border-top-style: solid;    /* 上：実線 */
  border-right-style: dashed; /* 右：破線 */
  border-bottom-style: dotted;/* 下：点線 */
  border-left-style: double;  /* 左：二重線 */
}

1.3 ボーダーのカラー (Border Color)

border-color プロパティは、ボーダーのカラーを設定します。カラー名、16進数（Hex）、rgb()、rgba()、hsl()、hsla() など、有効なすべてのCSSカラー値を使用できます。

他のプロパティと同様に、各辺個別のカラー指定やショートハンドが可能です。border-color を指定しなかった場合、ボーダーは要素の color プロパティ（テキストカラー）の値を継承します。

コード例：

.red-border {
  border-color: red;
}
.hex-border {
  border-color: #00FF00; /* グリーン */
}
.rgba-border {
  border-color: rgba(0, 0, 255, 0.5); /* 半透明のブルー */
}
.multi-color {
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: yellow;
}

2. ボーダーのショートハンドプロパティ

border プロパティは、border-width、border-style、border-color を一つの宣言にまとめます。値の順序は厳密には決まっていませんが、一般的には width style color の順序が推奨されます。

重要： border-style は必須です。border-width や border-color を省略した場合、デフォルト値（幅は medium、カラーはテキストカラー）が使用されます。

コード例：

.shorthand {
  border: 2px solid black; /* 2px幅、実線、ブラックのボーダー */
}
.shorthand-missing-width {
  border: solid red; /* 中間の太さ、実線、レッドのボーダー */
}

特定の辺だけにショートハンドを適用することも可能です。

.top-border {
  border-top: 5px dashed purple; /* 上辺のみに適用 */
}

3. border-radius の使用

角丸の作成

border-radius プロパティは、ボーダーの角を丸くするために使用されます。これは、モダンで柔らかなデザインを作成するための強力なツールです。

3.1 単一値の構文

一つの値を指定すると、4つの角すべてに同じ半径の角丸が適用されます。

.rounded {
  border-radius: 10px; /* すべての角を 10px の角丸に */
}
.circle {
  border-radius: 50%; /* 正方形の要素に適用すると完璧な円になる */
  width: 100px;
  height: 100px;
}

3.2 複数値の構文

最大4つの値を指定して、各角を個別に制御できます。

  • 2つの値：1つ目が「左上と右下」、2つ目が「右上と左下」に適用されます。
  • 3つの値：1つ目が「左上」、2つ目が「右上と左下」、3つ目が「右下」に適用されます。
  • 4つの値：左上、右上、右下、左下の順（時計回り）に適用されます。
.rounded-corners {
  /* 左上, 右上, 右下, 左下 */
  border-radius: 10px 5px 20px 0;
}
.rounded-corners-2 {
  /* 左上 & 右下 = 10px, 右上 & 左下 = 5px */
  border-radius: 10px 5px;
}
.rounded-corners-3 {
  /* 左上 = 10px, 右上 & 左下 = 5px, 右下 = 20px */
  border-radius: 10px 5px 20px;
}

3.3 個別指定のプロパティ

より細かな制御のために、以下の個別プロパティも使用可能です。

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

これらのプロパティでは、水平方向と垂直方向の半径を個別に指定して、楕円形の角を作成することもできます。

コード例：

.elliptical {
  border-top-left-radius: 20px 5px; /* 水平半径 20px，垂直半径 5px */
  border-top-right-radius: 5px 20px;
  border-bottom-right-radius: 20px 5px;
  border-bottom-left-radius: 5px 20px;
}

4. 実戦的なサンプルとデモ

ボーダースタイルを使用してウェブページのビジュアルを強化する、実践的な例をいくつか見てみましょう。

4.1 CTAボタン (Call To Action)

実線のボーダーでボタンの境界を定義し、border-radius で角を柔らかくします。

.button {
  background-color: #4CAF50; /* グリーン */
  border: 2px solid green;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 5px;
}
.button:hover {
  border-color: darkgreen; /* ホバー時にボーダーカラーを濃くする */
}

4.2 アラートボックス (Alert Boxes)

メッセージの重要度に応じて異なるボーダーカラーを使用します。

.alert {
  padding: 10px;
  margin: 10px 0;
  border: 1px solid;
  border-radius: 5px;
}
.alert-error {
  border-color: red; /* エラー用：レッド */
  color: red;
}
.alert-warning {
  border-color: orange;
  color: orange;
}
.alert-success {
  border-color: green; /* 成功用：グリーン */
  color: green;
}

4.3 フォームの入力フィールド

カスタムボーダーで入力フィールドの外観を向上させます。:focus 擬似クラスを使用して、アクティブ時に入力フィールドのボーダーカラーを変更し、ユーザーに視覚的なフィードバックを提供します。

input[type="text"],
input[type="email"],
textarea {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  /* パディングとボーダーを要素の総幅と高さに含める設定 */
  box-sizing: border-box; 
  margin-bottom: 10px;
  /* 入力フィールドをコンテナの幅いっぱいに広げる */
  width: 100%; 
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  /* フォーカス時にボーダーカラーを濃くする */
  border-color: #555;     
  /* デフォルトのフォーカスアウトラインを削除 */
  outline: none; 
}

4.4 画像のボーダー

画像に控えめなボーダーを追加して背景から分離させ、フォトフレームのような効果を演出します。

.image-frame {
  border: 1px solid #ccc; /* 1pxの実線グレーボーダー */
  padding: 5px;           /* 内側の余白（余白によるフレーム効果） */
  border-radius: 3px;     /* わずかな角丸 */
}