W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

ID:ZGavQd さんの質問

細かいpx数値指定付きのPSDで渡されたデザインファイルを元にコーディングしているのですが、初めてのことなので余白の取扱いが分からず困っています。
例えば、ある<p>タグのテキストからボックスの右端までの距離が20pxと指定してある場合、padding-right:20px;とか指定すればいいと思ってしまうんですが、実際は、テキストによっていは右側に1~5pxほどの余白ができて、そこから20pxなので、20pxと指定してもパッと見の余白としては21~25pxになってしまうと思うので、padding-right:15~19px;とかにしないといけないんじゃないか、、、という、この考え方はおかしいでしょうか?そんなことしてたらキリがないだろうとは思うのですが...

みんなの回答 11 件

ID:ZGavQd さんの回答

トピ主です。同様にline-heightによっても、実際の上下の余白が変わってくると思うのですが、このあたり皆さんどういう考え方でコーディングしてるんでしょうか???

ID:IAjvwa さんの回答

そのPSDデータを作ったデザイナーに確認すればいいじゃないの。
ここで他人の意見聞くより早いし、間違いが無いと思うんだけど?

ID:ZGavQd

初めての仕事なので、そんなことを聞いてしまっていいものか、ド素人すぎる質問なのではないか、信用を落とすのではないか、という不安があり、まずここでお尋ねしました。
他社デザイナーのため、ちょっとしたことは確認しづらい状況です。

ID:EgsyoW さんの回答

指定はこの数値だけど見た目が違うのでこの数値にしました、って提出されると問題が大きいと思う。あとで修正が返ってくるなという前提で数値通りやるか、あらかじめデザイナーに確認するべきだと思う。他社デザイナーだからこそホウレンソウは大事だと思うよ。

ID:ZGavQd

回答ありがとうございます。そうですね、特に私が心配していたようなことはないようですので、確認した方が良いですね。

ID:8pwDIS さんの回答

指定通り20pxでとっておけば大丈夫ですよ。そんな紙媒体じゃないんだから、デバイスフォントの部分でそこまでこだわる必要はないよ。

ID:ZGavQd

なるほど、そんな風に考えてもいいんですね。回答ありがとうございます。

ID:xxl45z さんの回答

上の人の書いてる通り、css上は指定された通りにすればいいです。綺麗に20pxのスペース持たせるなら、text-justifyかましてもOK。これはデザイナーに確認したほうがいいですけどね。

ID:xxl45z

失敬、text-align : justify; です。

ID:ZGavQd

text-align : justify;まで考えがおよびませんでした。厳密にする場合はそういった方法もあるんですね。ありがとうございます。

ID:ZGavQd さんの回答

縦方向の余白については皆さんどのように考えていますか?
line-heightの影響を受けると思うのですが、このQAのように、その分わざわざネガティブマージンで相殺したりしているのでしょうか???

line-height指定で発生する余白の対応 | Webデザイン・CSSのQ&A【OKWave】

http://okwave.jp/qa/q7988606.html
ID:8pwDIS

わざわざネガティブマージンを使ってまで対応する必要はないかと。Web本来の仕様と割り切っちゃって問題ないと思うけど。というか、もっと他にチカラを入れるべき部分があるんじゃないの?

ID:ZGavQd

割りきってしまっても問題ないんですね。確かに、ここに時間を割くより他に使ったほうが良いと私も思います。回答ありがとうございます。

ID:pE7t5i さんの回答

考えすぎなんじゃない?
ブラウザによっても文字の余白は違うんだし、細かく指定したからと言って全てを統一することは不可能だと思う
普通に20px取っておけばokでしょ

ID:ZGavQd

左右に関しては、普通に20pxとっておけばOKという意見が多く安心しました。ありがとうございます。

ID:NittR6 さんの回答

line-heightの関係で余白はかわりますね。

誤差が1px程度なら問題ないですが、5pxもかわるとなると問題です。

質問者様がおっしゃっている通り、padding-right:15~19pxのように調整してあげるべきです。

結果としてあがっているデザインと同じものにすればOKだと思います。

ID:ZGavQd

誤差が大きい時のみ別途対応、というやり方がバランスよさそうですね。回答ありがとうございます。

ID:hFFo/r さんの回答

設計では右側に20pxとしましたが、デバイス毎のフォント種や文字長の違いによって、必ずしもそうはならないケースがあります。また、行高についても同様です。

と、事実をそのまま伝えればよいと思います。
webを理解しているデザイナであれば、十分な説明です。
表示を操作しているのは、デザイナではなく、ブラウザの仕様なのですから。

ID:R3Fd.I さんの回答

テキトーでいいんだよそんなもん。
気楽にやろうぜ

ID:oQZ6Hh さんの回答

デザインの勉強するとどこに比重を置いてコーディングすればわかるようになるよ。デザインに含まれてる意図もわかるようになるし。
自分の成長にもなるしおすすめ。

最終更新日:2013-07-01 (2,587 views)

関連するトピックス

ページ上部に戻る