このバグは、floatするとmarginが２倍となる、IEのみの原因不明バグ。今回でのデザインでもそうだったし、おそらく一番起こりやすいケースが、divをfloat: leftで回り込ませて、同じdivにmargin-left: 20pxと同じ左方向へマージンを指定するケース。20pxがなぜか２倍の40pxに表示されてしまう。Waviaeiのフッタのように、複数のdivを全てfloat: leftさせると、一番左端のdivのマージンが２倍になる。

解決方法はpositioniseverything.netで示されているように、display: inlineを指定するか、CSSプロフェッショナル・スタイルのp.248に書かれている、マージンの代わりにパディングで指定する。

IE7

今回この「IE Doubled Float-Margin Bug」はIE7では修正せれているみたいだ。少なくともbeta2の段階で、Waviaeiのデザインを試した限りでは問題なかった。

このバグを含め、他にIEに悩まさせれたのは２つ。１つはアイコン画像の透明部分がPNG24の為、表示がおかしくなる問題。IE7ではサポートされているけど、IE6以前ではサポートされていない事は分かっていた。PNG8でも試したけれど、アイコンの画質が落ちすぎるので諦めた。もう１つは、liにlist-style-position: insideと一括指定した上で、後でlist-style: noneと指定しても、list-style-position: insideが適用されたままになる。

この２つの解決方法は簡単。せっかくなので、IE7ハックを調べてみる。参考にしたのはLucky bag::blog: IE7 を含むモダンブラウザ向けの CSS ハックまとめと、Stylesheet Stylebook：IE用CSSの指定方法。

IE用のCSSファイルを用意して、問題のある箇所をバージョン6以下のIEにのみに適用するハックを使って、修正の為のCSSを記述。* html bodyを使用。

IEのみにこのCSSファイルを読み込ませるには、「Conditional Comments」を利用する。これはハックではなく、マイクロソフトがIEに組み込んだ機能。

