はてなはてな黙示録（その９ 工事編）
さて、それではとうとうスタイルシートを書いてみます。
先週、ちょっとだけやった気もするのですが気のせいでしょうか。まぁいいです。がんばります。
とりあえず、「スタイルシート」を書くと息巻いてはみたものの、それでそのままスラスラと書ければ誰も苦労はしない道理。
少なくとも、私には無理です。影で予習して、突然凄いとこ見せて感心されたいというメンタリティーもありません。
例によってＰＣの前に座って書きながら考えるのみです。
さらに、「恥」という観念も少なめですので、人の真似っこでもぜんぜん恥ずかしくありません。直接顔の見えない気安さもありますし、基本的には偉大な先人のあとをこそこそと付けて行くことにします。（一度人が歩いた後は、舗装道路を歩くように楽々です）
「はてなダイアリーガイド」や「CSS再構築」を読んできていますので、真似っこ相手にはこと欠きません。だから、最初の一歩も迷わないですみますよ。
とりあへず、大枠から手を着けることにした。大枠といへばまづはbody要素だらう。
「ＣＳＳ再構築」より。ほら、至言だ。確かスタイルシートを書く際の基本は、「一番大きいところから始めて、一番小さなところで終わりなさい」です。
それでは、設定画面に行ってテーマを外して、本格的に書き始めることにしましょう。
とりあえず、第一弾投入です。
body {
color:#033 ;/* 文字色の設定 */
background-color:#3cc ; /*背景色の設定 */
margin:0 ; padding:0 ;/*枠の外側・内側の余白の設定*/
font-size:100% ; /*フォントの大きさの設定*/
}
とりあえず、これを自分の好みに直しましょう。
文字は黒。背景は白にしてみましょう。えーと、「The Quick Color Table」によると、黒は「#00000」で白は「#FFFFFF」とのこと。
直しましょう。
（えい！）
直りました。すごく普通です。今気が付きましたが、リンクの部分には元から色が付いてるんですね。
フォントの大きさは、いろいろいじって見たかったので、ちょっと試してみます。
とりあえず、「２００％」。はは、デカっ！ 縦横が２倍になるから、面積４倍ってこと？ リンクまで大きくなっていて、それを踏むと普通の画面が現れるのがなんともおかしい。「１５０％」でも、相当大きく見えますね。これはこれで面白いですが、一般の規格からは大幅に外れていますので、ちょっと危ない日記に見えます。
今度は「７５％」。かなりスッキリ・ちまちま見えますね。これも、こういう日記はありそうです（例は思い浮かびませんが）。ただ、改行するとかなり次の文章まで離れてしまうようです。私は何も設定していないので、これが仕様ということでしょうか。「５０％」は相当小さいですね。これが活字で無ければ、読むことは困難な感じ。でも読めます。「３０％」になると、目がいいとか悪いとかではなく、「時々読める単語がある」という程度ですね。「４０％」でもそうとう厳しい感じ。「フォントは、５０％」以下にしない方がいいということですね。
div.day {
color:#fff ; /* 文字色の設定 */
background-color:#333 ; /* 背景色の設定 */
border:1px #999 solid ; /* 枠線の設定 */
margin:2em 0 ; /* 枠の外側の余白設定 */
padding:0 ; /* 枠の内側の余白設定 */
line-height:2em ; /* 本文の行の高さの設定 */
}
真似っこ投入、第二弾。今度は、「＜div class="day"＞」を装飾します。
とりあえず、文字色は黒にします（#000000)。背景色を「白」に変えなくてはなりませんが、そのまま入れるのも芸が無いので少し色を入れて「#FFFFCF」にしておきましょうか。
（えい！）
並べて見ると、ずいぶんクリーム色っぽいのですね。もう少し色を落として「#FFFFF0」に修正。かなり色が落ち着きました。白とは言えませんが、見た目をはっきりさせるためにとりあえずこのままにしておきましょう。
「border」に関しては、無いとかなり印象がぼんやりします。色の違いが、モニターの色ムラに見えるくらい。個人的にはあっても無くても良いのですが、とりあえずクッキリ感のために残しておきましょうか。
「margin」の挙動に関しては結構気になっていたのですが、実体験したことでなんとなくピンと来たような気がします。この段階で左右を設定しても良いのですが、先人の教えにならって後の話にしておきましょう。
「padding」は０なのでピンときません。
「line-height」については実験。実験。これが「１」の場合、上下がぴったりとくっつくのは以前勉強しました。で、さっき見たのが２ですね。これだと、私の感覚では少し行間が広い感じがします。「１．５em」に詰めてみます。微妙に広いような気がするのですが…… 「１．３em」にします。今度はちょっと狭いかな…… 「１．４em」に。うーん微妙。だんだん、わけが分からなくなってきました。
段落の頭を自動的に一つ下げてくれないし、かなり「テーマHatena」時代の印象とは違う感じ
果たしてこれが、「HatenaのようでHatenaでない日記」となるのでしょうか？ 遠すぎて全くイメージが湧きません。
これでは読みにくくてしょうがないですが、「おーおー、やってるやってる」感を出すために、放置して明日。
