こんばんは！

 

 

最近家のお風呂のイスが壊れましたが、きっと僕の体重とは無関係だと思います。

佐藤です。

 

 

 

webデザインで線を引く時こんな怪奇現象に悩まさせたことはありませんか？

 

A「ここ線もうちょっと近付けたほうがいいすかね？」

B「え？線？」

A「はい？線です。」

B「えっ？」

A「・・・」

A「えっ？」

 

自分にしか見えない、けど確かにそこに存在するもの、、、、

それは、、、、お、ば、けでははく1px以下の線です。

 

 

 

というわけで今日は1px以下の線の再現方法をご紹介します。

 

やり方は超簡単

1pxで色の透明度を細さと同じ値にすればだいたいそれっぽくなります。

例）0.4pxの黒い線を再現したい場合

.line{
  border-top:1px solid rgba(0,0,0,0.4);
}

ちなみにこれが例の条件の線

 

そしてこれが0.4pxで指定した線

 

どう見えます？

実はこれ、0.4pxで指定した方はブラウザにより表示がことなります。

なのでこの二つとも線が同じに見える人、別々に見える人、片方しか見えない人がいます。

 

 

ブラウザによる表示のズレを防ぐために1px以下の線の再現が必要となってきます。

 

ちなみにPhotoshopでの0.4pxがだいたいこの線と同じ見栄えになります。
illustratorも古いバージョンならだいたい一緒です。

 

～～～解説～～～

 

なぜブラウザによって差が出るのかといいますと。

webには1pxが最小単位の場合が多いためです。

理科の原子みたいなものです。

 

 

そのため各ブラウザは自由に表現します。

だいたいは切り上げと四捨五入ですね。

 

ちなみに透明度の指定で表現するのはPhotoshopと同じ方法になります。アンチエイリアスと同じような理屈でしょうか？

例で作った線は単色の白背景なのであまり細く見えないかもしれませんが、背景が写真になると一気に細く見えるのでなかなか使えますよ。