font-family の指定の仕方で フォームコントロールが化ける!
スタイルシート& Web制作知識とルール総まとめWeb標準の教科書CSS Zen Garden bookスタイルシートスキルアップ・デザインブック(1)スタイルシートスキルアップ・デザインブック(2) ブラウザによって標準フォントが違うのは、当ったり前ですね。でも、日本語圏の場合、明朝系のフォントで表示されるととっても読み辛いと思いませんか?そこで、CSSでゴシック系の文字を指定するために「 font-family: "Arial", "Helvetica", sans-serif 」としていました。これが、もとで、悩むことになるとも知らずに(汗)私を悩ませた font-family は、フォームを作っているときに現象として現れました。MacのIEでやられちゃった表示は、こんな感じです(↓)メ・・・メニューが・・・ズタズタですねぇ(汗)んもぉ、困ったもんですよ。これが、何が原因で現れている現象なのかわからなくて数時間悩んじゃったじゃないですか!「 font-family: "Arial", "Helvetica", sans-serif 」これの何がいけないかわかりますか?ちなみに、Mac の Netscape は OK です。Windows も IE、Opera、Firefox あたりでさらりと見たところ OK です。"Arial" も "Helvetica" もなかったら、"sans-serif" 系のフォントを拾ってきてよね!拾わないんです・・・それが・・・(ー"ー)「 font-family: "MS Pゴシック", "Osaka" sans-serif; 」これじゃないと駄目なんですよ。ニッポンジンならニッポンゴ使ってよ!ってことらしいですねぇ。ふぅ~。大体のところをカバーした、こんな(↓)風でもOKでした。あ!英文系のフォントを先に持ってきたらNGでしたのでご用心!「 font-family: "MS Pゴシック", "Osaka" , "Arial", "Helvetica" sans-serif; 」フォントファミリーさんにはやられちゃいましたよ!私は、スタイルシートを使うときにユニバーサルセレクタ(*{margin:0;}という感じでアスターを使って指定する方法)で初期設定をしちゃうのでそいつが災いしているのかと思ったのです。違った!違った!検証してみて、わかったとです!まぁ、あれです。フォームコントロール以外でこの現象は出ていないようなので大事無い!といえば大事無いかも。困ったことに出会ったら、この記事を思い出そうと、メモペッタンです!^^「はてな」にもこの現象がエントリーされていますね。 ⇒MacIEでの文字化け対策 ■font-familyを指定するときの記述(ゴシック系フォント版)フォームコントロールで困ったことにならないように、日本語系フォントを指定してあげる! font-family: "MS Pゴシック", "Osaka" sans-serif;または・・・ font-family: "MS Pゴシック", "Osaka" , "Arial", "Helvetica" sans-serif;※font-familyについては、下のアドレスが参考になりますよん♪http://www.htmq.com/style/font-family.shtml10日ぶりの書き込みとなりました。プログラムや新しいサイト作成のお仕事があったり相談事や調べもの、そのほか色々で大変忙しくしています。少しゆとりができてきたのでそろそろ年賀状のデザインを作り上げてしまわないといけませんね。最近の私は、花札にはまっているので花札の決まり手「猪鹿蝶」をメインにもってこようと思っています。もしかしたら、元旦の楽天BLOGに載せちゃうかも?^^ ・・・・・つづくWeb標準にアプローチ(サイト版) || 東京23区中心・駅近ホテルズ