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

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

CSSのoutline-styleプロパティは、要素の周囲に表示されるアウトライン（輪郭線）のスタイルを指定するために使用します。アウトラインはborderプロパティと似ていますが、ページのレイアウトや要素のサイズに影響を与えないという点が大きな特徴です。そのため、フォーカス表示や強調などに活用されます。

outline-styleで使える主な値

  • solid … 実線で表示します
  • dashed … 破線で表示します
  • dotted … 点線で表示します
  • double … 二重線で表示します
  • groove / ridge / inset / outset … 立体的な装飾線で表示します
  • none … アウトラインを非表示にします

なお、アウトラインを実際に表示するには、outline-styleに加えてoutline-width（線の太さ）も一緒に指定しておくと確実です。

使用例

次のコードを実行すると、outline-styleプロパティの動作を確認できます。実線・破線・点線それぞれの違いを見てみましょう。

<html>
   <head>
   </head>
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         このテキストは「細い実線」のアウトラインが表示されています。
      </p>
      <br />
      <p style = "outline-width:thick; outline-style:dashed;">
         このテキストは「太い破線」のアウトラインが表示されています。
      </p>
      <br />
      <p style = "outline-width:5px; outline-style:dotted;">
         このテキストは「5pxの点線」のアウトラインが表示されています。
      </p>
   </body>
</html>

このように、outline-widthとoutline-styleを組み合わせることで、さまざまな見た目のアウトラインを簡単に作成できます。デザインに合わせて線種や太さを調整してみてください。

  1. CSSのanimation-delayプロパティでアニメーションの開始を遅らせる方法

    CSSでアニメーションの開始タイミングを遅らせたい場合は、animation-delayプロパティを使用します。このプロパティに秒数（s）やミリ秒（ms）を指定することで、アニメーションが始まるまでの待ち時間を簡単に設定できます。 animation-delayの基本的な使い方 以下の例では、animation-delay: 2s; を指定することで、ページが読み込まれてから2秒後にアニメーションが開始されるように設定しています。 サンプルコード <!DOCTYPE html> <html>   <head>   &n

  2. CSSでページネーションをスタイリングする方法

    Webサイトで複数ページに分かれたコンテンツを扱う際、ページネーション(ページ送り)のデザインはユーザビリティに大きく影響します。CSSを使えば、単なるテキストリンクの並びを、見やすくクリックしやすいナビゲーションへと変えることができます。 基本的なページネーションの実装例 以下のコードは、CSSでページネーションをスタイリングする基本的な例です。そのままHTMLファイルとして保存し、ブラウザで開けばすぐに動作を確認できます。 <!DOCTYPE html> <html>    <head>