拙著「実践 Web Standards Design」通称ホップ本の電子書籍版が改訂新版として10月3日に発売になりました。
MdNから9月25日に発刊された「XHTML+CSSプロが教える"本当の使い方"」へ寄稿しました。書籍で解説しているサンプルはIE6も対象にしていますが、IE6を対象外としたサンプルを当サイトで公開しておきます。
IE6 で閲覧すると全部モノクロで表示されるCSS
絶版となっていた「実践 Web Standards Design」が11月29日に技術評論社より再刊行されます。
長い子孫セレクタを改行・インデントさせることで視認性を高めるというアイデア。
2008 年 1月12日に技術評論社より刊行される「Web標準テキスト(2)CSS」を執筆しました。初心者から中級者をターゲットとして、CSSの基礎から段組レイアウトまでを分かりやすく解説している書籍です。
2 カラムと 3 カラムの段組レイアウトのフレームワークを作成したのでまとめておく。同じ段組レイアウトを float プロパティと position プロパティ、2 種類の方法で作成。
あなたが書く CSS は valid ですか？ valid であろうと心がけていますか？ そうあるべき理由って何ですか？
構造に手を加えずに float を clear させるためのいわゆる clearfix には結構色々とバリエーションがあったりするんで、自分が知っているパターンをいくつか紹介してみる。
F 要素を含む E 要素にマッチさせるセレクタってのを、オレオレ仕様で無駄に妄想してみる。
web creators 5月号の巻頭特集「プロパティ別スタイルシートデザイン帖」にちょこっとだけ書いたんで、記事で使ったサンプルを公開しておきます。
ブラウザの表示メニューなどから文字サイズを変更すると、それに追随してレイアウトの大きさも変化する elastic レイアウトのサンプルを作ってみた。
3ping.org の wu さんと hxxk.jp の真琴さんとの共著で、「実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips」という書籍の執筆をさせて頂きましたのでご紹介します
読み込み中を表すインジケータのアニメーション GIF を用意して img 要素の背景画像に指定しておけば、重たい画像の場合でもナローバンドな環境に配慮できるかもって小技。
target 疑似クラスを使って、プレゼン資料に使えるスライドショーみたいなんを作ってみた。ひとつの HTML 文書なんだけど、画面が切り替わっていくかのように見せる。
CSS3 の :target 疑似クラスを利用して、文書下部に用意した脚注を動的に表示させてみるの試み。
今使用しているブラウザが、CSS3 のセレクタにどれくらい対応しているかチェックできる CSS Selectors testsuite - CSS3 . info が便利だったんでご紹介。セレクタの対応表みたいなどを見るよりも分かることが多いかもしれない。
CSS の背景色を変えることで、色変更に対応できる透過 GIF を公開してみます。
livedoor Reader や Gmail、del.icio.us などで適用している自分のユーザースタイルシートを晒してみる。
グリッドレイアウトする際に、CSS で背景画像に指定しておけば分かりやすいかもしれない画像を作ってみた。