— fixture.jp

いつの間にかYahoo UIが 2.3.0にバージョンアップしていて、CSSシリーズも今までで一番たくさんのアップデートが行われた模様。 その中で特に嬉しかったのがFonts CSSの以下のアップデート。

* Updated %-to-px conversion charted for increased accuracy
across browsers
* Move body line-height away from * wildcard selector. Now it is
part of the initial BODY rule set.
* Changed core lineheight from 1.22em to 1.231 (no units)
* Changed code,pre to not use font-property shorthand syntax
* Tweaked the sizing fix for monospace font size (pre,code…)
* Added “kbd,samp,tt” as new selectors for monospaced font stuff
* Added line-height:99% to keep monospaced font the right height

Yahoo! UI Library: Fonts CSS

色をオレンジにした2点が特に熱い！わけなんですが、内容としては「bodyのline-heigtにつけていた全称セレクタを取ったよ」、「基本line-heightを1.22emから1.231にして、単位（em）を取ったよ」ということ。以前「YUI Library CSS toolsがバージョンアップ」って記事で書いた不満点2点をやっと解消してくれました。Yahoo UI万歳！

なんか今までのReset、Fonts、Gridに加えてBaseっていうシリーズも追加されたようです。良く見ていないけど、これも便利そう。一回リセットを適用したあとに、マージンとフォント関係を統一させる感じかな？

ここ2年ぐらいで、Appleのサイトは積極的にCSSとかAJAXとか新しい技術を採り入れ始めていて、最近はCSS関連のイベントで「AppleサイトのCSSを解析する」みたいなスピーチをされた方もいるらしく、サイトの存在自体がおもしろくなってきたと思う。特に個人的にスゴイと思うのは、全体一発リニューアル！とかやらずに「少しづつ、かつ抜け目なく」新しい技術をサイトに注入して、まるで生物が進化するかのようなアップデートをしているところ。一発リニューアル！が難しい大企業系サイトとして、ここまで柔軟かつデザインドリブンな運営方法は学ぶべきところが大きいと思う。

とはいってもAppleではiPhone登場時、アップルジャパンでは新iMac登場時に、10年近く使い続けたタブデザインを新しくし、珍しく全ページに渡る更新を敢行。早速Firebugなんかで構造をチェックしていると、グローバルメニューの画像置換に、あまり見ないCSS指定を使っているのを発見。

基本的には、li要素の中にa要素、liをdisplay:inline; にして横並びにする方法なんだけど、内部のa要素に

#globalheader #globalnav li a {
    float: left;
    width: 117px;
    height: 0;
    padding-top: 38px;
    overflow: hidden;
}

みたいな指定をしてる。

まあ見てしまえば簡単だけど、なぜ今まで思いつかなかったんだろうと自戒。この手法は結構一般的なのかな？「height:0;」を思いつくかどうかが肝なんだな、きっと。。。

text-indentに大きなマイナス値を入れる方法だと、firefoxなどでクリック時にその大きさの点線が出現する（本当はa要素にoutline属性を使うか、onfocus=”this.blur();” と書けば消えるんだけど、横に2000pxとかずれてるのを想像するとなんか気持ち悪い）し、span要素などを入れ子にしてdisplay:none;する方法だとHTMLに視覚要素を一つ増やしてしまう。ということで、Apple様大変勉強になりました。

雑誌にも登場していたし、最近ブーム？のclearfixというCSSハック。clearfixっていうのは最初の人が考えた単なるクラス名なので変えてもいいんですが、肝心なのは中身。どういうものかというと、

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-table;}    /* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}  /* End hide from IE-mac */

みたいなハックだらけの長いCSSを書いて、フロートさせている要素のみを内包した要素に適用して、HTMLに一切変更を加えずclearと同様の効果を得るというもの。詳細はclearfixでGoogle検索すればいろいろわかります。

で、これと同じ効果は

overflow:hidden;

