サンプル用紙をいただいて、そっくり作成してほしいといわれましたが・・・
サンプル用紙には、どこかのHPの画面なのですが margin,padding,行間をそっくりに作成したいのですが・・うまくできません。
1. イラストレータで、サンプル用紙の画像を取り込みました。
2. スケールにて、文字高とか行間とかマージンをスケールしました。
3. cssにて、margin-top,margin-bottom, line-height,などを設定しましたが、作成した画面を イラストレータで取り込みスケールしましたが、文字のborder要素部分っていうんでしょうか?この部分がずれてしまっています。
たとえばですが。
<div id="header">
<P>もろもろもろを提案します。</p>
<ul>
<li>HOME</li>
<li>BACK</li>
</ul>
</div>
--css--
div#header{margin-left:23px;}
div#header p{margin-top:7px;}
div#header li{float:left;}
とりあえず、書いてみました。
わからないのは、実際のサンプル用紙をスケールした場合には、上記のような px になるのですが。
実際に作成したものをスケールすると
margin-leftが、22pxになってしまったり、
margin-topが、9pxになってしまいます。
あと、floatした場合、スケールの考え方もわかりません。
文字高や 行高 border の考え方を教えていただければと思います。
あと、イラストレータでスケールしてそのままpx入力するのは間違っているのでしょうか?
いろいろ書いてしまいましたが、よろしくご指導ください。
