A2-blog

【CSS】borderで枠線を付けると画質が悪くなる件が解決

投稿日:2019/3/2 更新:2019/3/21 コメント 0件 CSS CSS, HTML, 枠線, 画質, 縮小

画像にborderで枠線を付けると画像が縮小されて画質が悪くなりますがその時の対処法です。

 

 

そもそも

写真は背景色(白)とコントラストがあるものがほとんどなので枠線を付けなくてもいいんですが、パソコンの操作画面やエクスローラーなどをキャプチャした画像は背景(白)との境界が区別が付かないことがありそれがあまり好きではありませんでした。

ただ、下図のようにCSSのborderで枠線を付けると画像が縮小されてしまって100%サイズの画像でもわずかに縮小されてクリアな画像でなくなるんですよね。ファイル名の数字を見ると違いがよく分かると思います。

それが嫌でずっとPhotoshopのドロップレットで枠線を付けていたんですが、さすがに邪魔くさくなってきたので何かいい方法はないかなぁ～と探っていたら「Outlineプロパティ」で枠線を付ける方法があったのでやってみました。

 

 

Outlineプロパティ

Outlineプロパティは検索フォームのデザインを作成していた時に何度か触ったことはありましたがこのプロパティは上下左右の概念、つまり領域がないということなのでキャプチャ画像に枠線を表示させてみました。

「margin-left」は左のアウトラインが表示されなかったので付加させました。「gainsboro(#DCDCDC)」は色名でゲインズボロと呼びます。名称からしてオシャレなんですがこの色はずっと好きで昔からめっちゃ使っています。

.contentBox img {
     outline: 1px solid gainsboro;
     margin-left: 1px;
}

まずはborderで枠線を付けたものです。画像が枠線の1px分だけ縮むので文字などがディテールがはっきりしなくなります。

下図がoutlineで枠線を付けたものです。枠線をつけても画像が縮小されずに文字がきれいなままです。これでフォトショップでの作業から解放されます。ヽ(´▽｀)/

ただ、フォトショップで付けた既存のキャプチャ画像にはさらにOutlineが追加されるのでちょっと枠線が濃くなるのだけが気になるんですがもうこれ以上細かいことにこだわらないようにしようと思いますｗ。

 

 

outline-offset (追記)

ウィンドウサイズによって一部の枠線が表示されなくなったので修正しました。完全に我流なのであしからず。

.contentBox img {
      outline: 1px solid gainsboro;
      margin-left: 1px;
      outline-offset: -1px;
}

下図の青っぽい枠線はフォトショップで付けた枠線なんですが…。

「outline-offset:-1px」するとフォトショップで付けた1pxの枠線の上にアウトラインが表示されるようになるので結果的にキャプチャ画像の枠線を隠すことができるようです。これは怪我の功名で過去の枠線に統一感が出せて良かったです。ただ、これは画像サイズが100%で表示されているものに限るようです。