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

CSSでアウトラインを実線（単線）に設定する方法

要素のアウトラインを一本の実線（ソリッドライン）として表示したい場合は、CSSの outline-style プロパティに対して値 solid を指定します。アウトラインは要素の周囲に描かれる線で、border とは異なりレイアウトに影響を与えないため、フォーカス表示や強調などに活用されます。

基本の構文

outline-style: solid;

実際にアウトラインを表示するには、通常 outline-width（線の太さ）と組み合わせて指定します。outline-width のみ、あるいは outline-style のみを指定した場合、ブラウザによっては正しく表示されないことがあります。

コード例

以下の例では、段落テキストに幅3pxの実線アウトラインを設定しています。

<html>
   <head>
   </head>
   <body>
      <p style = "outline-width:3px;outline-style:solid;">
         このテキストには3pxの実線アウトラインが適用されています。
      </p>
   </body>
</html>

表示結果

このコードをブラウザで開くと、段落の周囲に3pxの太さの黒い実線が表示されます。デフォルトでは outline-color に指定がない場合、多くのブラウザでは文字色や初期設定に準じた色で描画されます。

応用：ショートハンドでまとめて指定する

outline ショートハンドプロパティを使えば、太さ・スタイル・色を1行でまとめて指定することも可能です。

p {
   outline: 3px solid #ff6600;
}

borderとの違い

  • レイアウトへの影響： border はボックスモデルの一部としてスペースを占有しますが、outline は要素の上に重ねて描画されるため、レイアウトに影響しません。
  • 角丸への対応： 多くのモダンブラウザでは、outline も要素の border-radius に沿って描画されます。
  • 主な用途： フォーカス時のハイライトや、一時的な強調表示などによく使われます。

このように、outline-style: solid を使えば簡単に単線のアウトラインを設定でき、アクセシビリティ向上のためのフォーカス表示などにも役立ちます。

  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"