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

CSSのoutline-styleプロパティでリッジ（ridge）スタイルを設定する方法

CSSで要素のアウトライン（輪郭線）をリッジ（ridge）スタイルに設定するには、outline-styleプロパティの値としてridgeを指定します。

リッジは、groove（溝）スタイルとは対照的な効果を持ちます。grooveがアウトラインをページに彫り込んだように見せるのに対し、ridgeは逆にページから浮き上がって盛り上がったような立体感のある外観になります。

サンプルコード

以下の例では、3pxの太さを持つリッジスタイルのアウトラインを段落に適用しています。

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

ポイント解説

  • outline-width: 3px; — アウトラインの太さを3ピクセルに指定します。
  • outline-style: ridge; — アウトラインをリッジ（浮き出た稜線）スタイルに設定します。

リッジスタイルを視覚的に際立たせるためには、ある程度の太さ（2px以上）を指定するのがおすすめです。あまり細いと、立体感がほとんど確認できなくなってしまいます。

  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"