CSS入門〜<style>タグでのスタイル適用

<head>要素に、<style>タグを使用してスタイルを定義する方法を紹介します。この方法では、ページに存在する同名のタグ全てにスタイルを適用することができます。

HTMLで<style>タグを使用する場合の入力例です。HTML4.01による例です。



<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN"


    "http://www.w3.org/TR/html4/strict.dtd">


<html>


    <head>


        <style type="text/css">


            <!--


            h2 { color: blue; background: yellow }


            p { color: red }


            -->


        </style>


        <title>HTMLでの&#060;style&#062;タグの例</title>


    </head>


    <body>


        <h2>青文字タイトル</h2>


        <p>赤文字


        </p>


        <h2>これも青文字タイトル</h2>


        <p>赤文字


        </p>


        <h2>さらに青文字タイトル</h2>


        <div>


            この要素には何も指定していません。


        </div>


    </body>


</html>

XHTMLで<style>タグを使用する場合は次のようになります。XHTML1.0による例です。



<?xml version="1.0" encoding="UTF-8"?>


<!DOCTYPE html


    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="ja" lang="ja">


    <head>


        <style type="text/css">


            h2 { color: blue; background: yellow }


            p { color: red }


        </style>


        <title>XHTMLでの&#060;style&#062;タグの例</title>


    </head>


    <body>


        <h2>青文字タイトル</h2>


        <p>赤文字


        </p>


        <h2>これも青文字タイトル</h2>


        <p>赤文字


        </p>


        <h2>さらに青文字タイトル</h2>


        <div>


            この要素には何も指定していません。


        </div>


    </body>


</html>

上の2つの例では、全ての<h2>要素にスタイルが適用され、前景色（文字色）が青、背景色が黄色になり、全ての<p>要素は赤い前景色（文字色）になります。

スタイルの定義は、<style>と</style>の間に定義します。HTMLとXHTMLで記述方法が異なるのはこの部分です。

スタイルに対応していないブラウザへの対処

HTMLの場合、<style>要素の記述には、まず、<style>の直後に「」を記述します。このようにコメントで囲むのは、スタイルに対応していないブラウザに対する処置です。

スタイルに対応していない（古い）ブラウザは、コメントで囲まれた部分を純粋にコメントとして扱うため、コメント部分を表示するなどの処理をしません。一方、スタイルに対応している新しいブラウザは、<style>要素内のコメントをスタイル記述のためのマークとして扱うため、定義されたスタイルを読み込み、それをページに適用します。つまり、コメントを記述しておけば、スタイルに対応していないブラウザで、スタイルを定義した箇所のテキストがそのまま表示されてしまうなどのトラブルを防ぐことができます。

一方、XHTMLの場合は、「」は純粋にコメントとして扱われることになっているため、記述する必要はありません。スタイルが適用されなくなってしまいます。

スタイルの定義

スタイルの定義方法については、後のページで詳しく紹介します。

また、<style>タグを使用する方法は、HTMLとXHTMLでは記述方法が異なります。

ページの同じタグ全てにスタイルを適用するには、<style>タグを使用
HTMLの場合、スタイルの定義はコメントで囲む（古いブラウザへの対処）

<style>タグによるスタイル適用

<style>タグの記述

<style>要素の記述

スタイルに対応していないブラウザへの対処

スタイルの定義

<style>タグによったスタイル適用の使用用途