NEW ENTRY
CSSを勉強するのに役立つWebサービス・サイトをご紹介します。
CSSの基礎 - ドットインストール
動画でCSSを勉強するタイプです。
CSSレイアウト実践講座
リファレンスサイトです。サンプルも豊富。
CSSの基本－HTMLクイックリファレンス
CSSの基本がわかります。その他にCSSのリファレンスもあります。
INDEX
CSSの基本
- CSSを記述する際フォーマットルールを作る
- プロパティの指定順序を固定する
- DOCTYPEスイッチの3つのモードについて
- 各ブラウザの独自プロパティの実装状況
- CSS3対応のCSSセレクタ一覧
- コーディングガイドラインを作成する
- ショートハンドプロパティを使いこなす
- id名やclass名に命名規則をつける
- YUI Reset CSSを使ってデフォルトスタイルシートをリセットする
- id名、class名は意味のある名前をつける
- 各ブラウザのCSSの実装状況
- Firefoxのデフォルトスタイルシートの見方
- ボックスモデルを理解する
- セレクタを理解する
- UIのデフォルトスタイルシートの初期化方法
- スタイル適用の優先順位を理解する
CSSの小技
- テキストと画像の縦方向を中央寄せする方法
- 画像を中央寄せにする方法
- 新着情報の日付とテキストに同一のアンカーをつける方法
- hrタグで1pxの線を引く方法
- 主要のブラウザで縦スクロールバーを出す方法
- word-breakプロパティとword-wrapプロパティの違い
- 改行をコントロールするword-wrapプロパティは主要の最新ブラウザで有効
- 決定版！？Clearfixのソースコードはここまで短くなった
- 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で常にスクロールバーを出す
- テンプレートをセンタリング（中央寄せ）
- ※（注釈）をつける際はぶら下げインデントを使う
- 字下げをして可読性を上げる
ヘルプ
- IE6でposition:absolute;bottom:0を指定した要素が消える
- IE6でborderが表示されない
- メニューをinline要素で横並びしたときに余白が空いてしまう
- IE6で、floatした要素にmarginを指定すると値が2倍になる
- リストをfloatで横並びにする際、画像の下に余白が空く
- IEでimgにpaddingが効かない
- CSSファイル内で日本語が文字化けする
- formタグの上や下に隙間（空白）が空いてしまう
- imgタグで指定した画像の下にわずかな隙間（空白）が空いてしまう
- letter-spacingを使用したら改行がうまくいかなくなった
