CSS Tips

FC2ブログ時代に書いたものだけれど、需要があるみたいなので転載。

[Web制作板] CSS Tips コレクションで便利なCSS Tipsを発見した。他にも使えそうなTipsをブックマークしておく。

段組

Revised Image Replacement: 画像置換のさまざまな手法を比較検討する。
Using Background-Image to Replace Text: FIRという画像置換の古典的な手法を解説する。スクリーンリーダに対応していないので非推奨とのこと。

Listamatic: one list, many options
Listamatic2: nested list options: リストを使ったナビゲーションバーの作り方。ボタン型、タブ型などほとんどのパターンを網羅している。
CSSプルダウンメニュー for カスタマイズ: JavaScriptを使わないプルダウンメニュー。CSSがカスタマイズしやすいように編集されている。
Free CSS Navigation Menu Designs at exploding-boy.com
Free CSS Vertical Menu Designs at exploding-boy.com: タブメニューと垂直メニュー。

テーブルを使わないで角丸ボックスを作成する: :after擬似要素と:before擬似要素を使い丸角を実現。HTMLに追加コードは必要なく理想的な方法。IEが未対応。
ADP: 角を丸くしたいネタ (1): 横幅固定で丸角にする。HTMLは自然。
WEBFACTORY ::: BLOG: 角の丸いボックス: 画像を使って丸角にする。空のdiv要素とspan要素が二つずつ必要。
CSSで角丸を実現する: 画像を使わずに丸角を実現する試み。大量の空span要素が必要になる。
Spiffy Corners: アンチエイリアスのかかった丸角。
The Octopus Engine: JavaScriptを使いdiv要素ひとつで丸角をつくる。通称「タコエンジン」。
More Nifty Corners: 同じくJavaScriptで丸角にする。こちらは画像が不要。

Advice325　Neo’s World: img 要素に vertical-align:bottom; と border:none; を指定など、ブラウザのバグ回避法のための定石を紹介。CSSを使うなら必読。
CSSレイアウトの定石　WinIE6バグ回避法: 上に同じく、CSS使いが気をつけなければならないブラウザのバグの説明。
注意点,ブラウザ振り分け: スタイルシートを適用させるブラウザを選ぶ。重要なテクニック。
About Conditional Comments: Conditional Commentsを使うと、HTMLをValidに保ちながらIEのバージョンごとにCSSを適用させることができる。
クロスブラウザ blockquote タイトル付きバージョン: IEでもblockquote要素のcite属性をリンクとして表示するためのJavaScript。
Cross Browser Fixed Positioning: IEでposition: fixedを実現。
min-width for IE
How to Use CSS to Solve min-width Problems in Internet Explorer - WebReference.com: min-widthプロパティ未対応のIEで最低幅指定を行う。
Modified Simplified Box Model Hack: IEのボックスモデルのハック。
Mac IE 5 tests ? Right positioning: MacIEのボックスモデルのハック。

2008年5月19日