カスタム検索

<style>タグ

<style>タグの機能と属性
機能 文書のスタイルを定義する
属性 HTML-4.01 言語  type  media  title  
XHTML-1.0 言語  id  type  media  title  xml:space  

<style>タグはページの要素(タグで定義された箇所)に対してCSSなどのスタイルシートを定義するために使用されます。CSSについての詳細はCSSを参照してください。

type属性

type属性ではどのようなスタイルシートを使用するのかを指定します。CSSであればtext/cssを指定し、JavaScriptスタイルシートであればtext/java-scriptを指定します。

media属性

Webページはパソコンだけではなく、携帯電話などにも表示させることができます。media属性はどのメディアに対してスタイルを適用するのか指定します。値には、

  • screen(パソコンのディスプレイ)
  • tv(テレビ)
  • handheld(携帯やPDA)
  • print(プリンタ)
  • all(全て)

などがあり、デフォルト値(指定しない場合)はscreenです。複数の値を指定したい場合は、「,」(カンマ)で区切って指定します。このmedia属性に記述されなかった機器にはスタイルが適用されなくなります。

入力例

<style>タグによるスタイルの指定は、HTMLとXHTMLでは記述法が異なります。まず、HTMLの場合です。

style_html.html
<html>
    <head>
        <title>&lt;style&gt;タグの使用例</title>
        <style type="text/css" media="screen,print">
            <!--
            body { color: #66c }
            -->

        </style>
    </head>
    <body>
        <p>本文
        </p>
    </body>
</html>

XHTMLの場合は次のようになります。

style_xhtml.html
<html>
    <head>
        <title>&lt;style&gt;タグの使用例</title>
        <style type="text/css" media="screen,print">
            body { color: #c66 }
        </style>
    </head>
    <body>
        <p>本文
        </p>
    </body>
</html>

上の2つ入力例ではスタイルシートのタイプとしてCSSを指定し、スタイルを適用させる機器にパソコン用ディスプレイとプリンタを指定しています。

title属性

共通して使用される属性のtitle属性を参照してください。

id属性

共通して使用される属性のid属性を参照してください。

xml:space属性

xml:space属性はその要素に含まれるテキストのスペースや改行をそのままスペースや改行として保持するかどうかを指定します。ただし、XHTMLでは、xml:space属性の値にpreserveしか指定することができません。

プログラミングなどではスペース等が特別な意味を持つことがあり、スペース等を保持するかどうかということは重要です。この属性はXMLでは他の値を指定することができますが、XHTMLではあまり関係のない属性でしょう。

CopyLeft 2017 Webデザインレッスン プライバシーポリシー サイト管理者に連絡