MdNから9月25日に発刊された「XHTML+CSSプロが教える"本当の使い方"」へ寄稿しました。書籍で解説しているサンプルはIE6も対象にしていますが、IE6を対象外としたサンプルを当サイトで公開しておきます。
IE6 で閲覧すると全部モノクロで表示されるCSS
長い子孫セレクタを改行・インデントさせることで視認性を高めるというアイデア。
2 カラムと 3 カラムの段組レイアウトのフレームワークを作成したのでまとめておく。同じ段組レイアウトを float プロパティと position プロパティ、2 種類の方法で作成。
あなたが書く CSS は valid ですか？ valid であろうと心がけていますか？ そうあるべき理由って何ですか？
構造に手を加えずに float を clear させるためのいわゆる clearfix には結構色々とバリエーションがあったりするんで、自分が知っているパターンをいくつか紹介してみる。
F 要素を含む E 要素にマッチさせるセレクタってのを、オレオレ仕様で無駄に妄想してみる。
web creators 5月号の巻頭特集「プロパティ別スタイルシートデザイン帖」にちょこっとだけ書いたんで、記事で使ったサンプルを公開しておきます。
ブラウザの表示メニューなどから文字サイズを変更すると、それに追随してレイアウトの大きさも変化する elastic レイアウトのサンプルを作ってみた。
読み込み中を表すインジケータのアニメーション GIF を用意して img 要素の背景画像に指定しておけば、重たい画像の場合でもナローバンドな環境に配慮できるかもって小技。
target 疑似クラスを使って、プレゼン資料に使えるスライドショーみたいなんを作ってみた。ひとつの HTML 文書なんだけど、画面が切り替わっていくかのように見せる。
CSS3 の :target 疑似クラスを利用して、文書下部に用意した脚注を動的に表示させてみるの試み。
今使用しているブラウザが、CSS3 のセレクタにどれくらい対応しているかチェックできる CSS Selectors testsuite - CSS3 . info が便利だったんでご紹介。セレクタの対応表みたいなどを見るよりも分かることが多いかもしれない。
CSS の背景色を変えることで、色変更に対応できる透過 GIF を公開してみます。
livedoor Reader や Gmail、del.icio.us などで適用している自分のユーザースタイルシートを晒してみる。
グリッドレイアウトする際に、CSS で背景画像に指定しておけば分かりやすいかもしれない画像を作ってみた。
CSS のメンテナンス性を高めるためのアイデアとして、カラースキームを CSS 内に記述する方法をご紹介。
今現在、有効そうだと思われる CSS ハックを自分用にまとめておく。想定ブラウザは、バージョン 6 以下の IE、IE7、それ以外のモダンブラウザ（Safari、Opera、Firefox）。
CSS3 の否定疑似クラス :not() を属性セレクタと組み合わせた使用例をご紹介。
仕様に準拠しているかチェックしてくれる Validator を盲目的に信じてしまうと、間違った知識を得る可能性がある。Validator にもバグは存在するからだ。ついでに Validator をいくつかまとめてみた。
行ボックスの高さを指定する line-height 値の単位ありと単位なしの違いについてと、単位なしで指定しておくことをお薦めする理由。
Mac OS X の Dock っぽい動きを CSS だけで実現させるってアイデア。隣接セレクタを使ってフォントのサイズを変える事で文字の拡大を再現。
公式的には Internet Explorer 7 ではバグを取り除くんで、現存する CSS ハックは使えなくなるよってことだったんだけど、早速 IE7 向けの CSS ハックが報告されている。
あらゆる言語がそうであるように、プレゼンテーション言語である CSS にも習得度の段階がある。自分が思うレベル 5 を挙げてみた。
media="print" な印刷用 CSS を用意している場合、そこに背景画像を設定していたとしても印刷されない。どうしても背景画像も印刷時に表示させたいって時のバッドノウハウ。
CSS3 で追加される Selectors （選択子）を抜き出してみた。それと CSS3 Advanced Layout Module についての雑感。
ある CSS のプロパティについて、仕様書ではどう定義されてるんだっけってな場合に、仕様書の目次から辿ってっつうのがちょっと面倒だったりするんで、各プロパティ名から W3C の CSS 仕様書の当該部分へのリンク集を作ってみた。
content プロパティを使って SS2.1 の counter による自動連番の挿入をする際、どうやら、ブラウザによっては counter のリセットを明示しなくても良いものや、リセットしないと連番にならないものがあるっぽい。
CSS だけでフォトギャラリーを実現してみる。サムネールにマウスオーバーで拡大画像を表示。サムネールクリックで拡大画像を固定。別の場所をクリックすると元に戻る。ってな挙動。
(X)HTML だけじゃなく、CSS の方でも入れ子の状態を視覚的に分かりやすくするためにインデントさせるってのは意外と思いつかなかった。
CSS を維持・管理していく上で、保守性の高い CSS を作成するにはどういったアイデアがあるだろうか。自分が意識していることをまとめてみた。
IEBlog では、IE に適用させないための各種 CSS ハックを IE7 で修正する模様。
疑似要素のコロン 2 つの表記法に対応しているブラウザをちょっと調べてみた。
定義リスト dl 内の dt と dd を CSS を使って横並びさせるいくつかの方法の完全自分用メモ。
1 未満の小数点の実数値を CSS で指定する場合って 0 を省略できちゃったりするんだけど、海外の人の方がこの指定の仕方をしているのが多い。
(X)HTML + CSS でレイアウトされているサイトを集めた CSS デザインギャラリー（ショーケース）サイトで自分が知っているものをちょっとまとめてみた。
And all that Malarkey で紹介されていた Safari に CSS を適用させないメソッド、Malarkey Safari Import Hack 略して MSIH について。
ただ色を変えるだけではなく、画像を使ってもうちっと視覚的に分かりやすくするのもありなんじゃないのかなぁって思って、ちょっとサンプルを作ってみた。
CSS によるレイアウトで躓いたことを書かれていてる「CSSの謎」で、float を使った 2 段組の可変レイアウトでの解決方法がまだ見つかっていないような感じだったので、ちょっとサンプルを作って解決方法を提示してみる。
リモートロールオーバー、つまり、離れた部分の画像をロールオーバーで変化させる動作は JavaScript を使わずに CSS だけででも実現可能。今は無くなってるっぽいんだけど、一時、adaptive path でも使われていてたやつを参考に、サンプルを作ってみた。
CSS でロールオーバーの効果を再現する際、背景画像の先読みが CSS の指定で出来るのか検証してみた。
印刷用 CSS を作成した当時に、こうした方が良いかなってな事がいくつかあったんで、何となく書き残しておく。
CSS3 では実現するであろう、background-image への複数指定。Safari 1.3 と 2.0 ではすでに対応しているらしいんで、実際に自分でも試してみたくて可変レイアウトのサンプルを作ってみた。
例えば、サイトに使用しているカラーとかが決まっていたとして、CSS で色を要素等に指定していくわけだけど、指定する値に変数が使えれば便利じゃね？ってのを実現したのが CSS-SSV 。
ボックスモデルやその他ブラウザのバグ以外で、ブラウザごとの描画結果の差異を少なくするためには、一番最初に全称セレクタを使ってブラウザのデフォルトスタイルを消してしまうのが手っ取り早い。
IE Blog によると、昨日のエントリでもいくつか紹介したバグ関連は Beta 2 で修正される模様。さらに追加でいくつかの項目をサポートすると明言している。
mezzoblue で IE 7 ベータ版の CSS 周りに関してスクリーンショットと共に報告がされている。
プログレスバーを (X)HTML と CSS で作るとしたらどんな感じかなぁって思ったんで、ちょっと作ってみた。
CSS セレクタの使用方法を分かりやすく説明しているサイトを紹介します。
CSS の em で画像のサイズを指定することで、Opera 以外のFirefox や IE などでも表示メニューから文字サイズを変更すると、文字のみならず画像も拡大・縮小できる。
@import を使って特定のブラウザに CSS を読み込ませない方法を一覧表にまとめたサイトをご紹介。
リンクに関する疑似クラス link、visited、hover、active は、記述する順番を間違えると指定通りに適用されなかったりするんで、その記述順の覚え方。
これまた使い道があるのか微妙なんだけど、要素を常に画面の垂直、水平の中央に固定して配置させてみる。ポイントは、要素の幅と高さそれぞれの半分の値をネガティブマージンで指定すること。
子供セレクタに対応していない IE でも、擬似的にある要素の直接子要素への指定を実現する方法。
JavaScript を使わずに、CSS を使ってサムネール画像の拡大画像をマウスオーバーで表示せる方法。
サイトの見栄えを CSS でレイアウトしていても、意外とフォーム周りのスタイルは作り込みされていなかったりってのは結構ある。そんな中で、「Snap Tax」のフォームは良い感じ。
PHP や CSS のカンペ（アンチョコ）を 画像で配布している ILoveJackDaniels.com だけど、どうやら PDF の配布も始めていたらしい。早速、印刷して自席のコルクボードに貼っておきましたですよ。
Joel Swanson って言うデジタルアーティストの作品で、Photoshop のインターフェースを三次元で表現している作品を見つけた。三次元と言えば、CSS のボックスモデルを立体的に表現して、ボーダーやパティングなどの関係性を分かりやすく説明しているサイトもある。
min-width に対応していない IE でも、スクリプトを使わず CSS だけで擬似的に min-width を実現するための方法。IE5.5 と IE6 に対応したパターンとIE5.01 と IE5.5 と IE6 に対応したパターンの２種類の方法がある。
ウェブ標準に準拠しているサイト制作者たちによって、5月1日に一斉にサイトのリデザインが行われた CSS Reboot ですが、サイト一覧を見ているだけで結構楽しいし、こういった試みは面白い。
今回は、:before 疑似要素を使って、テキストを画像に置換してみる。残念ながら、IE は:before 疑似要素をサポートしていないんだけど、この方法による利点は画像オフ CSS オンの状態でも問題なくテキストを表示してくれるってこと。
css-discuss が様々な3カラムレイアウトのサンプルを一覧にしたリンク集みたいなのを公開している。
複数のセレクタをカンマで区切って一括指定する際に、見やすい（見つけやすい）記述方法を見つけて、改めて自分の無知さ加減を知った今日この頃。
コンテンツの内容が少なくても、常に下部にフッタを配置させるための方法。ウィンドウを下方に広げても、フッタは常に下部に張り付いたままで、逆にウィンドウを上部に縮めていってもコンテンツ部分の所でピタッと止まり、それ以上は移動しません。
「The GIR Image Replacement Technique (GIR)」は、画像オフ CSS オンでも内容が表示される方法っぽいんで、とりあえずメモ。
CSS を最適化してくれる「Online CSS Optimiser/Optimizer」。実際にどれくらい最適化出来るのか、当サイトの CSS で試してみた。
centricle.com が纏めた、ブラウザごとの CSS フィルタリング一覧表。特定のブラウザを CSS ハックを使って弾きたい場合なんかに、この一覧表を参考にすると良いかも知れない。
「And all that Malarkey」で提案されてた、letter-spacing を使ってテキストを画像に置換するテクニック。
float させた要素を内包したボックスは、高さを指定しないと下方に伸びません。これを、clear を使わずに overflow で解決しちゃう方法。
ボックス内垂直センター配置を CSS で実現する方法。
ナビゲーションのドロップダウンメニューを JavaScript を使わずに CSS だけでやる方法。
CSS の unicode-bidi プロパティを使ったアイデア。
html 要素とbody 要素のそれぞれに背景画像を指定するちょっとした小ネタ。
CSS3 ではどういった指定が出来るのか、覚え書きとしてメモ。
Safariで自サイト確認したら、content で吐き出している２バイトが見事に文字化けしてたんで、慌てて修正。
CSS の display プロパティの使用例。
CSS signature についてのメモ。
:first-child疑似クラスと隣接セレクタの使用例。
blockquote 要素に padding を設定した際の IE のバグに関して。
CSS を使って、表（table）の見栄えを良くするための方法。
僕の中ではかなり使用頻度の高いdl 要素（定義リスト）の使用例と、CSS の適用例。
複数のスタイルシートを使用してサイトを作成していると、specificity（特異性）という法則があるのを忘れて、「あれ、指定通りになんねぇよ、ムキー！」なんて事が発生する可能性がなきにしもあらず。
:before、:after って content プロパティ使って要素の前後にイメージやら文字やらを挿入するのにスゲェ便利だと思うのになぁ、って今仕事しながら思った。
略語という意味では一緒な abbr 要素と acronym 要素。どちらを使った方が良いのか。
基本的に外部 CSS ファイルが英数字だけの記述の場合や、html 文書と同じ文字コードであれば指定の必要はないと言われたりもしますが、@charset を指定しないとネスケ 6 では誤った解釈をする場合があるようですので、記述しておいた方が良いかと思います。
pre 要素の指定によって起こる IE のバグとその解決方法。
通常、プロパティの前にアンダースコア(_)が入ると、CSS2 では定義されていないプロパティであると認識されて無視されるのですが、Win IE では読み込んでしまうバグを利用した CSS ハック。
携帯電話から投稿した際に使用される moblog.uva.ne.jp のテンプレートを変更し、記事の写真に対して CSS で回り込みの指定を行った。
ボックスモデルハックについての説明。基本的なハックですが、IE5.5などをキャッチアップできるので、使えれば重宝すると思います。
text-indent を使い、テキストを画像に置換する方法。
ヘッダの下部にナビゲーションを付けてみました。JavaScriptのロールオーバーではなく、CSSで疑似クラスのhoverを使ってスワップ効果を出してみた。
各エントリーにカテゴリ名を表示させてみた。