• 株ラボ システム開発 www.kabulab.com 

  • 株ラボ システム開発 www.kabulab.com

  • 株ラボ システム開発 twitter

CSS px(ピクセル)とem(エム) について

2013/02/12 (火) 00時11分 409 views

CSS px(ピクセル)とem(エム) について


px?: ピクセル単位の指定。環境によって変化しない絶対単位

em: 文字の高さを基準にした単位。1emは1文字分。
特にbodyなどでfont-sizeの指定がない、或は100%なら1em=16px が基準。
環境によって大きさが変化する相対単位

ブラウザーで文字のみの大きさが可変になり、emで指定したほうが良い。

px と em の関係・・・・EXCELで計算してみた

px em
9 px 0.56 %
10 px 0.63 %
11 px 0.69 %
12 px 0.75 %
13 px 0.81 %
14 px 0.88 %
15 px 0.94 %
16 px 1.00 %
17 px 1.06 %
18 px 1.13 %
19 px 1.19 %
20 px 1.25 %
21 px 1.31 %
22 px 1.38 %
23 px 1.44 %
24 px 1.50 %
25 px 1.56 %
26 px 1.63 %

body 部でfont-sizeを上記表から指定する。
CSSで文字を設定する上で、いろいろなブラウザーに対応する必要があるが、まず最初に初期値を設定してから、個別の設定するほうが良いみたいです。
文字の大きさ・行間隔・マージン・パデイングなど最初に初期設定値を登録する。
今回のブログでは以下のように設定した。
font-size : 81%;?? ?/*font-size: 13px;*/  
その他の文字の大きさは、これを基準として[em] を使用して何倍にするか設定していく。なお継承により[em]×[em]・・・・となり文字が大きくなっていく。
line-height : 150%;
※行間隔 : line-height: 150%; 単位をつけずに数値のみを指定すると、その数値にフォントのサイズを掛けた値が行の高さ
文字の大きさ20130213


以下設定した内容
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td?? ?{??? margin: 0;?? ?padding: 0;}
h1, h2, h3, h4, h5, h6?? ?{??? font-size: 100%;}
address, caption, cite, code, dfn, em, strong, th, var?? ?{??? font-style: normal;}
table?? ?{??? border-collapse: collapse;?? ?border-spacing: 0;}
caption, th?? ?{??? text-align: left;}
q:before ,q:after?? ?{??? content: ”;}/*引用符*/
object, embed?? ?{??? vertical-align: top;}/*Flashなどのプラグインを必要とする際に使用します。*/
img, abbr, acronym, fieldset?? ?{ border: 0; vertical-align: bottom;? /*縦方向の揃え位置を指定する*/}
li {??? list-style-type: none;}
a {??? text-decoration : none;}
body?? ?{
text-align?? ??? ??? ?: center;? /* IEのバグ対応*/
font-family?? ??? ??? ?: ‘MS Pゴシック’, ‘Hiragino Kaku Gothic Pro’, sans-serif;
Pro”,Osaka,”MS Pゴシック”,”MS PGothic”,Sans-Serif;*/
font-size?? ??? ??? ?: 81%;?? ?/*font-size: 13px;*/
line-height?? ??? ??? ?: 150%;
overflow-x?? ??? ??? ?: scroll;
}
#wrapper{
min-width?? ??? ??? ?: 950px;
width?? ??? ??? ??? ?: 950PX;/*auto*/
margin?? ??? ??? ??? ?: 0 auto;/* センターリング */
text-align?? ??? ??? ?: left;? /* IEのバグ対応*/
}
※IEのバグ対応は、サイトが左寄せになるバグを修正しサイト中央に表示させる。
※枠全体をセンターリングする ?? margin?? : 0 auto;/* センターリング */


設定後の確認をするために以下になることを確認して終了。
個々の場所の文字を[em]を使用して文字の大きさを決める。

H1要素

H2要素

H3要素

H4要素

H5要素
H6要素

P要素

TD要素 TD要素
TD要素(終了タグの省略) TD要素(終了タグの省略)


LINEで送る
このエントリーをはてなブックマークに追加

カテゴリー:ホームページ制作

コメントを残す



次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

« »