久しぶりに（1年半くらいかな）CSS Niteへ行ってきました。運良く都合が合ったと事ももちろんありますが、今回予定されていたプレゼンセッションにとても興味を持ったからです。相変わらずの下手な文章ですが、感想・思った点を書いてみます。
タグ: CSS
日本語のみに別のCSS設定をする
今のデザインは、記事部分のフォント・サイズ（font-size）を14pxに。行の高さ（line-height）を1.4emに設定してあります。英文だとこれで全然問題ないのですが、やはり日本語だと行間がキツイです。そこで、記事内の日本語のみ少し大きめのline-heightを設定してみました。
TrueTypeフォント パーフェクトコレクションによれば、欧文の行間（レディング）はフォント・サイズの２０％くらいでOKだそうですが、和文の場合は５０％、もしくは７５％くらいが適切だそうです。ちなみに、組版用語では、５０％を「二分アキ」、７５％を「二分四分アキ」と言うんだとか。ともかく、欧文の行間は、和文の行間よりも狭くすると言う事です。
そこで、和文のline-heightを1.7emに変更しました。一応、1.6emとか、line-heightはそのままで、フォント・サイズを小さくしたりするのも試したのですが、結局は1.7に。
IE７はDoubled Float-Margin Bugが修正されているのとIEハック
今回の新しいデザインを作成した際に、IE固有のバグ「IE Doubled Float-Margin Bugに悩まされました。
このバグは、floatするとmarginが２倍となる、IEのみの原因不明バグ。今回でのデザインでもそうだったし、おそらく一番起こりやすいケースが、divをfloat: leftで回り込ませて、同じdivにmargin-left: 20pxと同じ左方向へマージンを指定するケース。20pxがなぜか２倍の40pxに表示されてしまう。Waviaeiのフッタのように、複数のdivを全てfloat: leftさせると、一番左端のdivのマージンが２倍になる。
解決方法はpositioniseverything.netで示されているように、display: inlineを指定するか、CSSプロフェッショナル・スタイルのp.248に書かれている、マージンの代わりにパディングで指定する。
CSSよりもHTMLの方が大事
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を用いている。
ふと思った。世界一のインターネット環境が整っている日本。でもなかなかテーブルレイアウトを抜け出せない事も含め、セマンティックな方向に進まない。セマンティック・ウェブの可能性を自ら閉じているようにおもえるのだが・・・。世界一に環境がもったいない。
（セマンティック・ウェブについてはメタ情報とセマンティック・ウェブが詳しいです。）
言語選択の表示に国旗は使うな（パート２）
（・・・パート１から続く）
ではどのようにするのが一番よいのか？
Technique 15: Using hreflang with CSS のやり方が W3C で書かれています。しかし先日、と言っても１ヶ月ほど前ですが、456 Berea Street に書かれた Indicating language choice: flags, text, both, neither? （言語選択の表示： 旗、テキスト、両方、別の方法？）と言う記事の方が面白い。コメントも沢山書かれていて、読んでいてすごく興味深いので、ちょっとそちらの方をまとめてみます。
言語選択の表示に国旗は使うな（パート１）
ブログなどでもよく国旗を言語選択の表示に使うとをよく見かけます。しかしこれは「Authoring Techniques for XHTML & HTML Internationalization: Specifying the language of content 1.0」： Technique 16: Don’t use flags to indicate languages でも書かれている通り、良い方法では有りません。理由は Technique 16 のディスカッションに書かれている説明が非常にわかりやすいです。
Flags represent countries, not languages. There are many countries that use the same language, and numerous countries that have more than one official language.
（国旗は国を表す旗であり、言語を表す物ではない。同じ言語を使用する国は数多く有り、また１つ以上の言語を公用語として定めている国も数多くある。）
CSS Reboot 2006
CSS Reboot Spring 2006 は、５月１日に皆で一斉にリ・デザインしようと言うイベントで、去年も行われ今年は２回目だそうです。僕が知ったのは２日ほど前ですが・・・。目にとまったサイトとか、気になったサイトを幾つかピックアップしてみました。Waviaei のデザインも僕の中ではヴァージョン０．５くらいなので、色々と参考にしたいと思います。
CSS: background要素の正しい書き方
background要素に関する指定はまとめて行うことができるけど、プロパティの並び順は問われないと言うのはどうも間違いらしい。
sDSの Craig Erskine 氏によると正しい書き方、 厳密に言うと、ブラウザによって生じる問題を回避する為の書き方が有るとのこと。
よく使われるのは
[css]background: {color image position-y position-x repeat attachment}[/css]
の順だけど、これだと古いバージョンの Safari で問題がある（具体的なバージョンは不明）。正しくは
[css]background: {color image repeat attachment position-x position-y}[/css]
ポイントは２つ：
- repeat attachment position の並び順
- x そして y の順
特に、x y に関しては padding 要素や margin 要素、border 要素のプロパティの場合と違うので注意。バグの症状は、それぞれ y を x 、x を y として処理される。
ちなみにW3Cのページではこの順でリストされている。ただしリスト順が正しいとは書かれていない。
CSS Proffesional Style
There is a Japanese magazine on webdesign titled “Web Designing”. It is a monthly magazine, and the best regular article in the magazine is called “CSS Analysis”. This series of article basically focus on a much talked and well designied XHTML+CSS site every month, and as the title suggests, analyse how CSS is used. So we can learn from CSS techniques, patterns, layouts, trends, etc, from top stuff webdesign around the world (outside Japan). A bit like an in depth analysis into kind of sites thats picked up in CSS Beauty, Stylegala, etc.