[書籍] スタイルシート・デザイン

・新刊『スタイルシート・デザイン』2月14日発売 | Web::Blogoscope
http://www.cybergarden.net/blog/2007/02/...

矢野りんさん、こもりまさあきさん、私（益子貴寛）の共著で、CSSの実践的なデザインテクニックを解説した、CSSをこれからはじめたい人にも、すでに一定のスキルを身につけている人にも最適な本です。

よだれが出てしまう著者陣。

以前気になっていた益子さんの「Web標準の教科書」は
正直中身がデザイン的に読みづらかったので、今回の本は
読みやすいといいなと思います。
まだ書店でみかけてません。

@ITの記事がFirefoxでグダグダな件

・［ASP.NET］XmlDataSourceコントロールでYahoo！検索ウェブサービスを利用するには？［2.0のみ、C#、VB］ − ＠IT
http://www.atmarkit.co.jp/fdotnet/dotnettips/477aspxmldatasrc/aspxmldatasrc.html

上記ページをFirefoxで見てみてください。



やけに横に長いですね。
画像も右にいっちゃってますし。


原因は、紺色の背景で示されたXMLです。
タグの行が長くなっていますね。これが突っ張り棒になって
ページが横長くなってしまいます。

IEやFirefoxは普通、半角英数字で構成された行を折り返しません。
逆に日本語だと折り返されます。これは文字の途中で折り返したときでも
意味が通じるか通じないか、という視点に立った仕様です。



では、なぜこのページはIEだと折り返されているのか。

ちゃんと調べていませんが、コード表示部のdivタグに設定されている
スタイルシート「word-break: break-all」によるものだと思います。
このプロパティはIE独自なんですよね。


Webサイトでコードを表示されるときは、overflowプロパティを使って
スクロールバー出す方がスマートなのかなぁとおもいます。

XHTML2.0は座敷がぐっと高くなりそう

・h, section要素の導入
・img要素の廃止
・XLink, XForms, XML Event, XFramesの導入
（XHTML2.0はまだ仕様自体が正式なものではありません）

XHTML1.0 strictを書くので精一杯なのに、XHTML2.0はちと座敷が高いです。
文章設計する文系の力と、拡大する仕様を理解する理系の力の両方が必要かと。
今からそんな気にする必要ないかな。とりあえず仕様はこんな方向に向かって
いるということで、とりあえず放置。

リッチクライアントに注目しているものとして気になるのはやっぱりXFormsです。

関係ないですがつい最近XForm（sはつかない）というサービスがあるのを
知ったのですが、紛らわしいです。


参考
http://www.w3.org/2002/Talks/orf2002-xhtml2/xhtml2.xml

テーブルを見やすくする方法のあれこれ

テーブルって行ごとに色が違っていると見やすいですよね。
いくつか方法があります。

（１）JavaScriptで

少し前のはてなブックマークの注目エントリでこんなのがありました。

テーブルをJavascriptで自動的に見やすくする:phpspot開発日誌
http://phpspot.org/blog/archives/2006/04/javascript_11.html

JavaScriptでtr要素を見つけ、偶数行にはそれようのCSSクラスを適用する
という方法です。
HTML上は特に細工する必要がないので、結構汎用的に使えるテクニックだと思います。

（２）サーバーサイドで
tr要素をforやforeachなどでループさせるときに、class=""　部分を出力制御する
方法。おそらく一番よくあるタイプ。


（３）[未定] CSS3でのnth-child擬似クラスで
CSS3自体がまだ正式なものでないのでどうなるかわかりません。
nth-child擬似クラスは同じ親を持つ子供の中で、何番目のかをさします。
これを利用し、
tr:nth-child(even) {background-color: white}
tr:nth-child(odd) {background-color: silver}
のようにしてやります。(参考)
つまり奇数行、偶数行という指定でCSSを定義できるようになるかもしれないのです。
これもHTML上は特に細工がいらないはずです。

IEで子供セレクタ

IEはCSSのセレクタの対応がお粗末です。DIVタグの氾濫の原因だと思います。

たとえば、ある要素を基点として子要素を指定するための「子供セレクタ」
に対応していません。

ところが、子供セレクタを擬似的に実現する方法があるようです。

Lucky bag::blog: IE でも擬似的に子供セレクタ
http://www.lucky-bag.com/archives/2005/06/simulate_child.html

子孫セレクタは対応してるので、それを応用したってところですね。
目からうろこでした。