2020-10-29

【CSS】デザインで1px以下のborderが指定された時の対処法

目次

css で border に 1px 以下の値を設定できないのはご存知でしょうか。 それでも Photoshop などでは 1px 以下を設定できてしまうので、デザイナーは何も気にせず 1px 以下を設定してくることがあります。 そんな時の対処法です。(ごまかす方法とも言えるかもしれません)

border の紹介

ノーマルな border

image

画像なので環境によっては見え方が違うと思いますがこれがまず普通の 1px border です。

0.5px border

image

これが 0.5px border です。やっぱり細い。この見た目を実現したい。

錯覚で細くする(hex)

image

若干細くなる

image

たしかに 0.5px に近づいているように見える。 ただこれは#000 だから簡単なだけで、普通のカラーだったら毎回近い色を探してられません。そんな時におすすめなのが 透過設定法 です。

透過設定法(rgba で設定する)

透過設定法なんて名前は適当です。 結局これも錯覚によるものですが、この方法の良いところはどんな色のデザインを渡されても、何も考えずに設定できるところです。 方法は簡単。border の幅の数値をアルファ値に入れるだけ!

image

一緒!!!!もう一緒!!!もちろん前回の 16 進数(Hex)8 桁で設定しても構いません。 これでもう 1px 以下の border にも困りませんね(*´∀ `)