アーカイブ
CSSの基本
- CSSを記述する際フォーマットルールを作る
- プロパティの指定順序を固定する
- DOCTYPEスイッチの3つのモードについて
- 各ブラウザの独自プロパティの実装状況
- CSS3対応のCSSセレクタ一覧
- コーディングガイドラインを作成する
- ショートハンドプロパティを使いこなす
- id名やclass名に命名規則をつける
- YUI Reset CSSを使ってデフォルトスタイルシートをリセットする
- id名、class名は意味のある名前をつける
- 各ブラウザのCSSの実装状況
- Firefoxのデフォルトスタイルシートの見方
- ボックスモデルを理解する
- セレクタを理解する
- UIのデフォルトスタイルシートの初期化方法
- スタイル適用の優先順位を理解する
CSSの小技
- CSS3のアニメーション機能を利用してメニューを彩る
- コンテンツ量が少なくてもデザインくずれを起こさないようにフッターを固定する
- カーソルを合わせたメニューを強調する
- 基本的な縦型リストの作り方
- アクセシビリティの高いCSSロールオーバーメニュー
- IE6でもposition:fixedと同じ動作をさせる(改訂版）
- 横並びにした画像にテキストが回りこまないようにする方法
- 余白のあるメニューの特定の余白を消す方法
- first-childあるいはlast-childを使用しないでリストの罫線を消す方法
- IE6でもposition:fixedと同じ動作をさせる
- CSSでドロップダウンメニュー
- IE6でも子セレクタを使う
- ちらつきのないCSSロールオーバーメニューを作る
- floatしたボックスの親要素の内容物を表示する方法
- floatしたボックスの回り込みを解除する方法
- floatで並べたリストを中央揃えする
- 横罫線hrに画像を使用してブラウザの差異を無くす
- 画像を利用して高さの違うボックスの下辺を揃える
- 2段カラムの作り方（float編）
- 垂直marginは相殺（折りたたみ）することを考えてボックスに余白をつける
- CSSのみでロールオーバー効果のメニューを作る
- 引用部分ということがわかりやすいデザインにする
- 定義リストを横並びにする
- 基準となる文字サイズを最初に決めておく
- リンクをブロック構造にする
- テキストが含まれる要素にはline-heightを指定する
- 擬似フレームを作る
- テンプレートの背景画像は固定化する
- 外部リンクか内部リンクかを視覚的にわかるようにする
- リンクをクリックしたときに表示される破線をCSSを使って消す
- リスト(liタグ）で作ったメニューを横並びにする
- リストマークを好きな画像にする
- 行間を空けてテキストを読みやすくする
- 文字サイズの異なるテキストをかぶらないようにする
- テンプレートを左右中央寄せにする
- ドロップキャップでテキストを目立たせる
- FirefoxでもOperaでもスクロールバーを出す
- Firefoxで常にスクロールバーを出す
- テンプレートをセンタリング（中央寄せ）
- ※（注釈）をつける際はぶら下げインデントを使う
- 字下げをして可読性を上げる
ヘルプ
- IEでimgにpaddingが効かない
- CSSファイル内で日本語が文字化けする
- formタグの上や下に隙間（空白）が空いてしまう
- imgタグで指定した画像の下にわずかな隙間（空白）が空いてしまう
- letter-spacingを使用したら改行がうまくいかなくなった
