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

CSSでアウトラインスタイルを破線に設定する方法

CSSで要素のアウトライン（輪郭線）を破線として表示するには、outline-styleプロパティの値に dashed を指定します。

さらに、outline-widthプロパティと組み合わせることで、破線の太さも自由に調整できます。

コード例

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

実行結果のポイント

上記のコードでは、段落（<p>要素）に対してインラインスタイルを適用しています。outline-width:6px により6ピクセルの太さが指定され、outline-style:dashed によってそのアウトラインが破線で描画されます。

なお、アウトラインはボーダー（border）と異なりレイアウトに影響を与えないため、フォーカス表示や強調などに便利です。

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

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

  2. CSSでラベルのスタイルを設定する方法｜色分けラベルの作り方

    CSSを使用すれば、<span>タグにクラスを割り当てるだけで、色分けされた見やすいラベル（バッジ）を簡単に作成できます。ステータスやカテゴリの表示に役立つため、Webアプリケーションや管理画面などでよく使われるテクニックです。 サンプルコード 以下は、CSSでラベルのスタイルを設定する具体的なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"