苦手なCSS 。以前勉強した時よりも、規格やブラウザ対応状態などが新しくなっているかもしれないから復習しておく。
スポンサードリンク
基本的なデザイン
基本的なデザインは以下のサイトが参考になる：
wrapper はなぜ必要なのだろう？
<body>以下の全てを<div>で囲み、wrapperやcontainerという名前をつけておくケースはよくあると思います。 メリットとしては、1つのセレクタでページ全体の幅や色、配置などを一括指定できる点です。（「wrapperは必須？：CSS 3分コーディング」より引用）
さらに詳しく知るには以下が参考になる。
ヘッダー部分（#header）、コンテンツ部分（#content）、サイドバー部分（#sidebar）、フッター部分（#footer） はすべて親ボックスの#wrapperの中に包括されています。よって、ホームページ全体の横幅を変更するにはcssの#wrapper部分のwidth を変更してやります。 この時、ヘッダー部分（#header）とフッター部分（#footer）は幅指定をしていないので、今回のようにホームページ全体の横幅を変更しても、 レイアウトに及ぼす影響はありません。（「CSSレイアウト-横幅を変更するには：#wrapper | Web制作 ウェブマジック」より引用）
優先順位を確認しておく
CSSセレクタは基本的に、最後に読み込んだスタイルを適用するという仕様になっています。（「CSS初心者なら知っておきたい記述のルール | Think About Web」より引用）
そうですね。その辺を使って、すでにあるシステムの一部のCSS を上書きしたりするくらいしかしてませんので。しかし、それだけでは上手く行かず、記述する場所も重要な場面に出くわしたこともあります。それは以下の解 説を見るとよくわかります。ちなみにクイズっぽいものが２つありましたが、何れも正答を得ることはできませんでした（恥）
■ セレクタの優先順位（文章で相互関係を表したものです）ユニバーサルセレクタ ＜ タイプセレクタ ＜ 子孫セレクタ ＜ ｃｌａｓｓ ＜ ｃｌａｓｓを含む子孫セレクタ ＜ ｉｄ ＜ ｉｄを含む子孫セレクタ■ セレクタの優先順位（p要素を例に相互関係を表したものです）
* ＜ p ＜ div p ＜ .red ＜ .red p ＜ #main ＜ #main p
（「CSS初心者なら知っておきたい記述のルール | Think About Web」より引用）
!important は何だろう？
K2E Editor をCSS対応させているときに、珍しいものは初めて見るものも多くあった。
優先順位の計算方法など詳しくは以下が参考になる。
最終的なスタイル適用の優先順位は、
- !important 宣言付きユーザースタイルシート
- !important 宣言付き制作者スタイルシート
- 制作者スタイルシート
- ユーザースタイルシート
となります。
（「!important だらけの CSS にお別れを | WWW WATCH」より引用）
→ 続く
コメント