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

CSSのoutline（アウトライン）プロパティの使い方

outlineプロパティとは

outline（アウトライン）は、要素の周囲に線を表示するためのCSSプロパティです。アウトラインの色、スタイル、太さなど、複数の個別プロパティ（outline-color、outline-style、outline-width）の値をまとめて指定できるショートハンド（省略記法）として機能します。

borderプロパティと似ていますが、outlineには「レイアウト上のスペースを占有しない」という特徴があり、要素の配置やサイズに影響を与えずに枠線を表示できます。フォーム入力欄のフォーカス表示などによく使われます。

記述例

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

コードの解説

  • outline:thin solid green; … 細い（thin）実線（solid）の緑色（green）アウトラインを指定しています。
  • outline:thick dashed #009900; … 太い（thick）破線（dashed）の緑色（#009900）アウトラインをカラーコードで指定しています。

このように、outlineプロパティでは「幅 スタイル 色」の順に値を半角スペースで区切って指定するのが一般的です。スタイルには、solid（実線）、dashed（破線）、dotted（点線）、double（二重線）などを指定でき、色はキーワード名や16進数のカラーコードで設定できます。

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

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

  2. HTML DOM Style outlineプロパティの使い方｜取得・変更方法をサンプルコード付きで解説

    DOMのstyle.outlineプロパティは、HTMLドキュメント内の要素に適用されたアウトライン（輪郭線）を取得したり、新しい値を設定したりするために使用されるプロパティです。なお、アウトラインはCSSのborderと似ていますが、要素のレイアウト領域（ボックスサイズ）に影響を与えないという違いがあります。そのため、フォーカス表示やハイライトなどに活用されることが多いです。構文outlineプロパティの基本的な構文は以下の通りです。1. アウトラインを取得する場合object.style.outline2. アウトラインを変更する場合object.style.outline = 幅 スタイ