[CSS]マージンなどもemベースで設計するスタイルシート
Post on:2008年1月21日
sponsors
marginやpaddingなどのサイズ指定を全てemで行っているスタイルシートの紹介です。
font-sizeは元より、marginやpaddingなど全てemで指定を行っているため、ブラウザの拡大・縮小時にもそれらの箇所が拡大・縮小されます。
※line-heightなどは、一部単位無しの指定。
上記サイトにあるダウンロードできるスタイルシートから、下記に一部抜粋します。
naeblis.css
body{
font-size:87.5%;
/* 1em = 14px */
line-height:1.4285;
/* 20px baseline */
margin:2.85em 5.7em;
/* 40px margins */
max-width:46.4287em;
/* 650px max width */
min-width:28.571em;
/* 400px min width */
}
h1{
font-size:1.7142857143em;
/* 24px */
line-height:1.25;
/* 30px */
margin:0.83em 0;
/* 20px */
border-bottom:0;
/* 0px */
}
#header,#footer{
font-size:0.857em;
/* 12px */
line-height:1.666;
/* 20px */
}
sponsors
