Top / html / CSS入門

スタイルシート基礎

最も基本的なスタイルシート

<span style="color:red;">あいうえお</span>
<div style="color:red;">あいうえお</div>

spanはインライン要素(前後で改行されない)
divはブロック要素(前後で改行される)*1

しごとでも

<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はないってこと?)*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;
}

まとめると

ちょっとまとめると、次のようになる

body{font-size:10px};
指定した要素のみに適用
body h1{font-size:10px};
bodyの子要素h1のみに適用
body.aclass1{font-size:10px};
bodyのclass属性がaclass1の場合のみに適用
.aclass1{font-size:10px};
class属性がaclass1の要素すべてに適用<-いちばんよく見るか
#banner{font-size:10px};
id属性がbannerである要素に適用
Top / html / CSS入門

現在のアクセス:7101


*1 <address> や <blockquote> のように、ブラウザ表示時に前後に改行がはいるものがブロック要素、<big> や <strong> のように、前後に改行がはいらないものがインライン要素。
*2 ID属性で、ある要素に名前を付けたとき、同じHTML文書中の他の要素にその名前を付けることはできません。つまり、同名のID属性の付いた要素が同じHTML文書中に2つ以上あってはいけません。(もちろん、ID属性を付けた要素が2つあっても、それが別名(「ex-1」と「ex-2」とか)であれば間違いではありません。)

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-05-10 (木) 07:58:16 (2746d)