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

CSSのborder-bottom-styleで下ボーダーのスタイルを変更する方法

CSSの border-bottom-style プロパティを使うと、要素の下側のボーダー(罫線)のスタイルだけを個別に変更できます。実線・破線・点線など、さまざまなデザインを選べるので、見出しや区切り線のアクセントとして活用すると効果的です。

基本的な使い方

下記のサンプルコードでは、border-bottom-style プロパティに「dashed(破線)」を指定し、下ボーダーのスタイルを変更しています。あわせて border-width で線の太さを4pxに設定することで、スタイルがわかりやすく表示されます。

サンプルコード

<html>
   <head>
   </head>
   <body>
      <p style = "border-width:4px;border-bottom-style:dashed;">
         これはデモ用のコンテンツです
      </p>
   </body>
</html>

主な値の一覧

border-bottom-style プロパティには、以下のような値を指定できます。

  • none: ボーダーを表示しない(初期値)
  • solid: 1本の実線
  • dashed: 破線
  • dotted: 点線
  • double: 2本の二重線
  • groove / ridge: 彫り込んだ・盛り上がったように見える立体線
  • inset / outset: 要素が埋め込まれた・浮き出たように見える立体線

なお、ボーダーを実際に表示するには、太さを指定する border-width(または一括指定できる border-bottom)と組み合わせて使うのがポイントです。

  1. CSSで下境界線（border-bottom）のスタイルを設定する方法

    要素の下側に表示される境界線（ボーダー）のデザインを変更したい場合は、CSSの border-bottom-style プロパティを使用します。このプロパティでは、点線や二重線、破線、実線など、さまざまなスタイルの下境界線を簡単に設定できます。 指定できる主な値 border-bottom-style プロパティに指定できる代表的な値は以下のとおりです。 dotted … 点線 dashed … 破線 solid … 実線 double … 二重線 inset … 凹んで見える立体風の線 outset … 浮き上がって見える立体風の線 サンプルコード 次のコードを実行すると、各クラスごとに

  2. CSSのborderショートハンド（一括指定）プロパティの使い方

    borderプロパティは、要素の枠線（ボーダー）の見た目を定義するために使用されるプロパティです。border-width（線の太さ）、border-style（線の種類）、border-color（線の色）という3つの個別プロパティの値を、1つの宣言でまとめて指定できる「ショートハンド（一括指定）プロパティ」です。構文CSSのborderプロパティは、次のように記述します。セレクタ {     border: /*値*/ }値は「太さ スタイル 色」の順に半角スペースで区切って指定するのが一般的です。例えば「2px solid orange」と指定すれ