写真をふちありにする

画像を使わなくても工夫次第で様々な装飾ができるのがCSSのいいところ。
今回はボーダーとpaddingをつかって写真にふちを付けてみます。

テクニック使用前

テクニック使用後

やり方

１：HTMLを書く

HTMLはこんな感じになります。

２：スタイルシートを書く

スタイルシートはこんな感じになります。

img.sample{
    padding:10px 15px;
    background-color:#ffffff;
    border-color:#dddddd #aaaaaa #aaaaaa #dddddd;
    border-width:1px;
    border-style:solid;
}

解説

今回のポイントはimgにクラスを設定したところです。
DIVで囲っても同じような効果を作り出すことはできますが、 imgに直接設定したほうが無駄なタグがなく、効率的です。

ボーダーの色を微妙に変えることでちょっとした陰影を表現できます。

blogなどでさりげなく使ってみてはいかがでしょうか？

使いこなすための＋α

背景画像を仕込むこともできます。

シンプルな分だけ応用が効きます。いろいろ試してみてください。

一覧へ戻る