で再現できるので、僕はいつもこちらを使ってwrapperとか名前付けたdivの高さを確保しています。（Mac IEは検証すらせず無視しています）

clearfixはハックだらけな上に、要素にクラス名をひとつ増やさなきゃいけないので。。。一方、overflow:hidden;を使う場合、完全にMac IEとNetscape7の表示はあきらめなきゃいけないんですが、いまどきそんなものは無視！というスタンスの場合、おすすめです。というより、そういうスタンス自体がおすすめです。

さらに、overflow:hidden;は、モダンブラウザで要素A内にある要素Bのmargin-topが要素Aのmargin-topになってしまう表示（仕様？）や、IE6でdivがある一定以下の高さになってくれないときなどにも使えます。正しい使い方なのか不明ですが。。。　このへんの詳細についてはまたいつか書きたいと思ってます。

Yahoo UI Libraryが 0.12.0にバージョンアップしてCSS関連も若干修正された様子。

CSS Reset

hn要素にfont-weight:normal;が追加

abbr,acronym要素に border:0;が追加

CSS Fonts

*font:x- と smallの間の不要な改行の修正

CSS Grid

大幅に変更

その他

CSS reset-fonts-grids というお手軽3パックが追加。

という感じで、まあ良くなってます。ただ個人的には以前から、Fontsの一番最後、

body * {line-height:1.22em;}

という指定が理解できません。line-heightは単位なし指定が基本じゃなかったっけ。。。しかも全称セレクタを使われると継承がうまく効かなくて厄介なんですが。。。　というわけでここだけ

body {line-height:1.5;}

とかにして使っています。詳細なドキュメントがほしいところ。

■ Yahoo! User Interface Library

前回のおさらい：

#TB_overlay {
position: absolute;
z-index:100;
top: 0px;
left: 0px;
background-color:#000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}

thickbox.css

ですが、

これで世の中の99%ぐらいのブラウザ上で、半透明効果をかけられるんじゃないでしょうか。肝心なのは指定の順番かな？Validではない順に記述していくことで、長期的に使えるように。

と思ったら、結構知られているテクニックなんですね。。

■ IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック – WEBデザイン　BLOG

ネタ元では3ページに渡って詳細に実験しています。
■ Exploring Opacity – Mandarin Design

こちらを読むと、Firefoxではopacityプロパティを認識するようになったらしく、-moz-opacityは後方互換性のために残してあるだけのようです。

おまけ

■ CSS3はこうなる – GIGAZINE

全ウェブデザイナー・フラッシャー必携といっても過言ではないSWFコンテンツ埋め込みライブラリ「SWFObject」ですが、更に便利に記述する方法が紹介されているエントリーを発見したのでまとめ。

まず、SWFObjectの利点：

1. IEのActive Content Update 問題に対応済み
2. XHTML Validな記述ができる
3. Flashプラグインのバージョン検出が可能
4. Macromedia Flashがデフォルトで吐き出すタグよりシンプル

それで、欠点は一つもないです。Adobeのサイトでも使用されている様子。というかそれならAdobeはAC_RunActiveContentとかやってる場合じゃないんですけどね。。。

そして、発見したのは下記のエントリー。

■ BicRe: SWFObjectの便利なメソッド

本家SWFObjectドキュメントを日本語版に翻訳した超重要エントリー " SWFObjectのドキュメントを日本語に翻訳してみたよ" にも見当たらなかったんですが、SWFObjectにはgetSWFHTML()ってメソッドがあるらしく、以下

