「CSS/記述」の版間の差分
削除された内容 追加された内容
M cat sort |
ソースコードのインデント。インデント無しでは可読性が悪い。ついでに冒頭のhtml4時代の記述をhtml5時代の記述に更新。あと SyntaxHighlight 化。 |
||
1 行
== 準備 ==
まずスタイルシートを入力する前に、
<style type="text/css">▼
</style>▼
</SyntaxHighlight>
と入力します。
このタグはスタイルシート(CSS) に絶対に必要です。もし、これが無いと、スタイルシートとしては動作しないです。
なぜならwebブラウザは <code><nowiki><style></nowiki></code> から <code><nowiki></style></nowiki></code> までの間に書いた内容を、 CSS 形式のスタイルシートとして扱うからです。
これでスタイルシートを入力する準備ができました。
さて、スタイルシート(CSS)のファイルと HTMLファイルとは 別ファイルにしても動作は可能です(「外部スタイルシート」といい、拡張子は「.css」になります。後述)。いっぽうHTMLファイル中にCSSを含めることも可能です。
もしHTML 文書中にスタイルシートを書く場合は、慣習的に
<SyntaxHighlight lang="html5">
<head>
<style type="text/css">
</style>
</head>
</SyntaxHighlight>
という構成にするのが望ましいとされており、つまり、head 要素の中<small>(<code><nowiki><head></nowiki></code> から <code><nowiki></head></nowiki></code> までの間)</small>にstyle要素を置くのが望ましいとされています。
<source lang="html4strict">▼
この構成が望ましい理由としては、互換性などの理由で万が一スタイルシートを認識しない場合でも、HTMLの仕様としてhead内は非表示なので、よって、スタイルシート内の文字列を誤って文字表示してしまうエラーが防げるからです。
外部スタイルシートをHTMLから呼び出す場合でも、CSSを呼び出すためのタグを同様にhead要素の中に入れるのが望ましいとされています。
もしHTML4を使う場合でも、この構成にするのが望ましいとされています。(というか、もともとHTML4時代から、この構成が望ましいとされている認識が、HTML5時代でも引き続き、受け継がれている。)
;HTML4の場合
HTML4では
<meta http-equiv="Content-Style-Type" content="text/css">
8 ⟶ 49行目:
</style>
</SyntaxHighlight>
の2つを入力します。
▲<source lang="html5">
▲<style type="text/css">
▲</style>
== 基礎 ==
=== style属性 ===
<
<p style="color:red">文字色:赤</p>
</SyntaxHighlight>
<p style="color:red">文字色:赤</p>
ほとんどの要素に style 属性を指定できますが、既存の要素で丁度囲まれていない部分を指定したい場合は、span要素 や div要素 で囲んでそれに属性を指定します。
=== style要素 ===
特定の HTML要素
<
<head>
:
途中略
:
<style type="text/css">
<!--
p { color: red; }
-->
</style>
</head>
<body>
<p>文字色その1</p>
:
途中略
:
<p>文字色その2</p>
</body>
</SyntaxHighlight>
;表示例
<p style="color:red">文字色その1</p>
::<br />
66 ⟶ 104行目:
さらに、CSSだけを別のファイルに書くこともできます。例えば、<code>foo.css</code>に、
<
p { color:red }
</SyntaxHighlight>
とだけ書いておいて、HTML側でこのファイルを、<code><link></code>要素を使って、
<
<head>
:
途中略
:
<link rel="stylesheet" href="foo.css" type="text/css" />
</head>
<body>
<p>文字色その1</p>
:
途中略
:
<p>文字色その2</p>
</body>
</SyntaxHighlight>
のように読み込む指定をしても、
<p style="color:red">文字色その1</p>
97 ⟶ 136行目:
のようにスタイルが適用されます。<br>または、CSS本文中に
<
== 書式 ==
124 ⟶ 163行目:
また、同じクラスの要素は文書中にいくつあってもかまいません。特定の要素に付いたクラスにだけ適用させる場合には、<code>要素名.クラス名</code>とすれば、両方一致するものにだけ適用されます。
<
<head>
:
途中略
:
<style type="text/css">
<!--
.example1 { color:blue }
em.example2 { color:red }
-->
</style>
</head>
<body>
<p class="example1">クラスのテスト</p>
:
途中略
:
<p>クラスのない部分。<span class="example1">ここだけクラスあり。</span>ここは元通り。
<em class="example2">emにクラスを適用。</em><span class="example2">同じクラスでも、spanには適用外。</span></p>
</body>
</SyntaxHighlight>
と入力すると、
171 ⟶ 210行目:
例えば、
<
<head>
:
途中略
:
<style type="text/css">
<!--
.example1 span { color:blue }
#id2 > em { color:red }
-->
</style>
</head>
<body>
<p class="example1">ここは装飾なし。<span>ここは子要素。</span>
<em>子供は別の要素だけど、<span>孫要素には適用される。</span></em></p>
:
途中略
:
<p id="id2">ここは装飾なし。<em>子要素には適用される。</em>
<span>別の子要素。<em>孫要素には適用されない。</em></span></p>
</body>
</SyntaxHighlight>
と入力すると、
|