CSS Nite in Ginza (vol.27)へ行ってきた感想

久しぶりに(1年半くらいかな)CSS Niteへ行ってきました。運良く都合が合ったと事ももちろんありますが、今回予定されていたプレゼンセッションにとても興味を持ったからです。相変わらずの下手な文章ですが、感想・思った点を書いてみます。

続きを読む CSS Nite in Ginza (vol.27)へ行ってきた感想

日本語のみに別のCSS設定をする

今のデザインは、記事部分のフォント・サイズ(font-size)を14pxに。行の高さ(line-height)を1.4emに設定してあります。英文だとこれで全然問題ないのですが、やはり日本語だと行間がキツイです。そこで、記事内の日本語のみ少し大きめのline-heightを設定してみました。

TrueTypeフォント パーフェクトコレクション

TrueTypeフォント パーフェクトコレクションによれば、欧文の行間(レディング)はフォント・サイズの20%くらいでOKだそうですが、和文の場合は50%、もしくは75%くらいが適切だそうです。ちなみに、組版用語では、50%を「二分アキ」、75%を「二分四分アキ」と言うんだとか。ともかく、欧文の行間は、和文の行間よりも狭くすると言う事です。

そこで、和文のline-heightを1.7emに変更しました。一応、1.6emとか、line-heightはそのままで、フォント・サイズを小さくしたりするのも試したのですが、結局は1.7に。

続きを読む 日本語のみに別のCSS設定をする

IE7はDoubled Float-Margin Bugが修正されているのとIEハック

今回の新しいデザインを作成した際に、IE固有のバグ「IE Doubled Float-Margin Bugに悩まされました。

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

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

続きを読む IE7はDoubled Float-Margin Bugが修正されているのとIEハック

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

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

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

CSS Beauty | CSS is Worthlessより)

言語選択の表示に国旗は使うな(パート2)

(・・・パート1から続く)

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

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

続きを読む 言語選択の表示に国旗は使うな(パート2)