CSSレイアウトでピクセルの大きさの目安を知るには

質問

CSSを独学で勉強し、WEBサイトを構築しはじめているのですが、○○ピクセルというのがどの程度の大きさなのか、もしくは適当なサイトのこの部分の幅は何ピクセルなのかを簡単に知る方法はありませんでしょうか？

Chromeを使用しているのですが、例えば、10ピクセル単位の正方形の方眼紙が表示されるようなプラグインがあれば大変有用です。

それと、全く別の質問で申し訳ないのですが、Divなどのボックスの幅をwidthで指定した場合において、margin、paddingともにその指定した幅以内に収まるという理解で正しいでしょうか？それともmargin分はwidthの外側の領域でしょうか？

ご回答よろしくお願いいたします。

回答No.2

DrFell · ベストアンサー

ピクセル定規を使われてはいかがでしょうか？

chromeのプラブインにも、独立したソフトでも、フリーであります。

私は、ピクセル定規を推しますが、10ピクセル単位の方眼壁紙は、いろいろなところで素材として公開されています。作成時に壁紙として利用すれば、ご希望には添えるかもしれません。私は、ピクセル定規を推しますが

お礼

ピクセル定規…素晴らしい。適当にプラグインをインストールしましたが、手軽でいいですね。
ありがとうございました。

回答No.1

kaisinjuku04

モニタによって、96dpiとか72dpiとかって違いがあるのはご存知ですよね？
つまり、1インチ(2.54cm)の中に何ピクセル表示するかは、デバイスによって異なるのです。

スマホやタブレットなどはdpiの値が大きいものが多くなっていますし、23インチのデスクトップPC用モニタなどは、それらと比べて値が小さくなっています。

そうは言っても、目安としての大きさを知りたい場合もあるでしょう。
あくまでご自身の使用されているモニタでの目安なら簡単です。
htmlとcssで100pxごとに大きなボックスを書けば、ブラウザで確認できます。

たとえば、
<div class="100px">
<p>100ｐｘ</p>
</div>

.100ｐｘ {
width: 100px;
height: 20px;
background-color: red;
border: solid 1px;
}
などという感じで、100ｐｘ、200ｐｘ、300ｐｘ、400ｐｘ、500ｐｘ・・・
と一つのhtmlの中に順次書けば、一覧表の出来上がりです。

上が面倒だったら、幅100px単位で帯状の画像を用意してhtmlにリンクしていくだけでいい。
帯状の画像は、画像ソフトで四角を塗りつぶして、幅だけ任意のピクセル数でリサイズすれば簡単にできますよね。

marginとpaddingについては、下記サイトがわかりやすいかな。
http://coliss.com/articles/build-websites/operation/css/901.html
要は、外側の余白がmarginで、内側の余白がpaddingってことです。
入れ子による相殺は下記に詳しくあります。
http://kojika17.com/2012/08/margin-of-css.html

お礼

なるほど、そういうやり方もあるんですね。
ありがとうございました。

Borderを境に内と外の余白というのはすぐに理解できるのですが、幅を指定した場合には外の余白まで含めての幅、という仕様なのかがよく分かりません。多分そうなんだろうな、とは感じていますが…