style要素

Home>HTML>要素リファレンス>style

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

style要素の役割

style要素は、そのページ内でのみ有効なスタイルシートの設定を埋め込むために使います。
style要素は、head要素内に配置します。

個別の要素にスタイルシートを設定する場合には、各要素に対してstyle属性を設定します。

style要素に設定できる属性

属性名 意味
class クラス名。CSSを適用するときなどに使用する。
dir 文字表記の方向。左から右(ltr)と、右から左(rtl)を指定する。通常はltrなので、右から左へ表記する言語を使わないのであれば、指定しなくてよい。
id ID名。CSSを適用するときに使用する。
lang 言語コード。日本語、英語といった言語を指定する。html要素に記述してあれば、明示する必要はない。
media そのスタイルシートが適用されるメディアを示します。
style スタイルシートを直接記述する。
title 補足情報。テキストにカーソルを合わせるとtitle属性に指定した文字列をポップアップで表示する。
type スタイルシートの言語を示すMIMEタイプを記します。HTMLで利用する場合、基本的にtext/cssになります。

style要素の使い方

<head>
<style type="text/css">
p{
font-size:120%;
line-height:150%;
}
</style>
</head>

上記の例では、そのページ内のp要素の、フォントサイズを通常の120%に拡大し、行間を150%にします。このページ以外ではこれらの設定は反映されません。

これらの設定を全ページに反映したい場合には、CSSを外部ファイルで用意して読み込みます。

media属性

all すべての環境を出力対象にする。
aural 音声出力機器に出力する場合。
braille 点字出力機器に出力する場合。
handheld 携帯用機器に出力する場合。
print プリンタに出力する場合。
project プロジェクタを使って出力する場合。
screen コンピュータのモニタに出力する場合。
tty 文字幅が固定されている機器に出力する場合。
tv テレビに出力する場合。

media属性は基本的に指定する必要はありません。複数指定する場合には、半角カンマ(,)で区切ります。

関連リンク

よく読まれている記事

UpDate:2010-5-28