はてなはてな黙示録３ - 田中大士の食うに困らぬ日々

さて日が改まりました。仕切直して、スタイルシート博士への第一歩を歩み出しましょう。まずは、「スタイルシート」について「あのぉ、全く分からないんですけど」以外の質問が出来るようになることが目標です。

前々回にやったことを思い出してみます。

セレクタ・body
プロパティ・background-color、background-image
書式・body{background-color:#00aaff}

こいつらを使うことで、自分の日記の背景の色を変化させたり、「http:」で始まる画像を背景に映し込んだり出来るようになりました。
固有名詞にガンガン頭をぶつけて思わずうずくまりそうになりましたが、ようするにこの「書式」の中に正しい要素を放り込んでやれば、機械は指定したとおりに実行・表示するというだけの話でした。（当たり前か）
というわけで、以上を踏まえて「はてなダイアリーtipsスタイルシートでデザイン編」にありますvms-zun様の「CSS再構築」始めます。

前回と同じく、「設定画面」からテーマを「指定なし」に変更。
それから、テキストが渡されます。

body {
color:#033 ; /* 文字色の設定 */
background-color:#3cc ; /*背景色の設定 */
margin:0 ; padding:0 ; /*枠の外側・内側の余白の設定*/
font-family:osaka,verdana,sans-serif ; /*フォントの種類の設定*/
font-size:100% ; /*フォントの大きさの設定*/
}
body * { font-size:100% ; }

「はてなダイアリーガイド」の応用編を読んでなければ、さっさとケツをまくってたところでしょうが、なんと７割方分かります。少し興奮。
読める。私にもｈｔｍｌが読めるぞ！（失礼）
まず、「background-color」に目をやります。確かに、形式は教わったものと同じですが、前回は「#00aaff」のような二桁で一組の１６進数で指定した記憶があります。これは、「#」以降が３桁なのですが、これは「030c0c」というのと同じことなんでしょうか。
前回のテキストをやりながら、「そういえば色についてごちゃごちゃ書かれたページを見たけどすぐ閉じたな」ことを思い出しました。ちょっと、見てきますね。

「はてなダイアリーガイド・応用編」より
（CSSの主なプロパティ〜色の値）
ありました。
それによると、「background-color」で「#」以下を３桁で指定した場合、２桁の１６進数として扱われるそうです。ということは、「#3cc」は「#33cccc」ということですね。ここには色見本もついていて、例えば「#33cccc」というのは、黄緑にもう少し青を加えた感じの色のようです。
これは、おそらく「文字色の設定」という部分にも適応可能だと思われます。
「#033」は、極めて黒に近い紺というところでしょうか。

それでは、これらの推測が正しいのかどうか、色について反映させてみます。
（えい！）
あは、変わった。
背景は「青よりの黄緑」、文字は「若干紺に近い黒。順調すぎて、つまらないですね。
ついでですが、今私は「/*〜*/」の部分をそのままスタイルシートの部分に入力しているのですが、別に影響は無いようです。
「/*〜*/」でくくれば、ｈｔｍｌのこびとさんはその部分を無視してくれるようです。

「margin」「padding」がどういう動きをするのかというのは、なんだか想像がつくので後まわしにしましょう。
問題は、「font-family」で、ここでは「osaka,verdana,sans-serif」というものが指定されているようです。
今、自分の日記と「サンプル文書」書体を必死に見比べているのですが、違っているようには見えません。ようするに、この「大阪うんぬん」というのが、「はてなダイアリー」の基本的なフォントなのでしょうか。
とりあえず分からない場合、「はてなのことははてなに聞く」ことにしてますので。
（「font-family」「font」「フォント」……）
ざっと目を通していくと「フォントにフォント（id:na_om様）」という日記があって、思わず笑う。読みに行くと、これがホントにフォントの日記なのでびっくりしました。右上に入ってる画像がほんとにイカシてます（ん、死語か？）。
で、例によって面白がっていたのですが、ふと出掛けなければいけないことを思い出し、慌てます。
例えばですが、自分の「スタイルシート」であまり一般的で無いフォントを指定した場合、自分のＰＣで書いた「はてなダイアリー」は、自分がそのフォントを持っていれば上手く出力されると思います。で、「こちらが指定したフォントを持たない」ＰＣでそれを見ようとすると、一体どうなるんでしょう。違うフォントに振り替えてくれるのか、それとも表示がおかしくなるのか。

一回、やってみたかったことがあるんだよなぁ。まだ、書いてる人見たことないんだけど。
どういう風になるのか、興味あるんだよな。
書いてみようかな。
「教えてはてなダイア……」
やっぱりやめときましょう。恥ずかしいしね（つまんないこと聞くな、って言われそうだし）。

よく議論になるのがフォントサイズとフォントの種類の設定についてである。ここでは100%として、閲覧者のブラウザの標準設定の大きさに準拠する様にしてゐる。かうしておけば、閲覧者がブラウザの文字サイズを読みやすい様に変更できるので具合がいい。また、標準サイズが人によつて違ふからには100%以外の数値にすることに意味はない。

もう一つ、フォントの種類の設定についてだが、これも設定すべきでないといふ意見があり、無碍にそれを否定すべきではないとは思ふ。ただ、個人的に標準的なパソコン用のセリフ付フォントは解像度の低いモニタ上では読むに耐へないものだと思つてゐるので、閲覧者が特に指定しない限りサンセリフ体で表示するようにさせていただいてゐる。この点、押付けがましいことには違ひないので要審議。

引用、二連発。上は分かりますが、下はつまづき気味。
「サンセリフ」についてちょっと調べてみると。

代表的なアルファベットのフォントには、「セリフ」と「サンセリフ」があります。
日本語のフォントでは、「明朝体」がセリフに該当し、「ゴシック体」がサンセリフに該当します。

おぉ、そうなのか。「セリフ付」というのが分からないのですが、「セリフ」というのは着脱可能なものということでしょうか。
ようするに、「明朝体」は質の悪いモニタだと見にくいということなんだろうな。実感は無いが、そうかもしれん。

なんだか順調です。
まぁ、「body」は前にも少しかじってたからな。カンニングしたみたいなもんですね。
今の状態で日記を放置しておくのもなんなので、とりあえずテーマ「hatena」に戻しておきます。
ただ、フォントの色だけ変えておきましょう。どう見えるんだろう。

確かに、なんかちょっと変わってるような気がするな。
面白い。