【完全網羅】CSSでできる装飾テクニック！border、outline、装飾用疑似要素、ボックスシャドウ徹底解説

2024-06-12

CSSにおける「border」と「outline」の違い

レイアウトへの影響

border: 要素の周りにボーダー領域を作成するため、要素の幅と高さを増加させ、レイアウトに影響を与えます。
outline: 要素の外側に線を描画するため、要素の幅と高さを変えず、レイアウトに影響を与えません。

例:

以下のコードは、要素に太さ10pxの赤いボーダーを設定します。

.element {
  border: 10px solid red;
}

この場合、要素は10pxずつ幅と高さが増加します。

.element {
  outline: 10px solid green;
}

この場合、要素の幅と高さは変わらず、緑色の線が要素の外側に描画されます。

スタイルの指定

border: 色、太さ、スタイル（実線、破線、点線など）を個別に設定できます。
outline: 色、太さ、スタイルを一括で設定する必要があります。

.element {
  border: 5px dashed blue;
}

.element {
  outline: 10px solid red;
}

この場合、アウトラインの色は赤色になりますが、太さは10px固定で、スタイルは破線ではなく実線になります。

用途

border: 主に、要素の区切りやデザインを強調するために使用されます。
outline: 主に、フォーカス状態や選択状態を示すために使用されます。

入力欄にフォーカスが当たると、青色のアウトラインが表示されるように設定できます。

input:focus {
  outline: 2px solid blue;
}

border: レイアウトに影響を与え、色、太さ、スタイルを個別に設定できる

適切なプロパティを選択するには、目的と用途に応じて判断することが重要です。

補足:

上記以外にも、borderとoutlineにはいくつかの違いがあります。詳細は、CSSに関するドキュメントを参照してください。
現代のWebブラウザでは、ユーザーがoutlineスタイルをカスタマイズできるように設定されています。そのため、outlineのみを使用してデザインを施す場合は注意が必要です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>borderとoutlineの例</title>
  <style>
    .element {
      width: 100px;
      height: 100px;
      margin: 20px;
      border: 5px solid #ccc; /* 灰色ボーダー */
    }

    .element:focus {
      outline: 10px solid red; /* 赤色アウトライン */
    }
  </style>
</head>
<body>
  <div class="element">要素</div>
  <input type="text" class="element">
</body>
</html>

説明

このコードは、以下の2つの要素を作成します。

div要素: 灰色ボーダー付きの四角形
テキスト入力欄: フォーカス時に赤色アウトラインが表示される

動作

ページをロードすると、div要素に灰色ボーダーが表示されます。

このコードで確認できる

border: 要素の周りにボーダーを表示する
outline: 要素の外側に線を描画する
border-color: ボーダーの色を設定する
outline-color: アウトラインの色を設定する

このコードはあくまで例であり、実際のデザインに合わせて自由にカスタマイズできます。

CSSで要素を強調するその他の方法

背景色

要素の背景色を変更することで、目立たせることができます。

.element {
  background-color: #ff0000; /* 赤色背景 */
}

ボックスシャドウ

要素の周りに影を描画することで、立体感を演出することができます。

.element {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

疑似要素

:beforeや:after疑似要素を使用して、要素の前後に装飾を追加することができます。

.element::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #00ff00; /* 緑色背景 */
}

アニメーション

要素にアニメーションを適用することで、動的に強調することができます。

.element {
  animation: pulsate 1s ease-in-out infinite;
}

@keyframes pulsate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

以下に、それぞれの方法の利点と欠点の例を示します。

方法	利点	欠点
border	シンプルでわかりやすい	レイアウトに影響を与える
outline	フォーカス状態などを示すのに適している	スタイルを個別に設定できない
背景色	目立たせやすい	コントラストによっては見にくくなる場合がある
ボックスシャドウ	立体感を演出できる	複雑なデザインには向かない
疑似要素	柔軟な装飾が可能	コードが複雑になる
アニメーション	視覚的に訴求力がある	処理速度が遅くなる場合がある