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

削除された内容 追加された内容
.旻 (トーク | 投稿記録)
M cat sort
ソースコードのインデント。インデント無しでは可読性が悪い。ついでに冒頭のhtml4時代の記述をhtml5時代の記述に更新。あと SyntaxHighlight 化。
1 行
== 準備 ==
まずスタイルシートを入力する前に、
<sourceSyntaxHighlight lang="html5">
<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では
<sourceSyntaxHighlight lang="html4strict">
<meta http-equiv="Content-Style-Type" content="text/css">
 
8 ⟶ 49行目:
 
</style>
</SyntaxHighlight>
</source>
 
の2つを入力します。
の2つを入力します。 HTML 文書中にスタイルシートを書く場合は、通常、 head 要素の中<small>(<code><nowiki><head></nowiki></code> から <code><nowiki></head></nowiki></code> までの間)</small>にこれを置きます。<code><nowiki><style></nowiki></code> から <code><nowiki></style></nowiki></code> までの間に書いた内容を、ブラウザは CSS 形式のスタイルシートとして扱います。これでスタイルシートを入力する準備ができました。
ただし、この記述はHTML5では、以下のように省略することができます。
<source lang="html5">
<style type="text/css">
 
</style>
</source>
 
== 基礎 ==
=== style属性 ===
とても簡単記述するには方法として、HTML要素に以下のように指定しまする方法が簡単です。
 
<sourceSyntaxHighlight lang="html4strict">
<p style="color:red">文字色:赤</p>
</SyntaxHighlight>
</source>
<p style="color:red">文字色:赤</p>
ほとんどの要素に style 属性を指定できますが、既存の要素で丁度囲まれていない部分を指定したい場合は、span要素 や div要素 で囲んでそれに属性を指定します。
 
=== style要素 ===
特定の HTML要素すべてにスタイルを指定したい場合は、style要素 で まとめて行うことができます。次の例は、すべての <code><nowiki><p></nowiki></code> タグに style="color:red" を指定した事になります。
 
<sourceSyntaxHighlight lang="html4strict">
<head>
途中略
<style type="text/css">
<!--
p { color: red; }
-->
</style>
</head>
<body>
<p>文字色その1</p>
 
途中略
 
<p>文字色その2</p>
</body>
</SyntaxHighlight>
</source>
 
;表示例
<p style="color:red">文字色その1</p>
::<br />
66 ⟶ 104行目:
さらに、CSSだけを別のファイルに書くこともできます。例えば、<code>foo.css</code>に、
 
<sourceSyntaxHighlight lang="css">
p { color:red }
</SyntaxHighlight>
</source>
 
とだけ書いておいて、HTML側でこのファイルを、<code>&lt;link&gt;</code>要素を使って、
 
<sourceSyntaxHighlight lang="html4strict">
<head>
途中略
<link rel="stylesheet" href="foo.css" type="text/css" />
</head>
<body>
<p>文字色その1</p>
 :
途中略
 :
<p>文字色その2</p>
</body>
</SyntaxHighlight>
</source>
 
のように読み込む指定をしても、
 
 
<p style="color:red">文字色その1</p>
97 ⟶ 136行目:
 
のようにスタイルが適用されます。<br>または、CSS本文中に
<sourceSyntaxHighlight lang="CSS">@import url(foo.css);</sourceSyntaxHighlight>のように記述することでも、同じ効果が得られます。<br>こうすれば、サイト全体で見た目の統一をはかり、さらにそれをまとめて変更することができます。
 
== 書式 ==
124 ⟶ 163行目:
また、同じクラスの要素は文書中にいくつあってもかまいません。特定の要素に付いたクラスにだけ適用させる場合には、<code>要素名.クラス名</code>とすれば、両方一致するものにだけ適用されます。
 
<sourceSyntaxHighlight lang="html4strict">
<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>
</source>
 
と入力すると、
171 ⟶ 210行目:
例えば、
 
<sourceSyntaxHighlight lang="html4strict">
<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>
</source>
 
と入力すると、