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

CSSのborderプロパティで線の色・スタイル・幅をまとめて指定する方法

CSSでは、border（境界線）プロパティを使うことで、線の色・スタイル・幅をたった1つのプロパティでまとめて指定できます。これは「ショートハンド（省略記法）」と呼ばれる書き方で、個別にborder-widthやborder-style、border-colorを設定するよりもコードがすっきりします。

基本的な書き方

borderプロパティの値は、一般的に次の順序で指定します。

border: 幅 スタイル 色;

例えば、「幅3px」「実線（solid）」「緑色」の枠線を引く場合は以下のように記述します。

使用例

実際にブラウザで動作を確認できるサンプルコードです。

<html>
   <head>
   </head>
   <body>
      <p style = "border:3px solid green;">
         borderショートハンドプロパティを使用した例です。
      </p>
   </body>
</html>

このコードを実行すると、段落テキストの周囲に3pxの太さの緑色の実線が表示されます。

指定できる主なスタイル値

borderのスタイルには、以下のような種類があります。

  • solid … 実線（一本の線）
  • dashed … 破線
  • dotted … 点線
  • double … 二重線
  • groove / ridge … 立体的なくぼみ線・盛り上がり線
  • inset / outset … 内側・外側にへこんだ立体的な枠線

ポイント

ショートハンドで指定する場合、スタイルの値は必須です。スタイルを省略するとデフォルト値の「none」が適用され、線が表示されませんので注意しましょう。また、幅と色は省略可能で、その場合はそれぞれ初期値（medium・currentColor）が適用されます。

  1. CSSでボーダー（境界線）の色を設定する方法

    border-color プロパティは、要素のボーダー（境界線）の色を指定するために使用されます。このプロパティを使うことで、枠線の色を自由にカスタマイズできます。 以下のコードを実行すると、border-color プロパティの実際の動作を確認できます。この例では、2px の破線（dashed）ボーダーの色をマルーン（#800000）に設定しています。 サンプルコード <html>    <head>       <style>    

  2. CSSのoutlineプロパティでアウトラインの幅・スタイル・色を一行でまとめて設定する方法

    CSSの outline プロパティは、アウトライン（輪郭線）に関する複数のプロパティ、つまり幅（width）・線種（style）・色（color）の値を、たった1つの宣言でまとめて指定できるショートハンド（省略形）プロパティです。 値の指定順序 outlineプロパティでは、一般的に以下の順序で値をスペース区切りで記述します。 幅：thin（細い）、medium（普通）、thick（太い）、またはpxなどの具体的な長さ 線種：solid（実線）、dashed（破線）、dotted（点線）、double（二重線）など 色：カラーネーム（greenなど）やカラーコード（#009900など）