#topicpath ---- #contents **スタイルシート基礎 ***最も基本的なスタイルシート <span style="color:red;">あいうえお</span> <div style="color:red;">あいうえお</div> spanはインライン要素(前後で改行されない)~ divはブロック要素(前後で改行される)((<address> や <blockquote> のように、ブラウザ表示時に前後に改行がはいるものがブロック要素、<big> や <strong> のように、前後に改行がはいらないものがインライン要素。)) しごとでも <span style="font-size:12px;"> <span class="brsize"> とか書いてるなぁ。 ***タグ自体にも使える <p style="color:red;">あいうえお</p> ***htmlタグの再定義 すべてのタグに、style属性を書くのはめんどくさいので、まとめて再定義できる。 <style type="text/css"> <!-- b { font-size: 18px; } --> </style> てやると、<b>タグすべてに適用される。 ***クラスの定義とスタイル指定 各タグに対して、クラスを定義して、クラスに対するスタイル指定をすることができます。 <style type="text/css"> <!-- p.red { color: red; } <-pタグにredというクラス名を定義。スタイルはcolor=redで。 p.green { color: green; } --> </style> として <p class="red">これはredクラスです。</p> <p class="green">これはgreenクラスです。</p> とする事もできます。 ***タグに依存しないクラスの定義 <style type="text/css"> <!-- .red { color: red; } <- redというクラス名を定義。スタイルはcolor=redで。 --> </style> として、どのタグにも使用できるクラスを定義することもできます。 先の例の <span class="brsize"> なんか、そうですね。 **スタイルシートちょっと応用 ***定義済みクラス aタグなどはすでに定義済みのクラスがある。そのクラス名のスタイル定義は「.」ではなく「:」を用いる。 a:link { font-size: 18px; <- aタグにすでに定義済みのクラスlinkに、スタイルを指定。 } ***ID属性 いままでクラス名にスタイル定義をしてきましたが、ID(?)に対してスタイル定義もできます。ひとつのドキュメント中に、複数の要素が同じ ID を持つことは許されません。 (ようは、一つのhtml内に、同じIDはないってこと?)((ID属性で、ある要素に名前を付けたとき、同じHTML文書中の他の要素にその名前を付けることはできません。つまり、同名のID属性の付いた要素が同じHTML文書中に2つ以上あってはいけません。(もちろん、ID属性を付けた要素が2つあっても、それが別名(「ex-1」と「ex-2」とか)であれば間違いではありません。))) #banner { <- IDの定義。 background:#69c; } として <div id="banner"> 車輪の再発明をしてます </div> とやることができる。 ***サンプル たとえば、<td class="menubar">hoge</td>に対応 td.menubar { width: 130px; vertical-align: top; border: 1px solid #cccc99; background-color: #eeeecc; } こっちは、<div id="menubar">hoge</div>に対応 div#menubar { width: 120px; margin:4px; font-size:90%; overflow:hidden; } #navi(html) SIZE(10){現在のアクセス:&counter;}