CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのborder（ボーダー）とoutline（アウトライン）の違いを徹底解説

CSSで要素に枠線を表示したいとき、borderプロパティとoutlineプロパティという2つの選択肢があります。どちらも要素の周囲に線を描くためのプロパティですが、挙動や使い方には明確な違いがあります。本記事では、それぞれの特徴と違いをサンプルコード付きでわかりやすく解説します。

borderプロパティとは

borderは、要素の境界線を定義するためのプロパティです。border-width（太さ）、border-style（スタイル）、border-color（色）の一括指定ができるショートハンドとして機能します。

主な特徴は以下の通りです。

  • レイアウト上のスペース（領域）を占有します
  • 上下左右の各辺ごとに個別のスタイルを設定できます（例：border-top、border-leftなど）
  • border-radiusを使って角丸の枠線を作成できます

outlineプロパティとは

outlineは、borderの外側に表示される輪郭線です。主な特徴は以下の通りです。

  • レイアウト上のスペースを占有しません（要素のサイズや配置に影響を与えません）
  • outline-offsetプロパティで、borderからの距離（オフセット）を調整できます
  • 上下左右の辺ごとに個別の指定はできません（一括でのみ適用されます）

共通点

デフォルトでは、borderもoutlineもどちらも表示されません。表示するには明示的にスタイルや値を指定する必要があります。

構文（Syntax）

CSSのborderおよびoutlineプロパティの基本的な構文は以下の通りです。

セレクタ {
    border: /*値*/;
    outline: /*値*/;
}

サンプル1：角丸の枠線とアウトライン

次の例では、div要素に対して緑色の実線ボーダーと、マゼンタ色のridgeスタイルのアウトラインを同時に適用しています。border-radiusによって角丸の形状になっている点にも注目してください。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 15px;
    padding: 20px;
    width: 35%;
    border: thin solid green;
    outline-width: 5px;
    outline-style: ridge;
    outline-color: fuchsia;
    border-radius: 50px;
}
</style>
</head>
<body>
<h2>Example</h2>
<div>This is it!</div>
</body>
</html>

出力結果

このコードを実行すると、緑の細い実線ボーダーに加えて、その外側にマゼンタ色のridgeスタイルのアウトラインが表示され、全体が角丸の形状になります。

CSSのborder（ボーダー）とoutline（アウトライン）の違いを徹底解説

サンプル2：破線ボーダーとinsetアウトライン

次の例では、p要素に太めの緑色の破線ボーダーと、insetスタイルのアウトラインを適用しています。ショートハンドoutline: 5px inset;のようにまとめて記述することも可能です。

<!DOCTYPE html>
<html>
<head>
<style>
p {
    margin: 40px;
    padding: 12px;
    width: 30%;
    border: thick dashed green;
    outline: 5px inset;
    outline-color: fuchsia;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text surrounded by border and outline.</p>
</body>
</html>

出力結果

実行すると、テキストの周囲に緑の破線ボーダーが描画され、さらにその外側にマゼンタ色のinsetスタイルのアウトラインが重ねて表示されます。

CSSのborder（ボーダー）とoutline（アウトライン）の違いを徹底解説

まとめ：borderとoutlineの使い分け

項目borderoutline
スペースの占有占有する占有しない
辺ごとの個別指定可能不可
角丸（radius）対応対応非対応
オフセット指定不可可能（outline-offset）

デザインの一部として装飾的な枠線を引きたい場合はborderを、フォーカス表示などのアクセシビリティ目的やレイアウトに影響を与えたくない場合にはoutlineを使うのが一般的です。両者の特性を理解して、適切に使い分けましょう。

  1. VRとARの違いを徹底解説!仮想現実と拡張現実の基礎知識

    VRとAR、その違いを正しく理解していますか?ブロックチェーンやバーチャルリアリティ(VR)といった革新的なテクノロジーは、すでに世界中に浸透しています。多くの有名企業が自社の製品やアプリケーションにこれらの技術を取り入れており、一般の人々も日常的にそれらを体験する時代となりました。しかし、自分が使っている技術の概念や仕組みを正しく理解している人は、果たしてどれほどいるでしょうか。テクノロジーの分野で最も混乱しやすいのが、「拡張現実(AR)」と「仮想現実(VR)」の違いです。多くの人はこの2つの用語を同じ意味で使っています。本記事では、両者の違いをわかりやすく解説します。仮想現実(VR)とは?

  2. ビッグデータ・データマイニング・機械学習の違いとは?基礎から徹底解説

    ビッグデータ・データマイニング・機械学習の違いとは?基礎から徹底解説テクノロジーは目覚ましいスピードで進化しており、私たちは複雑に絡み合うデータのネットワークへと足を踏み入れつつあります。その一方で、世界中の企業はビッグデータ、データマイニング、機械学習といった革新的なテクノロジーの導入によって、事業の大転換を図ろうとしています。では、なぜ世界中のビジネスがこれらの技術の導入に躍起になっているのでしょうか?それぞれの基本的な概念とは何か、そして互いにどのような違いがあるのかを見ていきましょう。なぜビッグデータ、データマイニング、機械学習が必要なのか?データ需要の高まりと競争の激化により、各企業