画像をきれいな罫線で囲う

だれもが画像を罫線で囲うデザインを考えたことがありますよね。

きっとそのモチベーションの裏には、単にアクセントとしてつけたいとか、ページ全体の統一感を出したいといった、グラフィック的な側面のもの。もしくは画像がほかの情報よりも重要なことを示したいとか、地と図の境界を明確にしたいといった機能的な側面のものがあると思います。

画像一枚一枚にたいしてつける・つけない、あるいは何をつけるかを柔軟に決めることができるような、余裕なり仕組みがあればなにも困ることはないのですが、ウェブの場合は様々な制約によってそうはいかないケースがたくさんあります。とくに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;
}

https://jsfiddle.net/murata_s/631wjgb9/

どうぞご利用ください。