WEBサービスを作る際に必ず発生する作業が、UIコーディングです。
HTMLとCSSをコーディングしていく作業ですが、設計やデザイン仕様が終わった後で、コーダーが最初に行う作業と言ってもいいでしょう。
※作業手順は、案件によって様々ですが・・・
そんな時にデザイナーが作ったデータをHTMLとCSSに落とし込むコーディング作業をしていた時に、borderラインが表示されない事象があったので、原因と対策を書き記します。
デザイナーからの指定でありがちな小数点
デザイナーはとにかく見た目勝負という思考で、いかに見栄えを良くするかを目的に仕事をします。
この行為は何一つ悪いことは無く、むしろ、見た目が悪い状態で仕事を完了するデザイナーがいたとしたら、仕事をしていないと罵られてもおかしくないのですが、
デザイナーにとっては、非常に細かなピクセル数まで指定をこだわる人も存在します。
以前一緒に仕事をしたデザイナーで、「指定している仕様と1ピクセルずれて表示される」と非常に細かな指摘をしていた人を思い出しますが、全ての要素にトンボをきって、印刷した用紙にサイズや座標を記述してあり、それをコーディングしていたコーダ担当者がうんざりしていたのを思い出しました。
おそらくそのデザイナーは、macのsafariブラウザでしかチェックしてなかったっぽいですが、windowsのIEで見てもっとショックを受けてもらったほうが良かったのかもしれませんねwww
WEBブラウザ毎に1ピクセルも誤差を無くすようにコーディングすることは、可能ですが、ブラウザ特性を理解して座標固定と、座標可変の柔軟なデザインを作れるデザイナーの方がWEBデザイナーとしては、優秀であると考えられます。
そして、そうしたWEBの事をあまり知らないデザイナーは、座標指定で70.5pxとか、10.3pxなどのような、小数点指定をしてくるケースが少なくありません。
ピクセルとドットの違い
もちろん、CSSの仕様で小数点での座標やサイズ指定はできる仕様になっていますが、px（ピクセル）に対しての小数点というのは、実は矛盾しているという事を知らなければいけません。
CSSで作業をしているとpx（ピクセル）を指定する事が多々あると思います。
また、パソコン上に表示されるドットという単位はcssではあまり使わないですが、一体ピクセルとドットって何がどのように違うのでしょう？
http://webgaku.hateblo.jp/entry/20120409/1333941753
こちらのサイトに違いについて説明してくれていますが、
「ピクセル」
・コンピュータで画像を扱うときの、色情報(色調や階調)を持つ最小単位、最小要素
・画素とも呼ばれる
「ドット」
・ディスプレイやプリンタで文字や画像を構成する物理的な最小単位
非常に紛らわしい２つですが、どちらも最小単位という事が理解できます。
ドットは表示に関する事でピクセルは要素に関する事という事が違いなようですが、話す時に使う場合には同じ意味で使っても問題なさそうです。
ここで気がついたのは、最小単位という事で、その単位に小数点があるのがどうかという点です。
パソコンのモニタで表示できる1ドットが1ピクセルだとすると、0.5ピクセルって、パソコンではどのように表示されるかを考えればなんとなく矛盾しているということに気がつくと思います。
最近ではRetinaディスプレイや4kテレビなどという画素数が化物のような端末も増えてきているので、1ドットに数ピクセル存在するケースも少なくないようですが、そちらを基準に考えてしまうと、Retinaではないディスプレイでの見栄えを除外してしまうようなものです。
どちらかというと、仕様を考える場合は、"1dot=1pixel"という考えで行ったほうが後々にトラブルは少なくなると考えられます。
スクロールバーとの相性
実際、どのような不具合が発生するのかというと、とあるリスト表示をする要素でborderラインを表示する際に、macのcheomeブラウザで表示させた時に、小数点指定のラインが潰れてしまうという事象を見つけました。
<DOCTYPE html>
<html>
<head>
<style>
.line_05{
display:block;
width:100px;
height:100px;
margin:10px;
padding:10px;
border:0.5px solid red;
overflow:auto;
}
.line_1{
display:block;
width:100px;
height:100px;
margin:10px;
padding:10px;
border:1px solid red;
overflow:auto;
}
</style>
</head>
<body>
<h1>CSS - Trouble : Border - lLine</h1>
<div class="line_05">
aaaaaaaaaaaaa<br>
bbb<br>
ccc<br>
ddd<br>
eee<br>
fff<br>
ggg
</div>
<div class="line_1">
aaaaaaaaaaaaaaaa<br>
bbb<br>
ccc<br>
ddd<br>
eee<br>
fff<br>
ggg
</div>
</body>
</html>
上記のソースコードをMacのChromeブラウザで表示したキャプチャがこちらです。
上側が"border:0.5px sollid red;"で下が"border:1px sollid red;"です。
そして、MacのSafariブラウザでは以下のレンダリング表示
さらに、Firefox(Mac)
最後に、Opera(Mac)
いがでしょうか？Firefox以外は、線が途切れているのが分かります。
そして、線幅はどれも同じで、濃度が調整されているだけというのがディスプレイレンダリングの限界なのでしょう。
これを考えると、borderラインのpxに対して、小数点で指定することは全くの無駄であることが分かります。
デザイナーがどんなに拘ってデザインしても、レンダリング結果では無駄になってしまうことも多いという事を知らないデザイナーは、WEB業界では痛い思いをするかもしれませんね・・・
ちなみに、似たような仕様で、ページ全体を2倍のサイズで作って、bodタグに"transform:scale(0.5);"という風にしている企業サイトが一時期たくさんありましたが、表示クオリティを高くすることができると考えたエンジニアがやっていたのだと思いますが、色々なAPIツールを使った誤作動が多発していたようですね。
今一度シンプルな構造体でプレーンなCSSを学習したほうがいいかもしれません。
0 件のコメント:
コメントを投稿