Ascii.jpにてさらばテーブルレイアウト！CSSビギナーの濃い1日として取り上げていただきました。
2008年11月アーカイブ
認証のため、コメントができなった方、大変失礼しました。下記の方法にてコメントできるようになっていますので、ご利用ください。
- 匿名でのログイン（captcha：暗号みたいな英数字の読み取り）
- mixiのIDでのログイン
- 「ID：guesst、パスワード：（書籍の2ページに掲載しているパスワード）」でのログイン
ご質問はこちらのエントリーでコメントとして書き込んでいただければ幸いです。
CSS Nite ビギナーズでいただいたご質問に回答します。
ご質問の内容は「同じ目的を達成する方法として、JavaScriptライブラリを利用する方法とCSSを利用する方法、両方がある場合どちらを利用すればよいのか?」というものでした。
ケースバーイケースです、とお答えしましたが、いくつかのパターンを紹介いたします。
デメリット、メリットを考慮して、どちらの手法がそのサイトに対して有効かを見極めるとよいでしょう。
デメリットの多くは「JavaScriptやCSSをOFFにした場合」、メリットの多くは「作業の効率化」が挙げられます。
続きを読む: JavaScriptを使うべきか？CSSを使うべきか？
よく使われれるid/class の命名については、120ページの「一般的なID名・クラス名から命名ルールを学ぶ」にて紹介しています。
続きを読む: id/class の命名
螺旋デザインさんが毎週更新されている「はじめてのCSS」が参考になると思います。ぜひ読んでみてください。
CSS Niteビギナーズの関連セミナーとして、下記の2つをご紹介します。
いずれもハンズオン（操作を伴う研修スタイル）で、かつ、少人数でのセミナーです。
大人数で聴講スタイルに比べると、より深い理解を得ることができるでしょう。
CSS Niteビギナーズ東京版の最後の質疑応答にて話題に上ったCSSのフレームワークについて補足いたします。
参考記事
Blueprint
参考記事
emastic
参考記事
* 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」:phpspot開発日誌
YUI Grids CSS
参考記事
IE 6には「フロートした要素にマージンを指定すると、フロート方向のマージンが倍近くに増加する」というバグが存在します。
そのため、横並びにしたふたつのボックス間のマージンが広がってしまったり、並ばずに「落ちてしまう」ことがあります。
次のふたつのような対処法がありますので、状況によって使い分けましょう。
続きを読む: フロートしたはずの要素が横並びにならない（IE 6）
ブラウザがサポートしていないセレクタを使用すると、当然、スタイルが反映されません。特にInternet Explorer（以下、IE）7と6は次のセレクタをサポートしていないため、注意が必要です。
| IE 7がサポートしていないセレクタ | IE 6がサポートしていないセレクタ |
| :focus :lang() :before :after |
:focus :lang() :before :after |
| E > F（子セレクタ） E + F（隣接セレクタ） E[attr] E[attr="value"] E[attr|="value"] E[attr~="value"] :first-child |
CSSでスタイルを設定する際には、セレクタの「詳細度」を意識することが大切です。ユニバーサルセレクタは影響せず、タイプセレクタ（要素名）よりもクラスセレクタや属性セレクタが、さらにIDセレクタが優先される、というのが詳細度のルールです（p.078）。指定したスタイルがうまく適用されない問題は、すでに指定されているスタイルの詳細度が高いことが原因になっていることが多いものです。
続きを読む: スタイルがうまく適用されない
CSS Niteビギナーズ（の内容）、および、『現場のプロから学ぶXHTML+CSS』に関するご質問などがありましたら、こちらにポストしてください。
フロートした要素の親要素の背景が表示されない（p.284）
短いページでは縦スクロールバーが表示されない（p.285）
ズーム時にレイアウト崩れが発生する（IE 7）（p.288）
フロートしたはずの要素が横並びにならない（IE 6）
ボックス間の上下マージンが指定どおりに表示されない
作例なし
heightプロパティで「100%」が適用されない
サイズ指定したボックスが勝手に広がってしまう（IE 6）
ブラウザごとにz-indexプロパティの挙動が異なる
文字がつぶれたように表示される
フォントサイズを変更したら画像がズレる（IE 6）
リストマーカーが表示されない
リストマーカーが表示されない（IE 7）
フォームパーツの不揃い感を解消したい
『現場のプロから学ぶXHTML+CSS』の誤植などはこちらのエントリーでアップデートします。
もし、お気づきの箇所がありましたら、コメントいただけると助かります。
もし、お気づきの箇所がありましたら、コメントいただけると助かります。
p.66
表内「ボーダー」
border-bottom. border-left
↓ ↓ ↓
border-bottom, border-left
「.」でなく、「,」が正しいです。
