html/CSS入門
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
#topicpath
----
#contents
**スタイルシート基礎 [#a5bfdfb9]
***最も基本的なスタイルシート [#obcb9bee]
<span style="color:red;">あいうえお</span>
<div style="color:red;">あいうえお</div>
spanはインライン要素(前後で改行されない)~
divはブロック要素(前後で改行される)((<address> や <blockq...
しごとでも
<span style="font-size:12px;">
<span class="brsize">
とか書いてるなぁ。
***タグ自体にも使える [#i713de86]
<p style="color:red;">あいうえお</p>
***htmlタグの再定義 [#f3c7843d]
すべてのタグに、style属性を書くのはめんどくさいので、まと...
<style type="text/css">
<!--
b {
font-size: 18px;
}
-->
</style>
てやると、<b>タグすべてに適用される。
***クラスの定義とスタイル指定 [#j8efeb9e]
各タグに対して、クラスを定義して、クラスに対するスタイル...
<style type="text/css">
<!--
p.red { color: red; } <-pタグにredというクラス名を定義...
p.green { color: green; }
-->
</style>
として
<p class="red">これはredクラスです。</p>
<p class="green">これはgreenクラスです。</p>
とする事もできます。
***タグに依存しないクラスの定義 [#i2ac2d23]
<style type="text/css">
<!--
.red { color: red; } <- redというクラス名を定義。スタ...
-->
</style>
として、どのタグにも使用できるクラスを定義することもでき...
先の例の
<span class="brsize">
なんか、そうですね。
**スタイルシートちょっと応用 [#uaa32c4e]
***定義済みクラス [#lccc0913]
aタグなどはすでに定義済みのクラスがある。そのクラス名のス...
a:link {
font-size: 18px; <- aタグにすでに定義済みのクラスlinkに...
}
***ID属性 [#x7e33d50]
いままでクラス名にスタイル定義をしてきましたが、ID(?)に...
(ようは、一つのhtml内に、同じIDはないってこと?)((ID属性...
#banner { <- IDの定義。
background:#69c;
}
として
<div id="banner">
車輪の再発明をしてます
</div>
とやることができる。
***サンプル [#f41c98cf]
たとえば、<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;
}
**まとめると [#fe6c3973]
ちょっとまとめると、次のようになる
: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である要素に適用
-[[CSS解説 -書き方-:http://anslasax.net/css-make/write.ht...
-[[[使える CSS テクニック]CSSを使った見栄えの良い表組み(...
-[[コーディングをさっと済ませるためのCSSテンプレート集 | ...
#topicpath
SIZE(10){現在のアクセス:&counter;}
終了行:
#topicpath
----
#contents
**スタイルシート基礎 [#a5bfdfb9]
***最も基本的なスタイルシート [#obcb9bee]
<span style="color:red;">あいうえお</span>
<div style="color:red;">あいうえお</div>
spanはインライン要素(前後で改行されない)~
divはブロック要素(前後で改行される)((<address> や <blockq...
しごとでも
<span style="font-size:12px;">
<span class="brsize">
とか書いてるなぁ。
***タグ自体にも使える [#i713de86]
<p style="color:red;">あいうえお</p>
***htmlタグの再定義 [#f3c7843d]
すべてのタグに、style属性を書くのはめんどくさいので、まと...
<style type="text/css">
<!--
b {
font-size: 18px;
}
-->
</style>
てやると、<b>タグすべてに適用される。
***クラスの定義とスタイル指定 [#j8efeb9e]
各タグに対して、クラスを定義して、クラスに対するスタイル...
<style type="text/css">
<!--
p.red { color: red; } <-pタグにredというクラス名を定義...
p.green { color: green; }
-->
</style>
として
<p class="red">これはredクラスです。</p>
<p class="green">これはgreenクラスです。</p>
とする事もできます。
***タグに依存しないクラスの定義 [#i2ac2d23]
<style type="text/css">
<!--
.red { color: red; } <- redというクラス名を定義。スタ...
-->
</style>
として、どのタグにも使用できるクラスを定義することもでき...
先の例の
<span class="brsize">
なんか、そうですね。
**スタイルシートちょっと応用 [#uaa32c4e]
***定義済みクラス [#lccc0913]
aタグなどはすでに定義済みのクラスがある。そのクラス名のス...
a:link {
font-size: 18px; <- aタグにすでに定義済みのクラスlinkに...
}
***ID属性 [#x7e33d50]
いままでクラス名にスタイル定義をしてきましたが、ID(?)に...
(ようは、一つのhtml内に、同じIDはないってこと?)((ID属性...
#banner { <- IDの定義。
background:#69c;
}
として
<div id="banner">
車輪の再発明をしてます
</div>
とやることができる。
***サンプル [#f41c98cf]
たとえば、<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;
}
**まとめると [#fe6c3973]
ちょっとまとめると、次のようになる
: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である要素に適用
-[[CSS解説 -書き方-:http://anslasax.net/css-make/write.ht...
-[[[使える CSS テクニック]CSSを使った見栄えの良い表組み(...
-[[コーディングをさっと済ませるためのCSSテンプレート集 | ...
#topicpath
SIZE(10){現在のアクセス:&counter;}
ページ名: