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

CSSのアウトライン（outline）とボーダー（border）の違いと使い方

アウトライン（outline）とは？

CSSのアウトライン（outline）は、要素の周囲に線を引くためのプロパティです。最大の特徴は、レイアウト上のスペースを占有しないという点にあります。ボーダー（border）が設定されている場合は、そのボーダーの外側に描画されます。

アウトラインは、要素を視覚的に強調（ハイライト）する目的でよく使われます。たとえば、キーボード操作でフォーカスを受けたリンクやフォーム部品を目立たせるといった使い方が典型的です。なお、Firefoxなど一部のブラウザでは、フォーカス中の要素に自動的に細いアウトラインが表示されることがあります。

ただし、アウトラインには次のような制約があります。

  • 上下左右の特定の辺だけにアウトラインを表示する、といった指定はできない
  • 初期状態では表示されないため、明示的にスタイルを指定する必要がある

ボーダー（border）との違い

一方、ボーダー（border）はアウトラインよりも柔軟なカスタマイズが可能です。主な違いは以下のとおりです。

  • 上下左右の各辺に対して、幅・スタイル・色を個別に指定できる
  • border-radius プロパティを使って角を丸めることができる
  • ボーダーは実際にスペースを占有するため、box-sizing の計算結果に影響する

このように、単純な強調表示にはアウトラインを、デザインの一部として枠線を組み込みたい場合にはボーダーを使うのが基本的な使い分けです。

基本構文

CSSにおける border プロパティと outline プロパティの基本的な書き方は次のとおりです。

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

サンプル1：outline と border の基本的な使い方

次の例では、1つ目の段落に thin dotted（細い点線）のアウトラインを適用し、2つ目の段落ではアウトラインを無効化（none）したうえで、outset スタイルのボーダーを設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
p {
    display: flex;
    float: left;
    margin: 20px;
    padding: 12px;
    width: 30%;
    outline: thin dotted;
    background-color: lavender;
}
p + p {
    width: 250px;
    outline: none;
    border: outset;
}
</style>
</head>
<body>
<h2>Learning is fun</h2>
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995.</p>
<p>Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. Java is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Software Development Domain</p>
</body>
</html>

表示結果

このコードをブラウザで開くと、次のように表示されます。

CSSのアウトライン（outline）とボーダー（border）の違いと使い方

サンプル2：太い二重線のアウトライン

続いて、thick double（太い二重線）のアウトラインを article 要素に適用し、見出しには inset スタイルのボーダーを設定した例です。

<!DOCTYPE html>
<html>
<head>
<style>
article {
    margin: auto;
    width: 70%;
    outline: thick double;
    background-color: lightgoldenrodyellow;
}
h3 {
    border: inset;
}
</style>
</head>
<body>
<h3>Kotlin Tutorial</h3>
<article>Kotlin is a programming language introduced by JetBrains, the official designer of the most intelligent Java IDE, named Intellij IDEA. This is a strongly statically typed language that runs on JVM. In 2017, Google announced Kotlin is an official language for android development. Kotlin is an open source programming language that combines object-oriented programming and functional features into a unique platform.</article>
</body>
</html>

表示結果

このコードをブラウザで開くと、次のように表示されます。

CSSのアウトライン（outline）とボーダー（border）の違いと使い方

まとめ

アウトラインはスペースを取らずに手軽に要素を強調できる反面、辺ごとの個別指定はできません。ボーダーはスペースを占有しますが、各辺の独立した装飾や角丸など、表現力の高いデザインが可能です。両者の特性を理解し、用途に応じて使い分けることで、より洗練されたUIを実現できます。

  1. CSSのborder-colorとoutline-color：境界線と輪郭の色設定をマスターする

    CSSでは、要素の境界線（ボーダー）の色と輪郭（アウトライン）の色を個別に定義できます。ボーダーと異なり、アウトラインはレイアウト上のスペースを一切占有しないという特徴があります。border-colorプロパティは要素のボーダーの色を設定するために使用し、outline-colorプロパティはアウトラインの色を設定するために使用します。 構文 CSSのborder-colorプロパティおよびoutline-colorプロパティの構文は以下のとおりです。 /*border-colorの設定*/ セレクタ { border-color: /*値*/ } /*outline-colorの設

  2. CSSのborder-imageプロパティで境界線画像を作成する方法

    CSSで要素の境界線に画像を表示したい場合は、border-imageプロパティを使用します。通常の実線や点線ではなく、任意の画像を境界線として描画できるため、デザインの幅が大きく広がります。 border-imageプロパティの基本 border-imageプロパティは、主に次の3つの要素を組み合わせて指定します。 画像のURL … 境界線に使用する画像をurl()で指定します。 スライス値 … 画像をどのように分割して配置するかを、数値(px)またはパーセントで指定します。 繰り返し方法 … round(領域に収まるよう間隔を調整して繰り返し)やrepeat(そのまま繰り返し)などを指定