ID:ZGavQda8pdr. さんの質問

2,474 views

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

登録日:2013-06-27 · カテゴリー:HTML・CSS

みんなの回答 11 件

2013-06-27 · トピ主 報告

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

2013-06-27 · ID:IAjvwaKs0Swc 報告

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

2013-06-27 · トピ主 報告

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

2013-06-27 · ID:EgsyoWDYusGW 報告

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

2013-06-27 · トピ主 報告

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

2013-06-27 · ID:8pwDISYRzGTR 報告

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

2013-06-27 · トピ主 報告

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

2013-06-27 · ID:xxl45zJdjIBs 報告

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

2013-06-27 · コメ主 報告

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

2013-06-27 · トピ主 報告

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

2013-06-27 · トピ主 報告

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

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

http://okwave.jp/qa/q7988606.html
2013-06-27 · ID:8pwDISYRzGTR 報告

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

2013-06-27 · トピ主 報告

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

2013-06-27 · ID:pE7t5iaYnKZh 報告

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

2013-06-27 · トピ主 報告

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

2013-06-27 · ID:NittR61Y5Z.6 報告

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

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

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

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

2013-06-27 · トピ主 報告

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

2013-06-27 · ID:hFFo/rnwCOh3 報告

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

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

2013-06-27 · ID:R3Fd.I2.NQQs 報告

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

2013-07-01 · ID:oQZ6HhfmbIvt 報告

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

回答の受付は終了しました。

関連トピック