<script type=”text/javascript”><br /> var so = new SWFObject(“hoge.swf”, “text for movie”, “320″, “260″, “8″, “#FFFFFF”);<br /> document.write(so.getSWFHTML());<br /> </script>

と記述すれば一行で書けてしまいます、ということ。代替テキストを表示できなくなるというリスクはあるものの、divを少しでも減らしたい人、早く書きたい人、オススメです。これ、Googleで検索しても7件ぐらいしか出てこないんですが、どうしてなんでしょうかね？（海外だともう少し出てきます）

また、setFlash() なる関数を作ってaddVariable()メソッドと組み合わせワザで、もっと便利なものも作ったりされてて感動。

■ jQuery – New Wave Javascript

かなり今更感もありますが、jQueryの素晴らしさに気づいてしまったのでエントリー。

いろいろ調べると書いてありますが、jQueryとは、JavaScriptライブラリの元祖とも言われるprototype.jsを意識した上で、更にJavaScriptプログラミングをもっと楽しめるように、ってコンセプトで開発されました。ということです。

で、僕はJavaScriptとDOMの基礎をかじった程度の何も分からないに等しい人間だったのですが、テストページ作ってみると哲学がシンプルでビシバシ伝わってくる感じ。2分で外部HTMLロードのコードの書き方が理解できる。更にjQueryを使ってコードを書いているうちにJavaScriptに対する理解もどんどん深まっていって、ひとつの習得法として成立の予感。書籍より最初は実践ありきですね、なんでも。

ビジュアル表現は積極的に使うべきか微妙ですが、「$関数とjQueryオブジェクト」っていう概念、メソッドの連鎖、CSSへのアクセスでhashが使える、軽い、とかそこらへんがキーかな？

メソッドの内容は少なめでこれぐらいなら覚えられそうですが、一応　jQuery Map なんてprototypeチックなモノもあります。これは便利。そんで、Visual jQuery でこのマップが動く。あと以下のサイトがとりあえず国内最高のjQueryドキュメントになっているはずです。（英語の資料はたくさん出ています）

■ jQuery 開発者向けメモ

その他詳しいことは、GIGAZINEのエントリーを始めいろんなところで触れられているので略。 Google氏に聞いて下さい。

■ CSS Reboot に見るウェブデザインのトレンド : Lucky bag::blog

CSS Rebootというサイトで、今のウェブデザインのトレンドがわかるよ、というエントリー。

んで、Christian Montoya が今回の Reboot でのデザインのトレンドについて書いていたんだけど、大雑把に書き出してみると下記のような感じ。

• 1024px の幅
• Silk Icons の使用
• 暗い背景に明るい色のテキスト
• 大きめのフッタ

from Lucky bag::blog

1024px幅については、A List Apart が採用した幅 1024px のレイアウトというエントリーでも触れられています。ちょっと前に右サイドメニューを追加したmixiのトップもほぼ同じ幅。

いくつか関わっているサイトにGoogle Analyticsで簡単なアクセス解析をしているのですが、ビジターのディスプレイ解像度をチェックしてみると 1024pxは一番多く、1280px以上の人も結構多い。800×600の時代は終わったのかもしれないです。むしろ携帯端末のVGA化、フルブラウザの登場+パケット定額+TV対応、iPod向けムービーコンテンツ、YouTubeの台頭なんかで、640×480というサイズが見直されてくるのかもしれません。

それと、以前紹介した「Silk Icons」はやっぱり多用されているらしいです。背景も黒がトレンドということで、特に鏡面反射画像が映えるのはApple的解釈だと黒なのかなあ、と。。。トレンドを特に追うわけでもないですが、2006年という年を刻んでおければなあと思います。

Yahoo!（US）が提供しているJavaScriptのライブラリ「Yahoo! User Interface Library」。Flashチックなアニメーションやフォルダ等の階層ツリー表示を簡単に作成できるってことで使ったことは無いけどすごいなあと思っていたところ、5/8にバージョン「0.10.0」となってCSSのライブラリも登場。こちらは簡単で、項目も3つだけ。

1 CSS Page Grids：一番作業効率に寄与してくれるであろう、段組レイアウト用CSS。大急ぎで段組レイアウトやろうとするときはかなり助かるはず。grids.cssを外部CSSとして読み込んで(X)HTMLソースもコピペですばやく段組が作れます。ただし互換モードだと崩れるとのこと。doctype宣言に注意。それと、

Grids rely on the width of an "em" provided by Fonts CSS; that file must be included. For the sake of this document, the convenience declarations within Reset CSS are also assumed.

上記のように残り2つのCSSも同時に読み込んで使うことが推奨されています。

2 CSS Fonts：これはCSSファイル自体も便利ですが、一番素敵なのは、「フォントを"X"pxの大きさにしたかったら"Y"%を指定しなさい」という絶対指定⇔相対指定変換表。ちなみに同じ相対サイズでもem指定より%指定の方が正確性が高いとのこと。

3 CSS Reset：全要素のマージン・パディングを0にしてフォントサイズを100%にしてリスト要素を…　というやつ。これはブラウザ個別にもっているdefault CSSの微妙な差を一度リセットする常套手段ですが、人（サイト）それぞれなので参考という感じで。

Yahoo!謹製PDF版カンニングペーパーもあるようです。

ためになるエントリーが多い3ping.orgからmixiをXHTML+CSSで組みなおすというエントリー。

* テーブルで組まれたmixiのhtmlファイル容量が48KB (自分のページ調べ)
* XHTML+CSSで構成されたhtmlファイル容量が16KB

この軽量化率が他のページにも当てはまるとすれば、mixiをXHTML+CSSで書き直すだけでhtmlファイルのトラフィックを3分の1にする事が出来る。mixiの１日のPVは1000万と聞いたけど、削減される転送量は月で何テラだろう。サーバー管理費にするといくらだろう。

from 3ping.org

3分の1というのは素晴らしい。CSSのソースも非常に洗練されていて、「一通りプロパティを覚えてCSSを使えるようになった」という人は絶対目を通したほうが良いと思います。一意のdiv要素内のタグに対して、極力クラス名を割り当てないでスタイルを適用するという、「カスケーディング」の理解が深まるはず。これがCSSの本当の魅力なんだと思います。

XHTMLとCSSの詳細な構造をグラフィカルにたどれるFirefoxの拡張FireBugを使うと、より勉強になります。最新バージョンにはJSのデバッガも付いて、かなり強力なコーディングツールになってます。

* JavaScript debugger for stepping through code one line at a time
* Status bar icon shows you when there is an error in a web page
* A console that shows errors from JavaScript and CSS
* Log messages from JavaScript in your web page to the console (bye bye "alert debugging")
* An JavaScript command line (no more "javascript:" in the URL bar)
* Spy on XMLHttpRequest traffic
* Inspect HTML source, computed style, events, layout and the DOM

from Mozilla Add-ons

■ 2006/05/28追記

東京webデザイナー日記：日経平均銘柄225社サイトの脱テーブル率調査

興味深い資料です。

Dreamweaver8でCSSを書いていると、誰でも一度は「width」を入力しようとして、コードヒントのせいで「widows」プロパティというわけわかんないやつを出してしまうものです。この「コードヒント」の設定ファイルが、CodeHint.xmlで、Windowsなら　C:Program FilesMacromediaDreamweaver 8ConfigurationCodeHints　内にあります。

で、これをカスタマイズしちゃって、あんまり使わないプロパティ（アジマスか）をごっそりコメントアウト＆マージンとかの左右上下を時計回りに並べ替えたりしてしまった方を発見。さっそく使ってみたところものすごく便利。DWのコードヒントはいろいろなソフトの中でも特に秀逸なのに、さらにパワーアップです。

5/10にはDW8.0.2Updateも出ていて、こちらはIEのActiveX – Flash問題に対応していないHTMLを自動的に修正（JavaScriptを加える）してくれたりします。

■ カラクリエイト:widowsプロパティの誤入力を防ぐCodeHints.xml
■ Dreamweaver 8.0.2 Update