RAGARD | Simple Themes & Tutorials

手軽に使えるCSS講座です。この講座ではイメージの周りに枠を2色入れる方法ご紹介します。CSSを扱った事がある方はコードを見るだけでわかるかと思います。

上のコードは以下のようになります。

1
2
3
4
5

img {
border:1px solid #f25392; /*　ピンク　*/
padding:2px;
background:#9caa3b;　/*　緑　*/
}

一番外側となる色や幅はborderで設定し、内側となる色はbackground、サイズはpaddingで設定します。この他にもborderにdoubleを指定する方法はありますが上記で紹介したコードのほうが扱いやすいと思われます。少しでも画像にアクセントを付けたい時等にどうぞ。

タグ： CSS