最初に指定しておくCSSをさらに修正しました。 | Tyto-Style

最初に指定しておくCSSをさらに修正しました。

| CSS, トピック

Pin It

以前に『最初に指定しておくCSS』、『最初に指定しておくCSSを修正しました。』で紹介したCSSですが、もう少し修正しました。

修正したCSSは後述しますが、少しだけ解説しますと、今回追加したのは以下の部分です。

input, textarea, select {
font-size: 1em;
}

これはInternet Explorer(IE)のバグ(?)に関するものです。

通常IEでは本文のフォントサイズに関わらず、inputやtextarea内で同じ大きさで文字が表示されてしまいます。これだと、例えば、ユーザーがメールフォームなどを入力するときに文字を通常より大きくしたり、小さくしたりしたいと考えてもできず、とても不親切です。これを上のように、1em(1文字のサイズ)に指定しておくことで、IEでも問題なく文字サイズが変更できるようになります。

ということで、以下、修正したCSSです。

/* =reset
----------------------------------*/
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,pre,form,
fieldset,legend,input,textarea,
p,blockquote,table,caption,
tbody,tfoot,thead,th,td,option{
margin:0;
padding:0;
}
table{
border-collapse:collapse;
border-spacing:0;
}
fieldset,img,
abbr,acronym{
border:0;
}
address,caption,cite,
code,dfn,th,var,
optgroup,strong,em,b,i{
font-style:normal;
font-weight:normal;
}
ol,ul{
list-style:none;
}
caption,th{
text-align:left;
}
h1,h2,h3,h4,h5,h6{
font-size:100%;
font-weight:normal;
}
q:before,q:after{
content:'';
}
a,ins,del{
text-decoration: none;
}
img{
vertical-align: bottom;
}
object,embed,th,td{
vertical-align: top;
}
input, textarea, select {
font-size: 1em;
}
/* =common
----------------------------------*/
body{
font-size: 12px;
font-family: font-family: Arial, Helvetica, Verdana, Osaka, "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
}
* html body{
font-size: 75%;
}
*+html body{
font-size: 75%;
}
html{
overflow: scroll;
overflow: -moz-scrollbars-vertical;
overflow-x: scroll;
}
.fR{float: right;}
.fL{float: left;}
.cl{clear: both;}
/* =clearfix
----------------------------------*/
.clearfix:after{
content:".";
display:block;
visibility:hidden;
height:0.1px;
font-size:0.1em;
line-height:0;
clear:both;
}
.clearfix{
display:inline-block;
}
/* MacIE begin \*/
*+html .clearfix{
height:1%;
}
* html .clearfix{
height:1%;
}
.clearfix{
display: block;
}
/* Mac IE end */

余談ですが、最近フォントサイズやフォント・ファミリーの関係で、少しもめたので書いておきますと、CSSは今のところ、フォントの扱いがとても面倒です(今後改善されていくはずです)。ユーザーのPCにインストールされていないフォントをただ単に指定しておいても、そのフォントの設定は無視されてしまいます。

また、同じ文字サイズを指定していても、font-familyが異なると、大きさが異なります(これはフォントの特徴なので、改善とかそういうことはないと思います。)。有名なところでは、WinXPなどに標準で入っている「MS P ゴシック」とWinVistaなどに入っている「メイリオ」やMacで用いられているヒラギノ系の文字は全然大きさが違います。ですから、デザイン上の関係で文字を固定してしまうのはあまりお勧めできません。

あるボックスにMS P ゴシックで横に12文字入った場合でも、メイリオやヒラギノでは11文字しか入らないということがよくあります。加えて、同じWindowsでも、IEのバージョンによっても違いがあります。

ですから、ひとつのフォントだけで確認して、12文字毎に<br />で改行したりすると、違うPCでサイトを見た時にとても読み難い文章になることがよくあります。

この間、もめた、というのは、このことを知らない人と仕事をした時、メイリオ環境でサイトを確認したら、すべて文字が1文字ずれてしまっていたんですね。

それを指摘したら、今度はフォント・ファミリーの指定を固定してしまいました。これで崩れないということですが、ユーザーはいくらでも、サイト作成者のフォント指定を無視することができます。文字サイズにしてもフォント・ファミリーにしても固定して安心することはできないんですね。

上のCSSではフォント・ファミリーを以下のように指定しています。

font-family: font-family: Arial, Helvetica, Verdana, Osaka, "メイリオ", Meiryo, "MS Pゴシック", sans-serif;

これはあくまで指標でして、私が実際に仕事でサイトを作成する時には以下のように簡略化し、必要に応じて、font-familyを指定するか、あるいは全く指定しないようにしています。

font-family: font-family: Arial, Helvetica, Verdana;

プライベートのブログとかならユーザーをある程度限定してしまってもいいと思うのですが、商用サイトや企業サイトなどを運営されている方はこの辺りも色々調整してみてくださいね。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です