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

CSSのoutline-styleプロパティで点線（dotted）のアウトラインを設定する方法

点線のアウトラインを設定するには

CSSで要素の周囲に点線のアウトラインを表示したい場合は、outline-styleプロパティに値 dotted を指定します。あわせて outline-width プロパティを使用することで、アウトラインの太さも自由に調整できます。

コード例

<html>
   <head>
   </head>
   <body>
      <p style = "outline-width:7px;outline-style:dotted;">
         This text is having 7px dotted outline.
      </p>
   </body>
</html>

解説

上記の例では、段落（<p>要素）に対してインラインスタイルを適用しています。outline-width:7px; によりアウトラインの太さが7pxに設定され、outline-style:dotted; によってそのアウトラインが点線として描画されます。ブラウザで表示すると、テキストの周囲に7px幅の点線枠が確認できます。

補足：outlineとborderの違い

アウトラインはボーダー（border）と似ていますが、以下のような違いがあります。

  • アウトラインはレイアウトのスペースを占有しないため、他の要素の配置に影響しません。
  • アウトラインは要素の四辺すべてに一律に適用され、各辺ごとに個別の指定はできません。

フォーカス表示やハイライトなど、レイアウトに影響を与えずに視覚的な強調を行いたい場合に、アウトラインは特に便利です。

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

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

  2. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-