前回 はstyle属性をさくっとした感じで解説しました。間が開いてしまったのでさくっと復習しましょう。
前回の復習
スタイル属性とはすべてのタグが持っている属性で、スタイルを書き込む為の場所です。
タグのスタイル属性にスタイルを書き込むことによって、そのタグの見た目を変更することができます。
いうならば、ヘブンズドアをつかって人に命令を書き込む岸辺露伴のようなイメージです。
そう考えるとコーディングが一気に楽しくなるかもしれません。（ならないかもしれません）
スタイル属性でスタイルを指定する
スタイル属性は 前回 解説したとおりです。
<h1>僕が考えた最強の打線。</h1> <p>僕が考えた最強の打線を発表します。</p> <ol> <li>遊 小坂</li> <li>二 西岡</li> <li>一 福浦</li> <li>右 サブロー</li> <li style="color: red;">指 初芝</li> <li>捕 里崎</li> <li>三 今江</li> <li>左 大塚</li> <li>中 諸積</li> </ol>
前回 の知識を用いれば、
「指 初芝」の部分が赤い文字で表示されるということが容易に想像つきます。
style属性にcolor: red;と書き込まれた要素は文字色が赤になってしまうのです。
スタイルを指定したい要素がそんなにない場合はこの方法で対応できるのですが、数が多くなってくると大変です。
例えば、小阪 〜 諸積まで全員を赤い文字で表示したいと思った場合は、
<h1>僕が考えた最強の打線。</h1> <p>僕が考えた最強の打線を発表します。</p> <ol> <li style="color: red;">遊 小坂</li> <li style="color: red;">二 西岡</li> <li style="color: red;">一 福浦</li> <li style="color: red;">右 サブロー</li> <li style="color: red;">指 初芝</li> <li style="color: red;">捕 里崎</li> <li style="color: red;">三 今江</li> <li style="color: red;">左 大塚</li> <li style="color: red;">中 諸積</li> </ol>
とこんな感じになってしまいます。
同じことを何度も書くのは非常に非効率です。
効率よくスタイルを指定する
では、どのようにスタイルを当てていくのが効率が良いのか。今回は2つのアプローチで効率化を図ります。
1. 親要素にstyle属性を書き込む
もしも全員の文字色を赤にしたいという目的であれば、文字色を赤にしたい要素の親の要素のstyle属性で指定するという方法があります。
文字色は子に継承されるスタイルだからです。（すべてのスタイルが継承されるわけではありません）
親要素ってなんだ？継承ってなんぞや？と思われる方もいるかもしれませんが、それに関してはまた 次回以降 に解説します。
<h1>僕が考えた最強の打線。</h1> <p>僕が考えた最強の打線を発表します。</p> <ol style="color: red;"> <li>遊 小坂</li> <li>二 西岡</li> <li>一 福浦</li> <li>右 サブロー</li> <li>指 初芝</li> <li>捕 里崎</li> <li>三 今江</li> <li>左 大塚</li> <li>中 諸積</li> </ol>
2. styleタグをつかう
タグ1つ1つにstyle属性を書き込んでいかずにstyleタグにまとめて書いてしまうというのも1つの手です。
styleタグってなんぞ？と思われる方もいるかもしれませんが、それに関しても 次回以降 に解説します。
<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>
とりあえず今回は以上です。
次回 は親要素、子要素について解説したいと思います。
