以前作成したDelicious / Facebook / Flickr / Hatena Bookmark / Mixi /Twitter のアイコンに小さなアイコンも欲しいというリクエストがありましたので作成しました。

PNG画像 16*16px

修正した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, "ＭＳ Ｐゴシック", 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, "ＭＳ Ｐゴシック", sans-serif;

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

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

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

久しぶりにRSSアイコンも作成。RSSアイコンを作るのは四度目だったと記憶しています（確認してません）が、それぞれちょっとずつ違うはずなので。そのうちちょっと変わったものも作ってみたいです。

PNGの48*48pxで7種類作成しました。ぜひぜひブログの片隅に置いてやってください。

PNG画像 48*48px

Twitterアイコンを投稿したので、その勢いでその他のサービスのものについても作ってみました。Delicious / Facebook / Flickr / Hatena Bookmark / Mixi /Twitter のアイコンです。

フォントとか同じものを使わず、それぞれ「それっぽい」ものを使って作りましたので、著作権とかは問題ないと思うのですが（もし問題があれば教えてください）。とりあえず商用には使わないほうがいいと思います。