- 2005-06-15 (水) 7:15
- Outside

先日某所経由で教えて頂いたのですが、特定の条件でコメント欄(textareaタグ)に日本語で書き込もうとすると文字化けしてしまうとのこと。
検証してみましたが、このBlogに限らず、以下の条件に当てはまる場合は文字化けするようです。Win環境の制作・閲覧の落とし穴デス。(mikekoさんありがとうございます。)
[条件]
Macintosh Internet Explorer5x
文字コード -> UTF8
<
textarea></textarea>に日本語入力
以下で解決策を…
解決策・FontFamilyを与える
WEBプログラミング NOW!さんによると、根本的な原因はブラウザ(MacIE5x)側にあるようです。エンドユーザー側の設定での解決方法もあるようですが、それでは皆に優しいWebではありませんので、CSSで対処します。以下のようにCSSに追記をしてあげます。(念のため、inputとselectにも同じ値を与えておきます。)
textarea,input,select{
font-family:Osaka,Verdana,Arial;
}
でもって、takech netさんによると、metaの文字コードの記述も順序が違うとMacIEでは問題があるそうなんだが、けれどもこれは「ココログ」でのお話。MTでは問題ないはず…です。
更にMacIEはmetaタグ内の文字コード認識にも問題があるらしく、
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
これだとUTF-8コードを認識せず、
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
こおすると認識するそうです。 (引用/takech.net)
応用・それをMacIEだけに読み込ませる
うちでは、CSSをMovableTypeのテンプレート機能ではなく、完全独立のファイルにして、FTP転送しています。
上記の問題もMacIEに限ったことなので、専用のCSSファイルをひとつ作り、MacIEのみに読込みさせたほうがスマートなので、import.cssをページにリンクさせて、NN4x、IE4xの除外、WinIE5(調整未着手です)、MacIE5の差分ファイルを読み込ませています。
- 今使ってるCSSファイル
-
- import.css /*インポート用->これをhtmlファイル等に読み込ませる
- global.css /*全体のレイアウト用
- entries.css /*エントリー部分用
- sidebar.css /*サイドバー用
- ie5win.css /*WinIE5用
- ie5mac.css /*MacIE5用
- 今使ってるimport.cssの中身
-
@charset "UTF-8"; /*文字コードを指定*/ @import "global.css"; /*パーツ用のCSSの読込*/ @import "entries.css"; @import "sidebar.css"; /* ///// WinIE5用の読込 ///// */ @media tty { i{content:"\\";/*" "*/}} @import 'ie5win.css'; /*";} }/* */ /* ///// MacIE5用の読込 ///// */ /*\\*//*/ @import "ie5mac.css"; /**
昨日の戯言>
ワンタンを 机にこぼし 汁の海
関連記事もどうぞ:
- コーディングコンテストひとり反省会2 (2007 年 6 月 19 日)
- 勝手に前夜祭3 iPodで歌詞を暗記パン?! (2005 年 5 月 7 日)
- お引っ越し (2004 年 5 月 9 日)
- 今日は…脱ぎます (2007 年 4 月 5 日)
- 画像alt属性の正誤チェック効率化を考えてみる (2007 年 8 月 2 日)
- Newer: DreamWeaverでMT
- Older: Gmailをオンラインストレージとして使う
Comments:2
- JUN 05-06-21 (火) 2:34
-
関係無いけど、Win版オペラだとサイドバーがサイドじゃなく下に来ます(汗)。
投票機能付いたんですね、面白いのでさっそくポチッと…(笑)。
- にん 05-06-21 (火) 15:18
-
JUNさん>
お久しぶりです~。
WinOpera、あ゛~ほんまやぁ。いつの間に…。
近々3カラム化する予定だったんですが、その前に直します~。ご報告ありがとうございました。新しいイオンにはゲーセン入ってるのかしらん♪(地元ネタ^^;)
Trackbacks:0
- Trackback URL for this entry
- http://totoco.org/blog/2005/0615-0715.php/trackback/
- Listed below are links to weblogs that reference
- MacIE5でTextAreaが文字化け from totoco.org








