« 今日は | メイン | こんなの嫌なんですが »

2004年9月13日

CSSのお勉強（その１）

　なんとなく見た目が決まったような気がするので...いや、もちろんするだけなんですが。ともかくも、それを実現させるべくHTML文書の外見を規定するもの、CSSを勉強しなおそうと思い、Cascading Style Sheets解説を読み始めました。「セレクタのグループ化」「文脈によるスタイル指定（文脈セレクタ）」なんてことができるんですね。自分の不勉強を恥じるばかりであります。
　ノートを取りましょう。

--
■記述
　CSSの記述方法は最も簡単なものであれば、下記のようになる。
　
　いわゆるタグが「セレクタ」になり、それを「宣言」の部分で修飾していると考えればよい。この「宣言」は「プロパティ」と「値」に分けられる。「プロパティ」は、そのセレクタの修飾される対象、「値」はその具体的内容となる。

■重複した場合の優先順位
　後から出てきた方が優先される、「HTML文書作成者」>「ユーザ(利用者)」>「UA(ブラウザ等)の初期値」の順に優先されるなどといった具合に、ほぼ直感的に理解できるのだが、「詳細度による優先順位」については注意が必要である。
　詳細度を求める式は下記のとおりとなる。

「詳細度」= (ID属性の数)*100 + (クラス属性の数)*10 + (要素名の数)*1

・ID属性＝要素名#ID名{宣言}という指定方法。例えばPRE#ex-1{color:red}
・クラス属性＝要素名.クラス名{宣言}という指定方法。例えばPRE.example{color:blue}・要素名＝最も普通の指定方法。例えばPRE{color:black}
　
　拮抗した場合、ID属性による1つの指定は、クラス属性10個の指定と等価ということになる。つまり一般的にはIDで指定した方が優先されるということである。

　記述については、この程度が覚えておくべきことかと思う。
　
■実際の記述に役立ちそうなサイト
・各種WebブラウザのCSS2への対応状況の一覧（ZSPC）
・CSSの実際のところ（初めてのホームページ講座）
--

　さて、現状CCでは二つのCSSの記述方法が混在しています。別ファイルとして用意し<link rel="stylesheet" href="../cc_txt.css" type="text/css">という形でリンクしているものと、直接HTMLファイルに記述しているもの、つまり
<div style="position: absolute; top: 293px; left: 10px;">
<a href="http://www.big.or.jp/~crane/soft/nowPlaying/" target="_top">
<img src="image/nowplay.png" width="217" height="87" border="0">
</a>
</div>
みたいなものです。
　これは前者に統一すべきだと思っています。また、全体の構造も変える予定ですので、divの位置も変わってしまうことになります。なのでいったんdivなどを全て削除してプレーンなHTMLファイルを作成。そのうえでデザインにあわせてdivなどを配置していくのがいいかなぁと思うのですが、おもいっきり二度手間ですね......。

　次回はCSS1 Reference（初めてのホームページ講座）をゆっくり読んでいく予定です。

投稿者 黒川鍵司 : 2004年9月13日 14:27

トラックバック

このエントリーのトラックバックURL:
http://www.ashrization.com/x/admin/mt-tb.cgi/17

コメント