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

CSSのoutline-styleプロパティの使い方｜指定できる10種類の値を解説

CSSのoutline-styleプロパティとは

outline-styleプロパティは、要素の周囲に表示される輪郭線（アウトライン）のスタイルを指定するためのCSSプロパティです。borderプロパティと似ていますが、アウトラインはレイアウトに影響を与えず、要素の外側に描画されるという特徴があります。

outline-styleプロパティには、以下の値を指定できます。

値説明
none輪郭線を表示しません（outline-width:0; と同等）。
solid1本の実線として表示します。
dotted点線として表示します。
dashed短い線分が連なる破線として表示します。
double2本の実線として表示します。
grooveページに刻み込まれたようにへこんだ見た目になります。
ridgegrooveとは逆に、盛り上がったような見た目になります。
insetボックスがページに埋め込まれたように見えます。
outsetボックスが画面から浮き出たように見えます。
hiddennoneと同様に、輪郭線を非表示にします。

サンプルコード

以下のコードを実行すると、outline-styleプロパティの動作を確認できます。

<html>
   <head>
   </head>
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin solid outline.
      </p>
      <br />
      <p style = "outline-width:thick; outline-style:dashed;">
         This text is having thick dashed outline.
      </p>
      <br />
      <p style = "outline-width:5px;outline-style:dotted;">
         This text is having 5px dotted outline.
      </p>
   </body>
</html>

このコードでは、1つ目の段落に細い実線（thin solid）、2つ目の段落に太い破線（thick dashed）、3つ目の段落に5px幅の点線（dotted）のアウトラインをそれぞれ適用しています。ブラウザで表示すると、各段落の周囲に異なるスタイルの輪郭線が描画されます。

使用時の注意点

outline-styleの初期値はnoneであるため、outline-widthやoutline-colorだけを設定しても輪郭線は表示されません。アウトラインを表示したい場合は、必ずoutline-styleを明示的に指定してください。また、これらの個別プロパティをまとめて指定できるショートハンドのoutlineプロパティも活用すると、コードをより簡潔に記述できます。

  1. CSSのoutline-styleプロパティの使い方を徹底解説！構文・値・実例付き

    outline-styleプロパティとは CSSのoutline-styleプロパティは、要素の境界線（ボーダー）の外側に線を描画するために使用します。borderプロパティとの最大の違いは、outlineが要素の寸法（width・height）に含まれないという点です。そのため、レイアウトに影響を与えることなく要素の周囲に線を表示できます。 なお、outline-styleだけでは線は表示されません。実際に線を見えるようにするには、outline-width（太さ）とoutline-color（色）も併せて指定するのが一般的です。 構文（シンタックス） CSS outline-styleプ

  2. CSSのoutlineショートハンドプロパティとは？構文と使い方を実例付きで解説

    CSS outlineショートハンドプロパティとは？ outlineショートハンドプロパティを使うと、要素の境界線の外側に、スタイル（必須）・太さ・色を指定した線をまとめて定義できます。borderプロパティとは異なり、outlineは要素の寸法（幅や高さ）に含まれないため、レイアウトに影響を与えずに輪郭線を表示できるのが大きな特徴です。 構文 CSS outlineショートハンドプロパティの構文は次のとおりです。 Selector {    outline: /*値*/ } 指定できる値 outline-width：線の太さ（thin / medium / thic