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

コーディング

画像の内容によって枠線をつけたほうがきれいに見える場合と見えない場合があります。画像一枚一枚にたいしてつけるかつけないかを決められるなら困らないのですが、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;
}

なぜ普通の border では満足できないのか? Pretty Borderが必要な理由

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

こういった状況を脱するための方法にはさまざまあると思いますが、すぐ思いつく策はこういったものでしょう。

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

どの選択をするにしても、デザインのトーンに合っていればそれでよいですが、どれもしっくりこない場合は、枠線を使うのをあきらめて、ほかのデザイン要素に同じような役割を担ってもらうことを検討する必要が出てきます。

しかしほかの要素にその役割を譲れず、どうしても枠線で表現したい場合もあります。そんなときにPretty Borderが役に立つかもしれません。

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

© 2004 - 2020 Satoshi Murata