WEBデザイン CSS3でシンプル・綺麗な画像装飾テクニック、画像サイズを変えないで写真枠のようなボーダーをつける方法

Sponsored Link


画像を装飾するCSSは古くから知られています。
たとえば、ポラロイド写真風の枠をつけるとかあります。

しかし、古いCSSでは元画像のサイズの外側に枠がつくようなものが多く紹介されています。

そういうものを利用すると、画像のサイズが変わってしまい、全体デザインに影響が出てしまう場合もあります。

今回はそうならないような画像の枠装飾テクニックです。

サンプル

See the Pen Useful img css by nodelay (@nodelay) on CodePen.

凝った装飾はシロウトくさいけど、なにもないとダサイ

プロの開発者であれば、写真にあまり凝ったデザインを施したりはしませんが、まったくなにもないとややダサイ印象があるので、目に留まらない程度で印象には残るデザインを施すことが一般的です。

  1. 軽い角丸
  2. 軽いボックスシャドウ
  3. 枠づけ

ポイントは「軽め」というところで、過度な装飾は途端にシロウトっぽくなってしまいます。

2014-04-11_123938

radius(角丸)も4pxくらいで、box-shadowも薄く細く、しっかり見ないと分かりませんが、あるとないとでは印象が大違いです。

もうひとつの問題、レスポンシブ対応はどうするか


画像を使うにあたって、もうひとつ問題があります。

それが、「レスポンシブ対応」や「マルチデバイス対応」です。これについては、新しいCSSの策定を待つのが一番ですが、「data-img」のような使いやすいプラグインもありますので、それで対応することになります。

そこまでは必要がないという場合でも、「レスポンシブWebデザイン」で画像を配置する要素に合わせて伸縮するような簡易的なレスポンシブ対応のCSSは用意しておくべきでしょう。

これらの問題を解決する汎用的なimgコンテナCSS

画像に「ボックスシャドウ」そして「レスポンシブ対応」するには、画像をコンテナで囲っておくと便利です。

<div class="img shadow2 fadein">
  <img class="rd" src="http://test2.osumituki.com/img/768x432.png">
</div>

<div class="img shadow4 fadein">
<img class="rd" src="http://test2.osumituki.com/img/768x432.png">
</div>

<div class="img shadow5 shadow1 fadein">
<img src="http://test2.osumituki.com/img/768x432.png">
</div>

imgタグをdivタグで囲って、コンテナ化しておき、imgではなくdivにボックスシャドウを適用する方法です。

CSSは、以下のとおりになります。

img {
    vertical-align: bottom;
    -ms-interpolation-mode: bicubic; /* IE7で画像縮小時の劣化防止 */
}

まず、今回の件とは直接関係ありませんが、imgの底に位置合わせをしておきます。IE7のCSSはオマケです。

次に、ボーダーとパディングをwidthとheightに含む指定をします。今回はborderの分だけ大きくなるのを防ぐためです。(IE8+)

/*
 * box-sizing (IE8+)
 * floatの崩れを防止
 * パディングとボーダーを幅と高さに含める
 */
