「CSS/記述」の版間の差分

削除された内容追加された内容

インライン

2008年7月18日 (金) 20:25時点における版

準備

まずスタイルシートを入力する前に、

<style type="text/css">

</style>

を入力します。 HTML ファイル中にスタイルシートを書く場合は、通常、 head 要素の中（<head> から </head> までの間）にこれを置きます。この二行の間に書いた内容を、ブラウザは CSS 形式のスタイルシートとして扱います。これでスタイルシートを入力する準備ができました。

基礎

最も簡単に記述するには、HTMLタグの中に、以下のように指定します。

<p style="color:red">文字色：赤</p>

文字色：赤

ほとんどのタグで style 属性を指定できますが、既存のタグで丁度囲まれていない部分を指定したい場合は、<span> や <div> で囲んでそれに属性を指定します。

特定の HTML タグ全てにスタイルを指定したい場合は、head 要素の中でまとめて行うことができます。次の例は、全ての <p> タグに style="color:red" を指定した事になります。

<head>
：
途中略
：
<style type="text/css">
<!--
p { color:red }
-->
</style>
</head>
<body>
<p>文字色その1</p>
　：
途中略
　：
<p>文字色その2</p>
</body>

文字色その1

：

途中略

：

文字色その2

style要素に対応していないユーザエージェントの為にコメントアウトすることもあります。

@@ 2 行 / 2 行 @@
 まずスタイルシートを入力する前に、
+<source lang="html4strict">
-<pre>
 <style type="text/css">
 </style>
-</pre>
+</source>
 を入力します。 HTML ファイル中にスタイルシートを書く場合は、通常、 head 要素の中<small> （<code><nowiki><head></nowiki></code> から <code><nowiki></head></nowiki></code> までの間） </small>にこれを置きます。この二行の間に書いた内容を、ブラウザは CSS 形式のスタイルシートとして扱います。これでスタイルシートを入力する準備ができました。
@@ 13 行 / 13 行 @@
 最も簡単に記述するには、HTMLタグの中に、以下のように指定します。
+<source lang="html4strict">
-<pre>
 <p style="color:red">文字色：赤</p>
-</pre>
+</source>
 <p style="color:red">文字色：赤</p>
 ほとんどのタグで style 属性を指定できますが、既存のタグで丁度囲まれていない部分を指定したい場合は、<code><nowiki><span></nowiki></code> や <code><nowiki><div></nowiki></code> で囲んでそれに属性を指定します。
-特定の HTML タグ全てにスタイルを指定したい場合は、head 要素の中でまとめて行うことができます。次の例は、全ての <code><nowiki><h1></nowiki></code> タグに style="color:red" を指定した事になります。
+特定の HTML タグ全てにスタイルを指定したい場合は、head 要素の中でまとめて行うことができます。次の例は、全ての <code><nowiki><p></nowiki></code> タグに style="color:red" を指定した事になります。
+<source lang="html4strict">
-<pre>
 <head>
 ：
@@ 28 行 / 28 行 @@
 <style type="text/css">
 <!--
-h1 { color:red }
+p { color:red }
 -->
 </style>
 </head>
 <body>
-<h1>文字色その1</h1>
+<p>文字色その1</p>
 　：
 途中略
 　：
-<h1>文字色その2</h1>
+<p>文字色その2</p>
 </body>
-</pre>
+</source>
-<h1 style="color:red">文字色その1</h1>
+<p style="color:red">文字色その1</p>
 :：<br />
 途中略<br />
 :：
-<h1 style="color:red">文字色その2</h1>
+<p style="color:red">文字色その2</p>
-コメントアウトは、スタイルシートに対応していないブラウザの為に挿入しています。
+style要素に対応していないユーザエージェントの為にコメントアウトすることもあります。
 [[Category:World Wide Web|CSS きしゆつ]]