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

CSSのoutlineプロパティでアウトラインの幅・スタイル・色を一行でまとめて設定する方法

CSSの outline プロパティは、アウトライン（輪郭線）に関する複数のプロパティ、つまり幅（width）・線種（style）・色（color）の値を、たった1つの宣言でまとめて指定できるショートハンド（省略形）プロパティです。

値の指定順序

outlineプロパティでは、一般的に以下の順序で値をスペース区切りで記述します。

  • 幅：thin（細い）、medium（普通）、thick（太い）、またはpxなどの具体的な長さ
  • 線種：solid（実線）、dashed（破線）、dotted（点線）、double（二重線）など
  • 色：カラーネーム（greenなど）やカラーコード（#009900など）

記述例

次のサンプルでは、1つ目の段落に「細い緑の実線」、2つ目の段落に「太い緑の破線」のアウトラインを、それぞれ1行ずつの指定で適用しています。

<html>
   <head>
   </head>
   <body>
      <p style = "outline:thin solid green;">
         このテキストには細い緑色の実線アウトラインが表示されます。
      </p>
      <br />
      <p style = "outline:thick dashed #009900;">
         このテキストには太い緑色の破線アウトラインが表示されます。
      </p>
   </body>
</html>

ポイント

outlineプロパティはborderと似ていますが、レイアウト上のスペースを占有しないため、要素のサイズや配置に影響を与えずに視覚的な強調を行えるのが特徴です。フォーカス時のハイライト表示などにもよく利用されます。なお、一部のブラウザでは線種（style）の指定が省略された場合にアウトラインが表示されないことがあるため、幅と色だけでなく線種も必ず指定しておくと安全です。

  1. CSSのwidth・heightプロパティの使い方を徹底解説！基本構文と実用例

    CSSでは、height（高さ）プロパティとwidth（幅）プロパティを使用して、要素のコンテンツ領域のサイズを指定できます。ただし、これらのプロパティで設定した値には、マージン（margin）、パディング（padding）、ボーダー（border）は含まれない点に注意しましょう。つまり、ボックス全体のサイズではなく、あくまで中身のコンテンツ部分に対してのみ高さと幅が適用されます。 height・widthプロパティの構文 CSSのheightプロパティは、次のように記述します。 Selector {     height: /*値*/ } CSSのwi

  2. CSSでアウトラインボタンをスタイリングする方法（サンプルコード付き）

    アウトラインボタンとは、背景を塗りつぶさず、枠線（ボーダー）だけでデザインされたボタンのことです。フラットデザインやマテリアルデザインのWebサイトで広く採用されており、CSSのborderプロパティと:hover疑似クラスを組み合わせることで簡単に実装できます。 以下は、CSSでアウトラインボタンをスタイリングする具体的なコード例です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial