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

CSSで画像にボーダー（枠線）を追加する方法

Webページ上の画像にボーダー（枠線）を追加したい場合、CSSの border プロパティを使うのが最も簡単な方法です。border プロパティは「太さ」「スタイル」「色」の3つの値をまとめて指定できるショートハンド（一括指定）プロパティです。

基本的な書き方

border プロパティは以下のように記述します。

border: 太さ スタイル 色;

例えば border: 8px solid rgb(0, 238, 255); と指定すると、8pxの太さの実線（solid）がシアン系の色で描画されます。

サンプルコード

以下は、CSSを使って画像にボーダーを追加する具体的なコード例です。

<!DOCTYPE html>
<html>
<head>
<style>
img {
    border: 8px solid rgb(0, 238, 255);
    width: 400px;
    height: 400px;
}
</style>
</head>
<body>
<h1>画像にボーダーを付ける例</h1>
<img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</body>
</html>

表示結果

上記のコードを実行すると、画像の周囲に8pxの水色の枠線が表示されます。

CSSで画像にボーダー（枠線）を追加する方法

borderプロパティの各値について

  • 太さ（width）： 枠線の太さを px や em などの単位で指定します。例： 8px
  • スタイル（style）： 線の種類を指定します。主な値には solid（実線）、dashed（破線）、dotted（点線）、double（二重線）などがあります。
  • 色（color）： 枠線の色を指定します。RGB値、16進数カラーコード、キーワード名などが使えます。

角を丸くしたい場合

ボーダーの角を丸くしたい場合は、border-radius プロパティを組み合わせると便利です。

img {
    border: 8px solid rgb(0, 238, 255);
    border-radius: 12px;
}

このように border プロパティを活用すれば、画像の見た目を簡単に整え、ページのデザイン性を高めることができます。

  1. CSSでホバー時にトランジション（アニメーション）を追加する方法を解説

    CSSでホバー時にトランジション（滑らかなアニメーション効果）を追加するには、transitionプロパティと:hover疑似クラスを組み合わせて使用します。あらかじめ要素にtransitionを設定しておくことで、ホバー時の変化が瞬時に切り替わるのではなく、指定した時間をかけてスムーズに変化するようになります。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1&q

  2. PowerPointで画像に枠線（ボーダー）を追加する方法｜色・太さ・点線のカスタマイズ手順

    Microsoft PowerPointやPowerPoint Onlineで画像に枠線やフレームを追加したい場合は、この詳細ガイドをご覧ください。黒や白のシンプルな枠線から点線まで、あらゆる種類の枠線をPowerPointだけで追加でき、追加のアドインや外部ツールは一切不要です。 挿入した画像を目立たせたいとき、複数の写真を視覚的に区別したいときには、枠線を追加するのが最も効果的です。PowerPointには標準で枠線を追加できる機能が搭載されているため、サードパーティ製アプリを使う必要はありません。 注意： Microsoft PowerPointとPowerPoint Onlineでは、