[css]
<!–[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" mce_href="ie.css" /><![endif]–>
[/css]

このようにヘッダに記述すると、IEでのみie.cssが読み込まれるようになる。このときに、後で指定されたCSSは先のそれを上書きする仕様を忘れないように注意。つまり、読み込ませるCSSファイルのリストの一番最後にこれを記述する。WordPressだったら、style.cssへのリンクの後になる。この「Conditional Comments」については、MSDNに詳細な記事がある。英語が苦手な方は、古いけどこの記事が分かりやすい。

CSS does not make a site accessible. CSS does not make your site rank higher in search engines. Good CSS does not make you an elite web programmer. I don’t code CSS. CSS is misunderstood.

訳すと、「CSSはサイトをアクセシブルにはしない。CSSはサイトをサーチエンジンに最適化しない。良いCSSが書けても、優れたウェブ・プログラマにはなれない。私はCSSのコーディングはしない。CSSは誤解されている。」

題名の「ＣＳＳに価値は無い」と共にセンセーショナルな見出しと始まりですが、要するにCSSよりもHTMLの方が重要だと Mike Stenhouse 氏は書いてます。CSSを用いるのは、セマンティックなHTMLを書いているから。そのセマンティックなHTMLの見た目を整える為にCSSを用いている。

ふと思った。世界一のインターネット環境が整っている日本。でもなかなかテーブルレイアウトを抜け出せない事も含め、セマンティックな方向に進まない。セマンティック・ウェブの可能性を自ら閉じているようにおもえるのだが・・・。世界一に環境がもったいない。

（セマンティック・ウェブについてはメタ情報とセマンティック・ウェブが詳しいです。）

（CSS Beauty | CSS is Worthlessより）

ではどのようにするのが一番よいのか？

Technique 15: Using hreflang with CSS のやり方が W3C で書かれています。しかし先日、と言っても１ヶ月ほど前ですが、456 Berea Street に書かれた Indicating language choice: flags, text, both, neither? （言語選択の表示：　旗、テキスト、両方、別の方法？）と言う記事の方が面白い。コメントも沢山書かれていて、読んでいてすごく興味深いので、ちょっとそちらの方をまとめてみます。

記事を書いた Roger Johansson 氏が出した案は以下の４つ：

1. その言語にもっとも近いと認識されている国の国旗
2. 選択肢の言語で書かれたテキストに続き、現在のページで使用されている言語でもテキストで表示
3. その言語にもっとも近いと認識されている国の国旗と、現在のページで使用されている言語でのテキスト表示
4. 中立的な旗と、選択肢の言語で書かれたテキスト

彼は２番目のやり方が一番良いのでは、との考えを示しています。つまり例えば、英語のページで日本語の選択肢を表示するのであれば、「日本語 (Japanese)」のようにです。まず、１つ目の旗のみと言うのはＮＧ。３つ目の旗＋テキストは一見グッド・アイデアなんですが、非常にややこしい。例えば南アフリカの国旗の横に English は、国を指しているのか言語を指しているのか混乱を招くおそれがある。４つ目の中立的な旗も、何をもって中立と判断するのかが難しい。例えば、Mac OS X は「International」の設定アイコンに国連のシンボルを使っているが、世界の国々がすべて国連に加盟しているわけではない。ほかに地球儀のアイコンも、どこにフォーカスしているかには気を付けなくては行けない。アメリカ大陸が中心に描かれた物が一般的だが、世界的には標準ではない。

ちなみに、ブラウザの言語設定を自動判別させてそれに伴う言語を強制的に表示させるのは良くないとされています。これは、ブラウザの言語設定が必ずしもそのユーザがそのサイト・ページで観覧したい言語とは限らないからです。もしそのような仕組みにするのであれば、設定を変更できるオプションやリンクを表示すべき。例えばグーグル。

熱い議論

この記事を書いている現在、６５通のコメントが寄せられ、色々な意見、経験、それぞれの国での状況など、読んでいるだけで面白い。以下にコメントとして寄せられた意見をいくつかピックアップしてみました。

• （[ja]等の）言語コードはギークにしか分からない。多くの一般ユーザは自分の言語の言語コードさえも知らない。
• ウェブサイトにアクセスするユーザ層によって変わってくる。
• 北アメリカ全体をターゲットとしたサイトであれば、フランス語と表示するのにフランス国旗、もしくはケベック州旗を用いても問題ないかもしれないが、カナダのみをターゲットとするのであればそれは良くないアイデアだ。
• （スイスのウェブデザイナー）スイスでは４つの言語がある（フランス語、イタリア語、ローマ語、ドイツ語）。言語表示にテキストを用いるのは大賛成だ。旗、例えばフランス国旗、を用いるとユーザを侮辱しかねない。
• 国旗＝言語、は主にヨーロッパでの用いられ方だと思う。北アメリカではローカライズされたヴァージョンを示す事が多い。特に通貨の違いの為に、ローカライズされたヴァージョンを作成する事が多い。
• 自分はユニオン・ジャックを見たとき、言語（英語）のみならず、コンテンツの内容も英国向けの物だと思う。
• 違う言語なのに、URLが同じなのは許せない。
• 通常はその言語で書かれたフル・テキストを用い、スペースが足りない場合のみ言語コードを使用する。
• 違う言語ヴァージョンのページを作成したならば、一部のみではなく、すべてのコンテンツでそうすべきだ
• クライアントの強い希望で有れば国旗を使用してきたが、いかなる時でもテキスト表示の方が良いと勧めてきた
• 地球儀のアイコンは、インターネット上で使うにはあまりにもゆらぎが有りすぎる。言語のシンボルを作るべき。何か良い案は？
• ヨーロッパ連合のサイトは、それぞれの言語で書かれたドロップダウン・メニューを使用している。（EUROPA – Gateway to the European Unionの右上の方）
• 例えば英語で書かれたページが有るとする。幾つかある段落の一番最後にフランス語で「en français」（注：フランス語と言う意味）と書くとユーザはどのように思うだろうか？そこまでが英語だったので、フランス語について英語で書かれたページだと思うかもしれない。かたやフランス語圏の人は、フランス語版へのリンクを探すのにわざわざページの下までスクロールするだろうか？
• 英語と示すのにユニオン・ジャックを使うので有れば、コンテンツはアメリカ英語ではなく、イギリス英語で統一して書くべきだ。
• （カナダから）フランス語圏のユーザーでも、英語版とフランス語版があれば英語版の方を観覧したいと言う人の方が多い。なぜなら英語版の方が先に最新の情報に更新される事の方が多いからだ。最悪の場合、英語版しか更新されない場合もある。また、フランス語版にはよく誤訳が多い事も英語版を選ぶ大きな理由の一つだ。
• ドロップダウンの言語セレクタは気を付けた方が良い。「Choose language」（言語選択）と書かれていても、英語が分からなければ言語を選択できると分からない。
• みんな何かの方程式をもとめているようだけど、私の思うところこれ（言語表示）に関する完璧な方程式などはない。

国旗を言語ではなくローカライズ版と認識するユーザがいる可能性は思いつきませんでした。

まとめ

456bereastreet の記事とコメントとW3C Internationalization のワーキング・ドラフト

やはり完璧な方程式やパターンは無いのが現状でしょう。それぞれケース・バイ・ケースで対処していかなければいけない。しかし、全体的にみて一番無難なのはW3C のドラフトでも書かれている「それぞれの言語で書かれたテキスト表示」のようだ。もちろん、「English」「日本語」のように省略せずにフルテキストで。スペースがあり、「日本語（Japanese）」と記述できるのであれば、もっと良い。二桁の言語コードは、分からない人の方が多いと思っておいた方がよい。

では国旗は？　できたら避ける方がよい。特に国旗のみと言うのは絶対に避けるべき。なんらかの形で国旗を用いるので有れば慎重に検討を重ねたうえで使うべき。言語なのか、ローカライズ版なのか。ターゲットとしている国と地域は？　特にECサイトは注意が必要。例えば日本でECサイトをオープンさせるとする。海外からのお客様専用の英語版も作るとします。英語で書かれているのでユニオン・ジャックで案内すると、英国国内在住向けと思われるかもしれません。また、日本語版から注文する人は全員が日本国内からとは限りない。同じように、日本語に不安がある日本在住の外国人は英語版を利用したいと思うはず。コンビニ決済が日本語版からのみだと、困るかもしれません。

このように、国旗の使い方は非常に繊細で難しいと言えるとおもいます。

より良いサイトをつくるのであれば、コンテンツにも目を向けなければならない。英語版もあると言うので日本のサイトを訪れた方が、英語で書かれたページ、または翻訳されたページがほんの一部だったら非常に残念です。はっきし言ってがっかりすると思います。こういうサイト、日本に多いと思いますがどうでしょうか？

個人的にも、それぞれの言語で書かれたテキスト表示するのが現状では一番よいかと思います。それぞれの言語に応じた旗、またはシンボル的なアイコンはなくても良いと思う。と言うか、現実的ではない。それよりも、表示言語に関する項目とわかるようなアイコンがあってら便利だと思う。時計やカレンダーのアイコンは、一目見て日時に関する項目だと分かるように。皆さんはどう思いますか？

Flags represent countries, not languages. There are many countries that use the same language, and numerous countries that have more than one official language.

（国旗は国を表す旗であり、言語を表す物ではない。同じ言語を使用する国は数多く有り、また１つ以上の言語を公用語として定めている国も数多くある。）

例えば英語。これはよく英国のユニオン・ジャック、アメリカの星条旗、もしくはこの２つを半分で割って足したような旗で表されることが多いが、英語が公用語の国はほかにたくさんある。日本に近いところで、まず頭に思い浮かぶのはオーストラリアとニュージーランドだと思うけど、アジア、オセアニア、さらにアフリカ、中南米・カリブ海、と世界中に広がっていて１つ１つ国名を上げていくときりがない。

フランス語も、アフリカ諸国を中心として公用語に指定されているし、スペイン語、ポルトガル語なんかもそう（南米、中南米・カリブ海に多い）。すべてこれらの国々の植民地支配の影響ですね。

１つ以上の言語を公用語として定めている国もまた沢山あります。例えば、英国でもウェールズはウェールズ語も公用語です。その為、ウェールズでは道路標識がすべてウェールズ語と英語で書かれてあります。何かしらの公式文書も両方で書く必要があるとも聞きました。

南アフリカなんかは公用語が１１もあります。中国は公用語が中国語だと思うんですが、北京語とか広東語とか言うように分けられています。

（ちなみに、厳密に言うと公用語、国語、共通語、それぞれ意味がが違うのですがここではその辺は省略します）

ちょっと長くなりましたが、このように国旗＝言語では無いため、ウェブ上で言語選択の表示に国旗は使うべきではない、というのは実は以前から言われている事なのです。

• Why you should not use a flag as a symbol of language
• International Usability (Jakob Nielsen’s Alertbox August 1996)
• Flag Problems (Alertbox sidebar)

とは言うものの、国旗が一番認識されやすいのでは？、との見方もあるのも事実です。

ではどのようにするのが一番よいのか？

・・・

（長くなってきたので、２つの記事に分けます。パート２へ続く）