*, *:after, *:before {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: bortableder-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

ただ、適用しなくてもさほど気にならないと思います。

次に、簡易的なレスポンシブ対応をします。

/*
 * Responsive-style
 */
.img img {
    width: 100%;
}
.img {
    height: auto;
    margin: 16px auto;
}
.img {
    display: table; /*重要*/
}
/* -----------------------------------------------------------
画像のwidth:100%は親要素に依存
画像のmax-width:100%は画像に依存(表示領域が画像より狭い場合は、IEだとサイズはそのまま、Chromeは縮小表示)
画像をセンター配置するには、ブロック要素にして「margin」で調整する(imgは「インライン要素」)
ブロック要素にするのは「margin」の”auto”がブロック要素でないと効果が出ないから。
上記のようにすれば、imgを囲むdivは不要だが、divで囲む方が後々便利。
その場合は、imgに指定していた「margin:0 auto;display:block」は親要素のdivに
指定することになるが、widthを指定しないと横幅100%になる。この場合問題はないが、
「display:block」ではなく、「display:table」を指定するとimgの幅で可変するdivに
なるので、この後のキャプションを付けたい場合で使えるのでやっておくと良い。
上記は「.img」のみに行う。
----------------------------------------------------------- */

この段階で「親要素内に中央寄せ」もmarginで行っておくと便利です。

さらに、「display: table;」を指定することで、画像を囲うdivタグをピッタリと画像サイズになるようにしています。

角丸装飾


上のdivに対して角丸を施すCSSは以下のとおりです。一般的ですが、4隅指定のほか、上2隅と下2隅だけのものも作っておくと後々便利です。

なお、角丸(radius)はimgタグに直接class指定する必要があります。(div枠に指定しても効きません)

あと、一番最初に掲載したhtmlではimgタグにclassで「rd」とありますが、これを「PIE」でIE8対応すると、画像そのものが表示されなくなります。

よって、今回の場合は「PIE」で角丸をIE8対応させないでください。もし、「PIE」を使ってしまうと、画像そのものも表示されなくなってしまいます。

/*
 * Radius-style (IE8は非対応 - .pie 付与で対応、tableは「border-collapse:collapse;」があるので角丸にならない)
 */
.rd {
    border-radius: 4px!important;
    zoom: 1; /*PIE用*/
    position: relative; /*PIE用*/
}
.rd-t {
    border-radius: 4px 4px 0 0!important;
    zoom: 1; /*PIE用*/
    position: relative; /*PIE用*/
}
.rd-b {
    border-radius: 0 0 4px 4px!important;
    zoom: 1; /*PIE用*/
    position: relative; /*PIE用*/
}

「PIE用」とありますが、今回は「IE8完全非対応」です。「PIE」などのプラグインでも対応できません。

上記に「PIE用」の命令が入っているのは、単に角丸のみの装飾で使う場合に、IE8でも大丈夫なように事前に入れてあるだけです。角丸やボックスシャドウのIE8対応については「IE8に対応させる場合」や「IE8をHTML5やCSS3、rgba角丸に対応させる場合の注意点まとめ」をご覧ください。

ボックスシャドウのパターン


2014-04-11_131104

5つほど用意してありますが、よく使うのはサンプルCSSにもある4種類です。画像サンプルは【2】【4】【5】を掲載しています。

  1. 【shadow1】画像の下辺に立体的な影をつける
  2. 【shadow2】周囲に薄い影をつける
  3. 【shadow4】画像の内側に半透明の枠をつける
  4. 【shadow5】画像の内側にポラロイド写真のような枠をつける

画像の枠に「borderタグ」を使うとサイズが大きくなってしまいます。そこで、元画像のサイズ変えないように、box-shadowのinsetを使うことで枠付けを実現しています。

これは、CSS3の疑似要素(:after)を使った上で「position: absolute;」でdiv枠を絶対配置にすることで、枠と画像を重ねるという方法になります。

この方法は、画像の上面にキャプションを付ける場合にも使われます。たとえば、マウスオーバーやクリックで、画像の上に薄い色の膜を貼って「タイトルや説明」を書いたりするアレです。

img-sample.gif

/*
 * Shadow-style
 */
.shadow1 {
    box-shadow: 0 10px 6px -6px #777777;
}
.shadow2 {
    box-shadow: 0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(0,0,0,.1) inset;
}
.shadow3 { /*PIEでもIE8不可*/
    box-shadow: rgba(0,0,0,.15) -1px 2px 0, rgba(255,255,255,1) -1px 2px 0 inset;
}
.shadow4 { /*PIEでもIE8不可*/
    position: relative;
}
.shadow4:after {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: rgba(255,255,255,.5) 0 0 0 20px inset;
}
.shadow5 { /*PIEでもIE8不可*/
    position: relative;
    border: #D0D0D0 1px solid;
}
.shadow5:after {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: rgb(255,255,255) 0 0 0 16px inset;
}

ページ読み込み時に画像をフェードインさせるCSS(webkit系ブラウザのみ)


これはオマケなのですが、WEBページを読み込む際に画像にフェードインの効果を施すと、ちょっとしたアクセントになり印象が変わってきます。使い方はdivタグに「.fadein」をつけるだけです。

/*
 * Img - fadein / fadeout
 */
.fadein {
    -webkit-animation-name: fadein;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
}
@-webkit-keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.fadeout {
    -webkit-animation-name: fadeout;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
}
@-webkit-keyframes fadeout {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

CSSには「fadeout」の記述もありますが、実際に使うことはないでしょう。消えてしまっては困りますので。

Sponsored Link

最新記事はトップページで!

京都発・地方が盛り上がるグルメや観光に撮影ロケ地の話題を提供!


購読するならRSSをご利用ください!

RSSはこちらをご利用ください。


マスコミ各社様の記事使用規約についてはこちらをご覧ください。

当ブログでは掲示板やSNSなど他メディアでURLや記事を紹介することはございませんので、掲示板などで記事を紹介されていても一切無関係です。誤解なきようお願いいたします。
当ブログで転載しているTweetはTwitter社の規約(2013/10)に準じた形式(API利用)によって許可された範囲で行われています。また、Tweet内容の所有権はTwitter社の規約によりTweet元のアカウント所有者にあります。そのため、当ブログでその所有権を主張するものではありません。Tweet内容については責任は負いませんので予めご了承ください。