はてなはてな黙示録７
へへ、もう夜ですが浮かれています。
新車ですよ！ シートのビニールをびりびりと破る感じ。「はてなダイアリーガイド」の何編になるのかは不明ですが、その草稿だそうです。
お題は、
(どんなセレクタにすればいいのかを調べる )
セレクタ。大事ですね（言ってるだけっぽい）。
要素・セレクタ・プロパティという順番に並べて行くというのが私の今までの勉強の成果ですが、まずこれは正しいでしょうか？
そして、代表的な「セレクタ」は「body」です。これは大丈夫そう。その他にも、えーと、なんでしょう「main」は？ 違う？
正直、「要素」と「セレクタ」の違いなんざ、理解の範疇外です。ちょっとどころか、完全に混ざっている可能性も捨てがたいです。（ややもすると、プロパティの一部もミックスされている可能性もあると思います）
なんだか開き直ってますが、そういうことをチェックできるという企画です、きっと。
それでは、扉を開けていっちょ乗り込んでみましょう。
http://guide.g.hatena.ne.jp/sugio/20040626
スタイルシートでどこかを変えたいと思ったとき、どこを変えたらいいのか、つまりなんていうセレクタにすればいいのかが、最初の問題です。でもここをクリアすれば、ほとんど自分でスタイルシートを使えるようになるでしょう。このページが最大の山だと思います。
そうでした。個人的な理解では、スタイルシートというのはマネキンに色んな格好をさせるような作業だと思っています（例えば、「手袋は赤」とか「スカートはシルク」とか）。なので、「セレクタ」や「プロパティ」で使う言葉を覚えるのは、洋服のブランドメーカーの名前を覚えるのと同じで、諦め半分呪文のようにつぶやいて叩き込むのみだと覚悟しています。（実際覚えられるかは別ね）
この後、パソコンへの愛憎を一くさり書いたのですが、「さておけ」と言われたので横に置いておきましょう。本格的に、本文です。
・「body」「a」「p」「br」「img」「h1〜h3」「span」「div」
以上の８つが、いわゆる「要素」というものだそうです。（「body」はセレクタじゃなかったです。だめだこりゃ）
以前、「a」ってなんだ、どこがリンクなんだ、と書いた記憶があったのですが、「anchor」の「a」だったのね。ゆえんあるじゃんねぇ。無知は罪だね、ほんと。
「p」は「paragraph」なんだ。すごく昔に「はてなダイアリーのヘルプ」を読んでいた時に「自動編入される」とあり、ここにも同じことが書いてあります。
あと、「span」という要素は始めて見ますね。「div」との違いは、段落のような大きなひとまとまりで使うのが「div」で、一つの文章の流れの中で、マーカーで線を引くようなのが「span」ということでしょうか。
■ 「要素」を細かく区別するのが「クラス」
要素だけじゃ大ざっぱだという話。ためしにスタイルシートで『div {border: 2px solid gray;}』と指定してみます。すべてのdiv要素に「グレーの枠線」がつきます。ちょっとやってみましょう。
ちょっとやってみましょう。
「設定画面」から、「スタイルシート」入力画面へ。
（チチンプイプイ……）
変わった。おぉ、なんだか気持ち悪いぞ。ただ、クッキリと分かるのでこれはこれで何かの役に立ちそうな感じですね。
はてなダイアリーを構成するタグをわかりやすく抜き出した資料、はてなダイアリー - 1日分のHTMLテンプレートの構造を見てください。divタグの中に『class="day"』や『class="body"』のようなコードが書かれています。
（はてなダイアリー - 1日分のHTMLテンプレートの構造）
ついさっきまで、「大和但馬屋日記 CSS再構築」を弄っていたばかりなので、これは大丈夫です。
これが、なんとなく分かったことがきっかけで、なぜ「はてなダイアリー - 1日分のHTMLテンプレートの構造」が役に立つのかということが分かりました。こちとら、「HTML」と「スタイルシート」が別のものだというのを理解したのも最近のことですから、本当に分かってんのかと言えば言葉も無いのですが
これが「クラス」を表す部分です。いろんなdiv要素を区別するための名前がついていると考えるとわかりやすいでしょう。スタイルシートの記法にあわせると「.day」「.body」「.section」といったクラス名がついていることになります。
＜div class="body"＞〜＜/div＞の部分になにかを指定するとき ………… div.body {〜}
＜div class="day"＞〜＜/div＞の部分になにかを指定するとき ………… div.day {〜}という書き方になります。「要素+クラス」のセレクタ（クラスだけでもセレクタになります）にそれぞれ別の指定をしていくと、テーマのようなデザイン性の高い指定が可能になっていきます。
とても丁寧に書かれています。
ただ、これは、「スタイルシート」と「HTML」の違いが分からないと分からないよね。繰り返し自分に言い聞かせているのですが、「HTML」で書かれたものを「スタイルシート」で装飾するというのが、この「はてなダイアリー」なんだ、ということでいいんですよね。
これがピンと来なかったんだよなぁ。用語がかぶってるし、横文字だし（そりゃかぶるんですが）。さらに読むと書いてあるんだよな、「スタイルシートはそういうもんです」って。これって、誰でも当たり前のこととして納得していることなのでしょうか（そうですか、すいません）。私の場合は、両方が「分からないもの」として同じフォルダに入っていたので、なおさら混乱したのだと思われます。
私の場合は、「＜div class="body"＞」のような「記述の方法」に気を取られ、「これをやるとどうなるのか」というところまでは気がまわらず、一度面倒くさくなって投げ出したわけです（その時はヘッダの話でしたが）。そういう点で、「CSSではてなダイアリーの見栄えを変えて見よう」という企画は「これこれこうすると、こうなりますよ」という説明に徹していただいたため、「あぁそうなんだ」とその場で納得出来て、理解がどうこうと言うよりも、「スタイルシート」に対する抵抗感が無くなったのが大変ありがたかったです。変なところからでありますが、感謝。
話が脇に逸れたので元に戻します。
（クラスだけでもセレクタになります）
というのは、ようするに
div.body {
font-size: 90%;
border: #5279e7 1px solid
と書いても、
body {
font-size: 90%;
border: #5279e7 1px solid
と書いても同じことだということでしょう。「はてなダイアリー」のみを使っているかぎり、「div」は省略可能ということでしょうが、それ以外のばしょではそうはいかないケースがあるのでしょう。
で、ここで問題です。
例えば、はてなのデフォルトテーマ（hatena.css）で「div.body」には、こんな指定がしてあります。さてどこの部分でしょう？
それじゃあ考えようかと思ったところで、答えが見えてしまいました。さらに、
えーはい、日記の、青い枠線で囲まれている部分です。
と答えを教えてもらっても、ピンと来ていません。「＜div class="section"＞」の「本文」のところ？ ここの部分て、フォントの大きさが８０％なの？ きっと、そうだ。信じるしかない。
（今、帰宅したのですが、以前無かった画像が入っていてビックリ。こういう瞬間に、川の向こう岸に「人間」がいるのだと戦くわけです。あ、あとコメント笑いました）
どこに指定すればいいかがわかれば、もう人に聞かなくてもだいたいわかるレベル、勝ったも同然なのです（わーい）。
「これ以上は聞かれても困る」というようにも読めますが、それは勘ぐりすぎでしょう。
たとえば書影のための省略記法を使って画像を表示したとき、この画像に黒い枠線をつけたい、だからセレクタを知りたいなと思ったらブラウザでソースを見ます。（表示メニュー＞ソースを表示、とか）
この「表示メニュー」というのがどこにあるのか、私にはわからんわけです。画像の部分を右クリックすると、「リンクを開く」とか「名前を付けて画像を保存」とか出てきますが、「表示メニュー」というのはありません…… と色んなところを右クリックしていたら、というより何にも無いところを右クリックしたら出てきました、「ソースの表示」。ちょっと、ドキドキしながらクリックします。
（ほい！）
うわ、なんじゃこりゃ！
（メモ帳に、長ーい「ソースの表示」が展開されていると思いねぇ）
＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"＞
「！」はこっちの方じゃ！ という感じですが、「HTML 4.01」とあるということは、これが本格的な例の「HTML言語」というやつでしょうか。
何だか衝撃的な画面で、途方にくれています。なに、これが
http://guide.g.hatena.ne.jp/sugio/19040101
と１対１で対応してるの？
なんだか騙されているような気がするのですが。
えーと、えーと、とりあえず船長が行く末を見失っては路頭に迷うので、どうしようか考えます。
えーと、そうか、とりあえず「＜img」を探しましょう。
＜p＞たとえば＜a href="http://d.hatena.ne.jp/help#asinimage"＞書影のための省略記法＜/a＞を使って＜a href="http://d.hatena.ne.jp/asin/B0000C002T"＞＜img src="http://images-jp.amazon.com/images/P/B0000C002T.09.MZZZZZZZ.jpg" alt="Amazon.co.jp オリジナルブックカバー（文庫サイズ）" title="Amazon.co.jp オリジナルブックカバー（文庫サイズ）" class="asin"＞＜/a＞画像を表示したとき、この画像に黒い枠線をつけたい、だからセレクタを知りたいなと思ったらブラウザでソースを見ます。（表示メニュー＞ソースを表示、とか）＜/p＞
「＜a href＞」ならばなんとか分かるのです。この辺にあるのでは無いかと疑います。
＜img src="http://images-jp.amazon.com/images/P/B0000C002T.09.MZZZZZZZ.jpg" alt="Amazon.co.jp オリジナルブックカバー（文庫サイズ）" title="Amazon.co.jp オリジナルブックカバー（文庫サイズ）" class="asin"＞
これか？（長いぞ）
「img src」という記述が分からないのも困ったものですが、なぜ右上に出るはずの画像がここに出ているのかも分かりません（スタイルシートで指定しているというわけなのか？ HTML様の場合は、こうなのでしょうか）。
とりあえず、「img src」を調べてみます。
IMG は IMaGe（画像）の略です。SRC で指定した画像ファイルを表示します。画像ファイルは、一般的には GIF形式（*.gif）、 JPEG形式（*.jpg）や PNG形式（*.png）を使用します。
＜IMG SRC="sample.gif"＞
画像を表示できないブラウザのために画像の代わりに表示する文字を指定することができます。また画像のサイズが大きい場合や通信速度が遅い場合に、画像が表示されるまで指定した文字が表示されます。
＜IMG SRC="sample.gif" ALT="これは画像です"＞
「title」はマウスが重なったときに表示される文章のようです。
これは、分からないでも無い感じ。
しかし、なぜこの画像がこの場所に出てくるかは謎のままです。そして、
img.asin {border : 1px solid black;}
これは、指定されているのでしょうか。右クリックした時に出る、点線がこれなのか？ 「solid black」が分からん。
google:solid black
「solid」は実線。「black」は色の指定なので、点線は「solid black」で無いことが判明。
ということは、この画像はスタイルシートで指定されて無いのね。
そういえば、「border」をやった時に、「1px solid#000000」という記述をお勉強したことがあったよなぁ。この応用力の無さは、どうにかしなけりゃいけないね。
というか、上でも「solid gray」を使ってんじゃん。もう、ねぇ。
（そういや、キーワード「border」にある「border sample」のリンクが切れているのを思い出しました）
■ 「要素」の中の「要素」を指定するとき
もうちょっとだけ、セレクタの決まりをやります。Hatenaテーマ（hatena.css）などを見ていると、『div.section p』とか『div.comment p』のように、半角スペースを１個はさんで要素がふたつ並んでいるセレクタを見かけます。
これは「div.sectionの中のp要素」「div.commentの中のp要素」ということです。
これは、上より易しそうでほっとします。
『div.comment p』というセレクタは、「div.commentの中のp要素」をスタイルシートで指定します。ということでよさげ。つまりこれは、「コメント欄」に入力された文字をどう表示するかということなんでしょう。
『要素（クラス）』+『半角スペース』+『要素（クラス）』という書き方で、『この部分の中のこの部分』というふうに場所を絞り込んで書かれています。
問題無さそうです。
td.calendar-day a:visited { color: #99cc99 ;}
「calendar2モジュールの日付（td.calender-day）」の「リンク(a)」は、「一度押したら（visited)」「#9c9色」と。
問題なし、と。
こう行ってくれれば、なんの苦労もないのにねぇ。
■ まとめ
さあどうでしょう？ちょっと急ぎ足だったでしょうか、それともだらだら長かったでしょうか。
お読みになればお分かりでしょうが、それどころじゃありませんでした。
やっぱり、分からないところがところてんのように現れてくるわけです。これに、忘れて行くことを付け加えて行くと、想像するだけでもう大変です。
それに「ソースの表示」というやつは衝撃的でした。
いきなり見知らぬ世界が眼前に現れたわけで。
考えて見れば、よそで見たことあるわけですよ、こういう画面は。だけど、まさか自分の身に降りかかってくるとは思ってみなかったなぁ。
思わず横座りになって、両手をついて、下向いたもんな。そのうち怖く無くなるのでしょうか、この「HTML」ってやつ。
しかし、楽しかったです。
少なくとも、私が色んな意味で堪能したことだけは、伝わると良いと思っております。
とりあえず、来週もスタイルシート、頑張ろう。
あとは、二日に分けて書いているので、二日に分けて入力すれば良かったなぁ。（大体、「帰宅うんぬん」あたりに切れ目が）
そうすれば、日記を一日分飛ばさずに済んだのに。
読む人も苦労しないで済むのに。ねぇ。
ま、頭の中では繋がっているので、うまく切れないのも確かなんですよ。ご容赦を。
それでは、あと１時間半寝ます。おはようございますー zzz
（そう言えば、要素だけでもセレクターの場合があるのかー 良く分らん……）
