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

CSSでアウトラインのスタイルを二重線（double）に設定する方法

要素の周囲に2本の実線からなるアウトライン（外枠）を表示したい場合は、CSSの outline-style プロパティに値 double を指定します。

doubleを使うときのポイント

double は名前のとおり「二重線」を描画する値ですが、線が正しく2本として見えるためにはある程度の幅が必要です。outline-width を1px〜2px程度の細さにすると、2本の線がつぶれて1本に見えることがあるため、3px以上の太さを指定するのがおすすめです。

コード例

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

実行結果の解説

上記のコードでは、段落要素に対して outline-width: 7px; と outline-style: double; をインラインスタイルで指定しています。ブラウザで表示すると、テキストの周囲に7pxの太さを持つ二重実線のアウトラインが描画されます。

アウトラインは 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"