CSSで画像に枠線をつける方法と枠デザイン例

画像をそのまま表示するんじゃなくて額縁をつけるように少し装飾したいですよね？

「そもそも画像に枠線をどうやってつけるの？」

CSSで画像に枠線をつける方法を4つとそれを応用した枠デザイン例を紹介します。

画像に枠線をつける方法

border

要素に枠線をつけるには基本的にborderを指定しましょう。

<style>
.example{
    border: 10px solid #519538;
}
</style>
<img class="example" width="200" src="cat.jpg" alt="">

borderについて詳しくはこちら↓

borderを使うとグラデーションの線も可能です。

outline

outlineでもborderのように線を引くことができます。

<style>
.example2{
    outline: 10px solid #519538;
}
</style>
<img class="example2" width="200" src="cat.jpg" alt="">

borderとoutlineの違い

borderは画像の位置を押しやって線が付きます。

outlineは画像の位置を変えないまま、その外側に線が付きます。

borderとoutlineの両方を同時に使うこともできます。

また、box-shadowとセットで使ったときも違いが出ます。

box-shadowはborderの外側に表示されるためお互い邪魔しませんが、outlineとbox-shadowはどちらもimgの外側にでるためかぶってしまいます。

box-shadowを使うときはborderを使いましょう。

paddingとbackground

imgにpaddingをつけると見えない空間が生まれます。

backgroundを指定するとpaddingに色が付きます。

<style>
.example3{
    padding: 10px;
    background: #519538;
}
</style>
<img class="example3" width="200" src="cat.jpg" alt="">

borderと組み合わせて二重線にするときなどに使えます。

box-shadow

box-shadowは影を作るCSSです。

影をつけることで画像を浮かび上がらせることができます。

<style>
.example4{
    box-shadow: 0 0 5px #333;
}
</style>
<img class="example4" width="200" src="cat.jpg" alt="">

box-shadowは上下左右にずらすことができます。

下記のように右下にずらして影 兼 線のようなデザインもいいでしょう。

<style>
.example5{
    box-shadow: 10px 10px 0 #519538;
}
</style>
<img class="example5" width="200" src="cat.jpg" alt="">

枠デザイン例

上記の枠線をつける方法を応用して枠線をCSSだけでデザインしてみましょう。

下記を参考に色や組み合わせを変えてあなたの理想の枠線を作ってください。

角丸枠

<style>
.example10{
    border-radius: 10px;
    outline: 10px solid #6c86ce;
    margin: 10px;
}
</style>
<img class="example10" width="200" src="cat.jpg" alt="">

border-radiusを使うと角丸にできます。

ただしborderを使うとborder自体は角丸になっても写真が角丸になりません。

outlineを使うと写真も枠も角丸になります。

現像写真風

<style>
.example7{
    border: 5px solid #FFF;
    box-shadow: 0 0 5px #999;
}
</style>
<img class="example7" width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">

木枠風

<style>
.example6{
    padding: 2px;
    border: 5px solid #e8bf85;
    box-shadow: 1px 1px 3px #999;
}
</style>
<img class="example6" width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">

金の額縁風

<style>
.example8{
    border: 10px solid;
    border-image: linear-gradient(to right bottom,#e0d9b6,#b4983a) 1 / 10px;
}
</style>
<img class="example8" width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">

美術品を展示している額縁風

<style>
.example9{
    border: 10px solid;
    border-image: linear-gradient(to right bottom,#e0d9b6,#b4983a) 1 / 10px;
    outline: 3px outset #efe9cc;
    padding: 15px;
    background: #FFF;
    box-shadow: 1px 3px 10px #999;
}
</style>
<img class="example9" width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">

【まとめ】画像に枠線をつける方法

• border
  →基本の線
• outline
  →borderの外側に線を引きたいとき
• paddingとbackground
  →borderの内側に線を引きたいとき
• box-shadow
  →画像に影を付けたいとき

以上、CSSで画像に枠線をつける方法と枠デザイン例でした。