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

CSS3のoutline-offsetプロパティとは？使い方とサンプルコードを解説

アウトライン（outline）とは、要素のボーダー（border）の外側に線を描画するプロパティです。ボーダーと似ていますが、レイアウトに影響を与えない点が特徴で、主にフォーカス表示や強調などに活用されます。

outline-offsetプロパティとは

CSS3で追加されたoutline-offsetプロパティを使うと、アウトラインとボーダーの間隔（オフセット）を自由に調整できます。値には正負の長さ（px など）を指定でき、正の値でアウトラインを外側へ、負の値で内側へ移動させることが可能です。

実装例

以下のコードは、outline-offsetプロパティを実装したサンプルです。ピンク色のボーダーを持つdiv要素に対して、緑色のアウトラインを15px外側にオフセットさせて表示しています。

<html>
   <head>
      <style>
         div {
            margin: 20px;
            padding: 10px;
            width: 300px;
            height: 100px;
            border: 5px solid pink;
            outline: 5px solid green;
            outline-offset: 15px;
         }
      </style>
   </head>
   <body>
       <div>TutorialsPoint</div>
   </body>
</html>

コードのポイント

  • border: 5px solid pink; … 要素の周囲に5pxのピンク色のボーダーを設定します。
  • outline: 5px solid green; … ボーダーの外側に5pxの緑色のアウトラインを描画します。
  • outline-offset: 15px; … ボーダーとアウトラインの間に15pxの余白を作り、アウトラインを外側に離して表示します。

このようにoutline-offsetを組み合わせることで、ボーダーから浮いたようなデザイン的な装飾表現が簡単に実現できます。

  1. CSS3のマルチカラムレイアウト：column-countプロパティの使い方

    CSS3のマルチカラムレイアウトにおけるcolumn-countプロパティは、要素の内容を何列に分割して表示するかを指定するためのプロパティです。新聞や雑誌のような段組みレイアウトを、HTMLの複雑な構造を組むことなく簡単に実現できます。 このプロパティを使うことで、テキストが自動的に指定した列数に分割され、ブラウザが内容量に応じて各列の高さを調整してくれます。 column-countプロパティの実装例 以下のコードを実行すると、CSSでcolumn-countプロパティを実装した動作を確認できます。 <html> <head> <style> .mult

  2. CSSのborderショートハンド（一括指定）プロパティの使い方

    borderプロパティは、要素の枠線（ボーダー）の見た目を定義するために使用されるプロパティです。border-width（線の太さ）、border-style（線の種類）、border-color（線の色）という3つの個別プロパティの値を、1つの宣言でまとめて指定できる「ショートハンド（一括指定）プロパティ」です。構文CSSのborderプロパティは、次のように記述します。セレクタ {     border: /*値*/ }値は「太さ スタイル 色」の順に半角スペースで区切って指定するのが一般的です。例えば「2px solid orange」と指定すれ