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

CSSのborderプロパティの使い方｜画像の枠線の幅を設定する方法

CSSのborderプロパティは、画像や要素の周囲に枠線を描画し、その幅（太さ）を設定するために使用します。このプロパティには、pxなどの長さ単位の値、または%（パーセンテージ）を指定することができます。

borderプロパティの基本

borderプロパティは、以下の3つの値をまとめて指定できるショートハンド（省略記法）です。

  • 幅（width）：枠線の太さ。px、em、%などで指定します。
  • スタイル（style）：枠線の種類。solid（実線）、dashed（破線）、dotted（点線）などがあります。
  • 色（color）：枠線の色。カラーネームやカラーコードで指定します。

なお、幅を0pxに指定した場合、枠線はまったく表示されません。画像のデフォルトの枠線を消したい場合などに便利です。

使用例

次のコードでは、1つ目の画像には「border:0px」を指定して枠線を非表示にし、2つ目の画像には「4px dashed green」を指定して、緑色の破線の枠線を4pxの太さで表示しています。

<html>
   <head>
   </head>
   <body>
      <img style = "border:0px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:4px dashed green;" src = "/css/images/logo.png" />
   </body>
</html>

ポイント

borderプロパティを使うことで、画像にアクセントを加えたり、逆に不要な枠線を削除したりと、デザインの調整が簡単に行えます。特に古いブラウザでは画像に自動的に枠線が付くことがあるため、「border:0px」を指定して明示的に消しておくのがおすすめです。

  1. CSSのtransform-originプロパティの使い方を解説！変形の基準点を変更する方法

    transform-originプロパティとは？ CSSのtransform-originプロパティを使うと、transformで変形（回転・拡大縮小・傾斜など）される要素の基準点（原点）を自由に変更できます。 デフォルトでは要素の中央（50% 50%）が基準点に設定されていますが、このプロパティを指定することで、回転やスケール変換の起点を要素の任意の位置に移動させることが可能です。 値の指定方法は主に以下のとおりです。 キーワード： top、bottom、left、right、center など パーセンテージ： 30% 40% のように要素のサイズに対する割合で指定 長さ（px、em な

  2. CSSのtransformプロパティで要素を変形させる方法

    CSSのtransformプロパティは、要素に対して2Dまたは3Dの変形を適用するために使用されます。回転（rotate）、拡大縮小（scale）、移動（translate）、傾斜（skew）などの変換を組み合わせることで、静的なページに動きや立体感を加え、より視覚的に魅力的なデザインを実現できます。 transformプロパティの基本的な使い方 transformプロパティには、主に以下のような変換関数を指定できます。 rotate()：要素を指定した角度で回転させます scale()：要素のサイズを拡大・縮小します translate()：要素をX軸・Y軸方向に移動させます skew()