螺旋デザインさんが毎週更新されている「はじめてのCSS」が参考になると思います。ぜひ読んでみてください。
]]>ご質問はこちらのエントリーでコメントとして書き込んでいただければ幸いです。
]]>ご質問の内容は「同じ目的を達成する方法として、JavaScriptライブラリを利用する方法とCSSを利用する方法、両方がある場合どちらを利用すればよいのか?」というものでした。
ケースバーイケースです、とお答えしましたが、いくつかのパターンを紹介いたします。
デメリット、メリットを考慮して、どちらの手法がそのサイトに対して有効かを見極めるとよいでしょう。
デメリットの多くは「JavaScriptやCSSをOFFにした場合」、メリットの多くは「作業の効率化」が挙げられます。
]]> 角丸JavaScriptライブラリを利用した方法は書籍では触れておりませんので、角丸を簡単に作れる『curvyCorners』をご覧になってください。CSSを利用したサンプルはp136を参考にしてください。
この二つのケースを比較した場合、JavaScriptライブラリを利用したケースはJavaScript OFFの環境は角丸が再現されません。
CSSを利用したケースはCSSがOFFの環境では角丸が再現されませんが、これはユーザーが望んでいることですのでデメリットではないでしょう。
このケースを比較した場合、CSSのほうがメリットが大きいでしょう。
ただリキッド(横幅が可変)なボックスの角丸になってくると少し事情が変わります。
リキッドの角丸のサンプルを作成しましたので見てください。
<div class="left-top">
<div class="right-top">
<div class="left-bottom">
<div class="right-bottom">
<p>テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト</p>
</div>
</div>
</div>
</div>
4隅の角に画像を配置する為、XHTMLを複雑に配置しなくてはいけません。JavaScriptライブラリを利用すればXHTMLを複雑にすることなく角丸が再現できます。
CSS3で追加される予定のborder-radiusや、複数の背景画像の設置、などをメジャーなブラウザがサポートすれば悩まなくてもすむのですが、ひとまずはどちらが良いか見極めて利用する必要があります。
私が作成公開しているJavaScriptライブラリでフッターをウインドウの下部に固定する、footerFixed.jsがありますが、これはCSSでも再現可能です。(画面下部にフッター表示)
これはCSSを利用するほうがよいのですが、実装に手間がかかる等の考慮する事情があった場合、JavaScriptライブラリを利用するという選択肢もありでしょう。
IE6で透過pngを利用する方法としてJavaScriptライブラリのalphafilter.js[書籍 p264] などを使う方法とCSS(正確にはIEのフィルタ)を利用する方法[書籍 p290]があります。
CSSを利用する方法はW3CのCSS Validation Serviceでエラーが出る、手間がかかるなどのデメリットがあります。デメリットが気になる場合はJavaScriptライブラリを利用するという選択肢がよいでしょう。
]]>これが正解というものはありませんが、複数のサイトを制作していくような場合、可能な限り揃えていく方がミスやムダが減るでしょう。
なお、ページ全体を囲む場合にはcontainer（コンテナ）、wrapperがよく使われます。wrapperのwrapはサランラップのラップで「包む、くるむ」という意味です。
]]>
螺旋デザインさんが毎週更新されている「はじめてのCSS」が参考になると思います。ぜひ読んでみてください。
]]>いずれもハンズオン（操作を伴う研修スタイル）で、かつ、少人数でのセミナーです。
大人数で聴講スタイルに比べると、より深い理解を得ることができるでしょう。
]]>参考記事
参考記事
参考記事
* 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」:phpspot開発日誌
参考記事
]]>そのため、横並びにしたふたつのボックス間のマージンが広がってしまったり、並ばずに「落ちてしまう」ことがあります。
次のふたつのような対処法がありますので、状況によって使い分けましょう。
]]> 「display:inline」を追加する問題のある要素に「display: inline;」を追加します。CSSの仕様上、floatプロパティが「none」以外の要素は、displayプロパティの値が強制的に「block」に変換されるため、実際にdisplayプロパティの値を変更することにはならないのですが、このバグへの対策としては有効です。
div#box {
float: left;
margin-left: 20px;
display: inline; /* IE 6でのマージン広がりを回避*/
}フロートした要素そのものに対してマージンを指定することがIE 6での問題の原因なので、子要素など内側のボックスに対してマージンを指定することで回避できますことがあります。 たとえば「div#box」に対してではなく、子要素の「p」にマージンを指定します。
div#box {
float: left;
}
div#box p {
margin-left: 20px;
/* 親要素ではなく子要素にマージンを指定 */
}| 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 |
また、詳細度が同じスタイルについては、あとから記述したものが優先（上書き）されるという読み込み順序のルールも覚えておきましょう（p.079）。link要素や@importでCSSファイルを複数読み込む際も、あとから読み込んだものが優先されます。
]]>jQueryで解決する方法
]]>作例なし