ホーム > HTML講座 > CSS編 > 第3章 CSSをHTMLに記述する その1

第3章 CSSをHTMLに記述する その1

登録タグ: CSS スタイルシート セレクタ プロパティ HTML


今回からはCSSを実際にHTMLファイル中に記述していきます。
記述する方法としては「直接タグに記述する方法」と「直接タグに記述しない方法」の2種類があります。

あまりに長くなるので、今回と次回の2回に分けていきます。

まずは以下のサンプルをご覧ください。

<html>
<head>
<title>CSSをHTMLに記述する</title>
<style type="text/css">
<!--
p{
    color: #FF0000;
}
-->
</style>
</head>
<body>
<h2 style="color: #009900;">CSSをHTMLに記述するテスト</h2>
<p>このサンプルは、CSSをHTMLに記述するテストです。</p>
</body>
</html>

上のサンプルのうち、それぞれ赤字の部分は「<style>タグ」緑字の部分は「コメントタグ」紫字の部分は「style属性」となっています。

それでは順番に解説していきます。

<style>タグは、その名の通り「スタイルシート」を記述するためのタグです。
今回の例ではtype属性も一緒に記述しましたが、よく分からなければ書かなくても大丈夫です。
どうしても書きたい場合は、type属性の値に「text/css」を指定しましょう。

今回の例では<style>タグの中になぜかコメントタグがありますが、これはスタイルシート非対応のブラウザでスタイルシートがそのまま表示されるのを防ぐためです。
このようにコメントタグで囲むことによって、スタイルシート非対応のブラウザでスタイルシートが表示されないように防ぐことができます。

また、HTML内の各タグにスタイルシートを個別に設定する場合は、style属性を使って設定しましょう。
こうすることによって、各タグ個別にスタイルシートを適用させることができます。
ちなみにstyle属性を使用するときはプロパティと値のみで、セレクタは必要ありません。
もちろんstyle属性を使う時もプロパティと値を複数設定することができます。

← 前へ | 次へ →


カテゴリー:CSS編
2011/09/11 09:02:50 更新

Powered by AkiWiki. Wiki syntax is based on PukiWiki, and extends it.

スポンサード リンク

メニュー

HTML講座

HSP講座

Inkscape講座

スポンサード リンク