前回まで のあらすじ。
一昨日の記事 内で、突然姿を表した styleタグ 。
登場するや否や速攻で大活躍。彼は味方なのか敵なのか。
あと、突然こんなはじまりかたをして、この記事はどうやって着地するのだろうか。
乞うご期待であります。
はい。そんなこんなで、今回はstyleタグについて説明したいと思います。
styleタグとは
ブラウザに「マークアップした箇所はスタイルシート（タグの見た目を整える文章）ですよー。」と教える際に使用するタグです。
なのでstyleタグでマークアップした部分は、文字としては表示されなくなります。
<style> p { color: red; font-size: 10px; } </style>
これは、ブラウザが、「
p { color: red; font-size: 10px; }
って部分は、スタイルシートだな。じゃあ文字としては表示しなくていいか。」
と華麗な心遣いをみせてくれているおかげです。
styleタグの効果
前回書いたこちらのスタイル。
<style> li {color: red;} </style>
これは、すべてのliタグのstyle属性に、
<li style="color: red;"></li>
と書くのと、ほぼほぼ同じ効果を発揮してくれます。
styleタグをつかえば、liタグが100個あっても、1000個あっても対応はラクラクなわけです。
styleタグの書きかた
本当は違うんですが、いまのところは、
<style> スタイルをあてたい要素名 {プロパティ: 値;} </style>
と書くと覚えておいて良いと思います。
※ プロパティというのは、color とか font-size とかのことです。
※ スタイルをあてたい要素名の部分は本当は違うので詳細は次回解説します。
styleタグの記述位置
一昨日の記事 では、
<body> <style> li {color: red;} </style> <h1>僕が考えた最強の打線。</h1> <p>僕が考えた最強の打線を発表します。</p> <ol> <li>遊 小坂</li> <li>二 西岡</li> <li>一 福浦</li> <li>右 サブロー</li> <li>指 初芝</li> <li>捕 里崎</li> <li>三 今江</li> <li>左 大塚</li> <li>中 諸積</li> </ol> </body>
と、styleタグをbodyタグの中に記述しました。
スタイルタグはどこに書いても効果はあるのですが、
- ブラウザがhtmlを上から解釈していくこと。
- styleタグは読み終わってから効果が発揮されること。
などから、通常はhead要素内に記述することが多いです。
かつて、スタイルは台本の書き込みのようなもの という例を出したことがありましたが。
例えば、"23ページ目のセリフは力強く読む" 的な書き込みが最後のページに書いてあったら普通は手遅れなわけです。
大抵の役者さんは「おいおい、そういうことははじめに書いといてくれよー。」と思うことでしょう。
ブラウザもおなじことです。なるべく早めに教えてあげましょう。
※ それでもブラウザはなんとかしてくれます。
というわけで、
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>僕が考えた最強の打線。</title> <style> li {color: red;} </style> </head> <body> <h1>僕が考えた最強の打線。</h1> <p>僕が考えた最強の打線を発表します。</p> <ol> <li>遊 小坂</li> <li>二 西岡</li> <li>一 福浦</li> <li>右 サブロー</li> <li>指 初芝</li> <li>捕 里崎</li> <li>三 今江</li> <li>左 大塚</li> <li>中 諸積</li> </ol> </body> </html>
と、styleタグをheadタグの中に移動してみました。
今回は以上です。
次回 はセレクタについて解説できればと思っています。
