コロ姫様へ（第二回課題）
C：というわけで、恒例（？）の課題のお時間です（笑）。
ワンコたちに吹き出しでも付けてもらおうかと思ったんだけれど、これは僕も正解が判らないので見送ります（笑）。
今回も2つ出題を。
- 「ひめごと（仮）」の下に、サイドバーの「Title」下に入っているようなボーダーを引いてください。
- 各日記の日付の色を現在より濃い色へ変更してください。
「よくできました」スタンプ*1を用意してお待ちしてますからね？（笑）（ちなみに、「がんばりましょう」が3回続いたら、大目玉罰ゲームですよ？（笑））
では、よろしく！
K：課題を出題して頂くとハァハァ*2しちゃうコロです。
課題1のボーダーを引くのはとりあえずできました（笑）。しかし、日付の色を変える事ができません…。もう少々お時間をくださいね？（笑）
先生に起*3こられる*4と言うシチュエーション*5は個人的にかなり心が熱くなるので、ちょっぴり罰ゲームが楽しみです。
C：課題提出お疲れさまー。
きちんとボーダー*6が引かれているよ。ソース*7ももちろんチェックしました。コロ姫！パーフェクト*8よ！エレガンス＆エクセレントです。さあさあ「たいへんよくできました」スタンプを押しましょうね！……と思ったら、日付の色についてはもう少し時間をとのことなので、「びっくりしました」スタンプにします（日付の色が変更されたら、「たいへんよくできました」になりますよ（笑））。なかなか正解が出ないっていいよねえ。課題らしくなってきたなぁ（笑）。悩んでください（笑）。
罰ゲームはねぇ、恥辱系がいいよね。とりあえず、はてなテーマの「moo」を使って欲しい（笑）。
K：採点をどうもありがとうー。
ボーダーは割とすぐにわかったのだけど、日付の色を変えるの、ちょっと難しすぎるわよ？（笑）まだ、努力中だけど*9、何かヒントを貰えないかしらん？（笑）。エレガンス＆エクセレントと褒めてもらった直後でなんだか気が引けるのだけど…（笑）。
C：日付色の変更、苦労しているようだね（笑）。
毎回、事前に僕のほうで正解を用意してから課題を出題しているのではなくて、解答提出後に正解を記述して、それとコロ姫の答えをつき合わせて採点をしているのね。「大幅な指定変更がなさそうであろう」という見込みだけで出題をしていたわけです（笑）。で、今回の日付色の指定変更を記述してみたんだけど、正しく記述するにはCSSにおける「クラス指定」という知識が必要になるのね。コロ姫はクラス指定って分かるかな？分かるなら、クラス指定を用いるってことがヒントになるよ（笑）。分からなければ、「どうしてそのように記述するのか」の理解は別にして、一応僕のほうで正解を示すね。どうしようか？事前に解答を用意しておけば、この出題は避けられたね…。次回からはそうします（笑）。
ソースの努力の跡も拝見しましたよ（笑）。頑張ってるなぁ（笑）。嬉しいです。このようにコメントしておくと、編集の際に便利なんだよね。
K：ヒントをどうもありがとう〜。
いつも「正解ありき」での出題ではなかったのね？（笑）ちょっとびっくりだわ（笑）。
「クラス指定」のことなのだけれども、姫がソースにかかれているような「div class="sidebar"」っていう指定よね？ CSSを記述する上で、「きっとこれって絶対に必要なのよねー（笑）」と思いながら、いままで一からスタイルシートを書いた事がない為に通り過ぎてきてしまった部分なのよね（笑）。
えぇと、ページのヘッダの部分（？）に「div class="sidebar"」とクラス指定をして、ページソースのそれを適応する部分にはそのクラス指定を記述するような感じなのよね？はてなの場合は、「スタイル」が適応してあるので（今の状態だと「puppy」が）、宣言したクラス指定をどのように該当場所に記述していいのかわからないの（ってまったく見当違いなことを言っていたらごめんなさいね…）。
ヒント第二弾をお願いします…（笑）。
C：頑張っていますか？（笑）
正解をまったく用意せずにってわけではなくて、頭のなかで大まかに想定はしているのですよ？「こんな感じになるだろうな」ってさ（笑）。同じページ効果になる指定でも、CSSの記述方法って様々あってね。今回の課題もクラス指定を用いずに記述することが可能なのだけど（頭のなかで想定したのもこの指定方法だったよ）、いざ正解を記述してみると、はてなの仕様との関係で、クラスが必要になってきたというわけなのです（笑）。
そうそう、クラス指定とは、「div class="sidebar"」のような指定のことですよー。見当違いなんてことはなくて、姫が書いてくれた理解でほぼ、正しいですよ。「sidebar」の部分を「クラス名」と呼び、好きな（任意の）名前を付けることが可能なのです。指定方法は、headタグ内にあるstyleタグ内に（はてなの場合は、「スタイルシート欄」に書けばいいよ）、「.クラス*10名｛ 指定内容 ｝」（クラス名の前にタグ名を加える方法と、クラス名だけで指定する2種類があるよ）と記述し、その指定を適応したいタグに「class="クラス名"」と書き加えるのね。こんな説明で分かるかな……？（笑）
スタイルシート［CSS］/CSSの基本/クラス名を使った指定 - TAG index
よかったら、ここなどを参考にしてみて。
ヒント第二弾は、日付の部分に適応されているクラス名を見つけよう！……になるかな？（笑）
K：今回もヒントをどうもありがとう〜。
「このヒントでわかりそうだわ！！」って意気込んで課題にあたったのだけど、どういうわけか出来ないのです…。えぇと。「<h2><a href="./20040828"><span class="date">2004-08-28</span></a></h2>」の部分が日付を指定している部分だと思ったのだけど、これはあたっているかしら？これがあたっているものと仮定して「span.date」の部分で指定したのだけど、何の変化も起こらず（笑）。
先生…、出来の悪い生徒で申し訳ないのだけれども、ヒントの第三弾を頂けないかしらん…？（笑）
C：お疲れさま（笑）。
うん、日付を指定している部分の特定は正解ですよー。適用されているクラス名は「date」だよね。で、それを受けて「span.date」で指定したと。これで正解なのだよ。「じゃあ、どうして何の変化も起こらないのよ？」ってなるよね？（笑）ここから先は、「CSS指定の優先順位」の知識が必要に……。どうする？解説する？（笑）思ったよりもこの課題は難解なものになってしまったね…。
K：あ、半分くらいは正解だったのね？
先生の愛によって生徒はスクスクと成長しているわよ？（笑）「CSSの優先順位」って先に指定してあるCSSの存在によって、その後のCSSの記述が無効になるっていうことなのかしらん？
先生の予想に反して、難易度の高い課題になっていることにワクワクしているコロです。
C：うん、半分以上正解なんだよ（笑）。
コロ姫はたんへん優秀*11な生徒ですよ？（笑）グングン伸びてます。現在は同一箇所（日付部分ね）へ2種類の指定（デフォルトの色指定とコロ姫が追加記述した色指定）が宣言されている状態なのね。つまり、スタイルが競合しているわけ。重複・競合した指定のうち、どの指定を有効とするかの決定が優先順位ってことなのね。先に記述した指定が後に指定したものより優先される、ってことではないのだけれど、優先順位の存在により、指定をしてもそれが無効になることがある、という部分の理解は正しいよ。
では、どこから進めていこう…？（笑）
外部ファイル中において、日付部分を指定している箇所を特定してみようか（これがヒント第三弾になるかな。というか、これはもう、正解に等しいのだけどね。どうしてそう記述するのかは、別途解説しますね）。
難易度高くなっちゃったねぇ…（笑）。正解に辿り着くまでに様々な知識が必要で、それが学べたのなら、逆によかったような気もしてきたよ…（笑）。
頑張ろうね！（笑）
K：またしてもヒントをどうもありがとうー。
外部ファイルで日付を指定しているって、この「puppy」のテーマですでに定義してあるということよね？えぇと…、直接「puppy」の定義cssをみると「h2 span.date」っていうのがあって、これで日付を指定しているようだったので、スタイルシート部分にこれを記述すると確かに日付の色はきちんと変わるのね。でも、ソースの部分ではこれは適応されていないっぽい…。一体どう言うことなのかしら？先生、よろしくお願いします（笑）。
C：表示が一部歪むので、覗いてみたんだけど、「下書き機能」を使ったのかな？記法が不正確だったみたい。表示させちゃったよ（笑）。
ソースの部分に適応されないとはどういうことだろう？スタイルシート欄に指定を記述しても、HTMLソースを見ると指定が表示されていないってことかな？
K：あ、コメントアウト機能を使った部分が表示してある！（笑）上記の件に就いてもうちょっと自分で整理してからUPをしようと思っていたんです（笑）。えぇとね、外部ファイルで「h2 span.date」を使って日付の色等を指定しているのは分かったのだけれども、この「ひめごと」のだけのページソースを見た場合「h2 span.date」っていうのが適応されていないのじゃないのかなあって思ったのよね（カイエ姫たまが上で言ってくれているのと全く同じことなのですが…）。では、先生、解説のほどをよろしくお願いしますですわ（笑）。
C：お、遂に日付色が変更されたね（笑）。
ごめん、コロ姫の疑問の要点がもうひとつ正確に把握できないんだけれど、日付の色がきちんと変更されているということは指定が効いているわけで、効いているということはページソース中でも表示されているってことになるよね。
うーん…。疑問点についてのさらなる説明を求めます（笑）。
K：あぁ！もしかすると、えぇと日付が指定してある（と思われる）部分「<h2><a href="./20040825"><span class="date">2004-08-25</span></a></h2>」、っていうのは「h2」の「date」って言うことなのかしら…。
ソースを直接見ても「h2 span.date」っていう記述がなくて「どういうことなの？！」ってひとり憤慨していたのだけれども…。
先生、どうなんでしょうか？
C：あぁ！そういうことね。
外部ファイル中で、日付色は「h2 span.date」で指定されているのに、ページソースにはそれに対応する記述がなくて「どういうことなの？！」ってことでいいのかな？
まず、の記述の意味から説明するね。
これは、h2タグに囲まれたspanタグに対して「date」というクラスを指定するって意味なのです。*12
で、ここで日付部分の「2004-08-25」に戻って見てみると、h2タグに入れ子になったspanタグによって囲まれているよね。
日付色を指定しているクラス名は「date」でいいのですよ。クラス名を正確に特定して、最初コロ姫は「span.date」で指定したよね。でも何の変化も起こらなかったじゃない？実は、ここから、先にも少し書いた「優先順位」の知識が必要となってくるのです。が、一旦ここまでとします（笑）。コロ姫の疑問への回答にちゃんとなっているかな？
K：お返事が大変遅れてしまいました…*13。解説をしていただいた「h2 span.date」の意味が分かりました！えぇと、優先順位の件については自分で調べてみたのだけれども、外部ファイルで指定してあるCSSファイルの設定が優先されるということでいいのかしら？最近、マクロメディアのドリームウィーバーという優秀ソフトに触れる機会があって、スタイルシートのことがざっくりながらわかってきました（笑）。(04/11/20)*14
C：では、優先順位の解説を（笑）。
ページ中でスタイルを指定できる位置は3箇所あるのね。
- 外部ファイル（CSSファイル）中（「ひめごと」では、「puppy.css」がそれに相当）。
- headタグに囲まれた部分（<style type="text/css">以下）に指定（はてなの「スタイルシート」欄に相当する箇所）。
- タグに「style="○○"」を用いて直接指定（<font style="font-size:10pt;">○○</font> のように）。
後で指定されたもの（指定位置が下のもの）が最も優先されるのです。外部ファイルの設定が必ずしも優先されるわけではないのね。
3箇所のうちの複数箇所において、同一部分へ異なる指定をした場合（指定の重複ね）、指定位置が最も下である指定が最優先されるわけ（例えば、1と2で指定が重複したら2が、1と3で指定が重複したら3が優先されるということね）。
で、ここで今回の課題を考えてみよう。
最初に姫は、「スタイルシート」欄に「span.date」と指定したよね。でも色が変わらなかったでしょ？「スタイルシート」欄は、外部ファイルより指定位置が下であるから、指定が重複した際には、「スタイルシート」欄での指定が優先されるはずだよね？でも変化しなかったと。
なぜなのか？
実はここにさらなる優先順位の存在が…。「詳細度による優先」というものなんだけどね。指定が重複した場合、指定位置が上であっても、より詳細に記述されているほうが優先される、というもの。外部ファイルと姫の「スタイルシート」欄での日付部分への記述を比較してみると、外部ファイルは「h2 span.date」、姫のは「span.date」。外部ファイルのほうが指定対象をより限定して詳細に記述されているよね。だから、こちらが優先されて、「span.date」での指定は無効となってしまったわけね。次に「スタイルシート」欄へ「h2 span.date」で指定しなおしたよね。これにより、外部ファイルと詳細度が同じになったため、次は位置による優先となり、外部ファイルより下にある姫の指定が有効となった、というわけなのです。（詳細度による優先は覚えておかなくてもいいと思う。「後で指定されたものが優先される」は覚えておきましょう）
長くなったけれど、この説明でわかるかな？(04/11/28)
*1:「がんばりましょう」スタンプはもちろん素材ページより拝借ですよ（笑）。
*2:ハァハァってはてなでリンクが飛ぶのね。「萌えの最上級」とか説明されていてびっくりしちゃうわよね(笑)。
*3:屹立っていうことよっ！(謎）
*4:「起こる」になったぐらいで怒らないからね（笑）。
*5:「先生のが“起こってる！”」ってことなのかな…？（謎）
*6:border-width の値を4つ指定した場合には、 0px（上） 0px（右） 1px（下） 0px（左）となるじゃない？左から時計回りの順と憶えてしまおう。
*7:border-color を加えると、ボーダーの色のみを変更できます。
*8:全く同じ指定になるのだけれど、複数の値を一括記述する「border-bottom: 1px solid #800000;」も正解となります。
*9:努力の跡はソースを参照してください（笑）。
*10:クラスの前に「.（ドット）」があるの見えるかな？（笑）
*11:コロ姫の9/6の日記、読ませて頂きましたよ。学んだことを即活かしてくれるのでとても嬉しいです。指導のし甲斐ありだよ（笑）。
*12:もっと細かく、例えば、「div h2 span span.date」のような記述もできるのです。この場合は、divタグに囲まれたh2タグにさらに囲まれたspanタグにさらにさらに囲まれたspanタグに対して、「date」指定が適用されるわけ。このように記述することで、指定を及ぼす範囲を細かく限定することが可能に。
*13:第2回が終わらないままに第3回課題が…。
*14:あ…。出題からそろそろ3ヶ月ね…。
