styleタグとは?|スタイルシートを指定する

styleタグとは?|スタイルシートを指定する
博士
今回は、文書内にスタイルシートを記述する方法を解説するぞ。
リンゴ
えっ?
スタイルシートってHTML文書の中にも書けるんですか?
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<style>タグとは

 

<style>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類メタデータ・コンテンツ
利用場所メタデータ・コンテンツが期待される場所、またはhead要素の子要素となるnoscript要素内
内容スタイルシートのコード


 
 
<style>タグは、文書内にスタイルシートを記述する際に使用します。
通常、style要素はhead要素内で使用します。
 
 
博士
head要素内に記述することで、文書単位でスタイルを指定することができるぞ。
 
 

type属性

スタイルシートのMIMEタイプを指定します。
デフォルトの値は「text/css」です。

 
 
Webページで一般的なCSSを利用する場合には、type属性を省略することができます。
 
 

スポンサーリンク

media属性

style要素内で記述されたスタイルシートを、どのメディアに適用するのかを指定します。
例えば、PCの画面であれば「screen」、印刷用であれば「print」のように指定します。
指定できる値は以下の通りです。

  • all
    すべてのメディア(初期値)
  • screen
    PCなディスプレイ
  • print
    通常のプリンタ
  • projection
    プロジェクター
  • tv
    テレビ
  • handheld
    ハンドヘルドデバイス
  • tty
    固定文字サイズの端末
  • embossed
    点字プリンタ
  • braille
    点字の触角デバイス
  • speech
    読み上げブラウザ

 
 
デフォルトの値が「all」のため、media属性が省略された場合は、すべてのメディアに同じスタイルシートが適用されます。
 
 

リンゴ
いろんな種類のメディアを指定できるんですね〜。
 
 

使用例

 
 

表示例





スタイルシートを使いたい


一般には、スタイルシート言語の一つであるCSSをスタイルシートと呼ぶことが多いです。


 
 

スポンサーリンク

まとめ

文書内にスタイルシートを記述する際は、<style>タグを使用します。
 
 

博士
HTML文書にスタイルシートを組み込む一つの方法じゃ。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








styleタグとは?|スタイルシートを指定する