画像に枠線を追加する方法 - CSSの使い方


  1. プレーンな枠線: 以下のCSSコードを使用して、画像にプレーンな枠線を追加します。
img {
  border: 1px solid #000000;
}

このコードでは、img要素に対して1ピクセルの幅で黒い実線の枠線を指定しています。枠線のスタイルや色を変更するには、適宜値を調整してください。

  1. 枠線のスタイルと色の指定: 以下のCSSコードを使用して、枠線のスタイルと色を指定します。
img {
  border: 2px dashed #ff0000;
}

この例では、img要素に対して2ピクセルの幅で赤い点線の枠線を指定しています。他の枠線のスタイルと色も同様に指定できます。詳細なスタイルのオプションについては、CSSのリファレンスを参照してください。

  1. 枠線の角を丸くする: 以下のCSSコードを使用して、枠線の角を丸くすることができます。
img {
  border: 2px solid #000000;
  border-radius: 5px;
}

この例では、img要素に対して2ピクセルの幅で黒い実線の枠線を指定し、角を5ピクセルの半径で丸くしています。border-radiusプロパティを使用することで、角の丸みの具体的な値を指定できます。

以上がいくつかの枠線の追加方法の例です。必要に応じて、これらのコードをカスタマイズして使用してください。また、他の画像スタイリングのオプションについても調べてみるとよいでしょう。