どのような内容の画像が入るかわからない場合でもきれいな見た目の枠線をつけたい時に使えるCSS

画像の内容によって枠線をつけたほうがきれいに見える場合と見えない場合があります。画像一枚一枚にたいしてつけるかつけないかを決められるなら困らないのですが、UGCサイトやブログテーマのようにどんな画像が表示されるのかわからないケースでは、そのような丁寧な判断をしたくてもできないのが現実でしょう。そんなときに重宝する枠線がPretty Borderです。

Pretty Border

Pretty Borderはどのような画像が入ってもきれいに見える枠線です。具体的には半透明の罫線を画像の内側に添わせて重ねた枠線のことを指します。ちなみにこの名前は僕が勝手につけました。

現象としては、画像のキワ1px分の色が、半透明の色が重なることによって変わって見えます。何がPrettyなのかというと画像のキワが常にシャープに見える点です。画像のキワに白色がきても、黒色がきても、灰色がきても、にじんで見えることがありません。総合的にみて満足度の高い枠線がつけられます。

デメリットがあるとすれば、画像の色がわずかに変わってしまうことですが、それを許容できて、なおかつデザインのトーンに相応しいのならば、選択肢の一つとして重宝するでしょう。

<span>
  <img src="image.jpg" alt="">
</span>

span {
  display: inline-block;
  position: relative;
  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, .1);
    box-sizing: border-box;
  }
}

img {
  vertical-align: top;
}