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

誰もが画像を罫線で囲うデザインを考えたことがあるだろう。私の場合、単にアクセントとしてつけたいと思ったこともあるし、ページ全体の統一感を出したいとか、画像が他の情報よりも重要なことを示したいと思ったこともあった。地と図の境界を明確にしたいという場合もある。

画像一枚一枚に対してつける・つけない、あるいは何をつけるかを柔軟に決めることができる余裕なり仕組みがあれば何も困ることはないのだけど、ウェブの場合は様々な制約によって、そうはいかない場合が多くある。そうして、全ての画像に一括で同じスタイルを適用することになったりする。

素朴に罫線をつけると、その種類によっては、画像のキワの色と線の色が調和しないことがあって、さて困ったということになる。経験的には、この問題は弱めの罫線を使用したいときによく起こる。

そこですぐに思いつくのがこういった策だ。

  • 画像と罫線との間に隙間を設ける
  • 罫線を太くすることで、罫線を擬似的な背景色として扱う
  • 画像に負けないように強い色(しばしば黒)にする

どの選択をするにしてもデザインのトーンに合っていればそれで良いけれど、どれもしっくりこない場合は、罫線を使うのを諦めて、背景色などの他のデザイン要素に同じような役割を担ってもらう必要が出てくるかもしれない。でも、その前に試してほしい罫線が一つある。それは私が勝手にPretty Borderと呼んでいる罫線だ。

Pretty Border

これは半透明の罫線を画像の内側に沿わせて重ねてある罫線である。現象として、画像のキワ1px分の色が変わっている様子が認識できる。そして画像のシルエットは極めてシャープだ。キワに白色がきても、黒色がきても、灰色がきても、滲んで見えることがない。総合的にみて満足度の高い罫線がつけられる。

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

<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/