はてなはてな黙示録（その４）

土・日はスタイルシートの日と決めています。
なぜ決めているかというと、決めないときっとやらないからで、やらなければ出来るようにならないからです。
出来るようになったからどうということも無いんですが、結構楽しいんで別段文句もなく続いているわけです。


現在のところ、「はてなダイアリーtipsスタイルシートでデザイン編」にありますvms-zun様の「CSS再構築」というテキストにお世話になってます。で、今日はその２。
（大和但馬屋日記　CSS再構築）　

さて、はてなダイアリーはdiv要素を沢山使ふ。div要素とは、特に目的の定められてゐない便宜的な要素である。「HTMLの各要素には意味や目的がきちんと定められてゐることが重要である」とする考へからは、divの多用はよろしくないこととされてゐる。しかしはてなダイアリーは自動的にdiv要素を出力してしまふのであり、それを避ける方法はない。ならば上手くレイアウトに活用するのが知恵といふものだ。

まずなんにしろ、「div要素」というのが分からないわけです。
で、「はてなのことははてなに聞け」というわけで、トップページからキーワード検索。
（もしもし）
うーん、ありません。
それじゃ次は「google」様。

・＜div＞―ブロック要素
＜div＞ 自身は特に何の意味も持たないタグです。＜div＞〜＜/div＞ で囲まれた部分を右寄せしたり、スタイルシートを適用したりするのに用いられます。
同様なタグに ＜span＞ がありますが、＜div＞ はブロック要素（前後に改行がはいる）として、＜span＞ はインライン要素（前後に改行が入らない）として定義されています。

特に意味が無いですか……　「特に意味が無い」ことに意味があるってことなんですかね。「スタイルシートを適用したりする」とありますし。
「特に意味は無い」と覚えておいて先に進みます。

さて、日記本体に出力されるのは以下のdiv要素だ。
＜div class="main"＞
＜div class="day"＞
見出し：日付
＜div class="body"＞
＜div class="section"＞
見出し：話題
日記本文
＜/div＞
＜div class="section"＞
見出し：話題
日記本文
＜/div＞
＜div class="section"＞
見出し：話題
日記本文
＜/div＞
＜/div＞
＜/div＞
＜div class="day"＞
見出し：日付
＜div class="body"＞
＜div class="section"＞
見出し：話題
日記本文
＜/div＞
＜div class="section"＞
見出し：話題
日記本文
＜/div＞
＜div class="section"＞
見出し：話題
日記本文
＜/div＞
＜/div＞
＜/div＞
＜/div＞

うわー、すごく前に見た記憶があるなぁ、こんなの。あぁ、５月１９日だ。ヘッダを書くのを投げ出した時だなぁ……　あの時も「div」がたくさんあって、「分からないっつーの」とモニターを怒鳴りつけた記憶があるよな。（返事は無かったけど）
進歩したよな。今は上のようなテキストを見ても動じないもんな。「分かるようになった」のではなく、「分からなくても平気になった」というわけです。うーん、進歩。
これが、「はてなダイアリー」の骨格標本みたいなもんだという理解でよろしいか？

この様に、クラス名"day"のdiv要素で一日単位に括られ、日付の見出しがあつて次に"body"、さらにその中に"section"で括られた話題が並ぶ。そして、画面に表示されてゐる一ページ分の日記が"main"で括られてゐる。随分深い入れ子構造だ。

本当のところ、頭にかなりたくさんの数の「？」マークが浮かんでいます。
特に「＜div class="〜"＞」の書式が表すところがなんだか分かりません。ただ、「特に意味がない」ということを鵜呑みにすれば、見て分かりやすいように便宜上書いてあるということ？
あとは、日記を登録した際、自動的にテキストを左寄せしてくれるのはおそらく親切なのだと思いますが、この場合は厄介。とりあえず、私の実力ではこのままだと見づらくて仕方が無いので補助線を引きます。

＜div class="main"＞

＜div class="day"＞
見出し：日付

＜div class="body"＞

＜div class="section"＞
見出し：話題
日記本文
＜/div＞

＜div class="section"＞
見出し：話題
日記本文
＜/div＞

＜div class="section"＞
見出し：話題
日記本文
＜/div＞

＜/div＞

＜/div＞

＜div class="day"＞
見出し：日付

＜div class="body"＞

＜div class="section"＞
見出し：話題
日記本文
＜/div＞

＜div class="section"＞
見出し：話題
日記本文
＜/div＞

＜div class="section"＞
見出し：話題
日記本文
＜/div＞

＜/div＞

＜/div＞

＜/div＞

少し見やすくなりました。今気づきましたけど、二日分です。

ひとまづ一日単位の"day"をターゲットにデザインを決めようと思ふ。下記の設定をスタイルシートに追加。

えーと、なるほど。こういう「class」単位で指定が出来るってことなんだ。
「＜div class="〜"＞」の意味はそういうことなんですね。この補助線に囲まれた内側の部分を詳細に指定できるわけですか。


で、「＜div class="day"＞」に入れる設定はこれ。

div.day {
color:#fff ; /* 文字色の設定 */
background-color:#333 ; /* 背景色の設定 */
border:1px #999 solid ; /* 枠線の設定 */
margin:2em 0 ; /* 枠の外側の余白設定 */
padding:0 ; /* 枠の内側の余白設定 */
line-height:2em ; /* 本文の行の高さの設定 */
}

「div要素」を指定する時は、「div.day{〜}」と書くのですね。
「color」や「backgraound-color」は見慣れたものですが、初お目見えのものがいくつもあります。
まず、「margin」や「line-height」で見受けられる「２em」というのはある種の「単位」で、「一文字分の横幅」という意味だと解説があります。正直なところ、サンプル文書を見るだけではまるでピンと来ないので、これは「em」の値を変えていろいろやってみないと実感できなそう。
今日のところは、まず書式の方を漁っておきます。
「border」「margin」「padding」「line-height」を尋ねてまわりましょう。
（もしもし）

border

書式・div.day{border:1px solid #000000}

CSSのプロパティ。上下左右の色・幅・スタイルを一括して設定できる。全ての要素に設定できる。pxは線の太さのことでしょうか。「#000」は例によって色でしょう。「solid」は線の種類のことのようです。（キーワードからなんですが、この文体はもしや……）

margin

書式・div.day{margin: 1em 3em}

「margin：〜」の中に２つ記述がある場合、最初のもの（この場合1em）が上下、後のもの（この場合3em）が左右の余白に対する指定となるそうです。「0」はきっと「ナシ」ってことでしょう。枠の外側の余白設定と書いてあります。

padding

書式・div.day{padding:1em}

枠の内側の余白設定と書いてあります。

line-height

書式・div.day{2em}

本文の行の高さの設定と書いてあり。


正直、ピンときません。実地がともなっていないからです。
上の新要素を頭の中に叩き込んで、「サンプル文書２」をにらみつけます。
（サンプル文書２）
うーん、なんとなく体感できるようなそうでないような……
なるほど。左右の余白を全くとっていないので、「border」は間違いなくわかりづらいですね。ただ、日記の切れ目の部分で判然とします。
「line-height」にいたっては、さっきまでほとんど逆上気味でしたが、もしかして行間の長さを指定してるのはこれですか？　うわぁ、きっとそうだ。「2em」の中には表示されている文字を含んでいて、その一文字分（1em）を引くと、各行の合間に一文字分空間が空くんだ。そうかぁー。（なに言ってんだか分からないと思います。すいません。むしろ自分の心の問題、というやつで）


ふーむ。しかし、ぼんやりですけど形が浮かび上がってきたような気がしてますよ。
基本的には、骨格に肉付けしていく作業なんでは無いかと思うのです。（その「骨格標本」は「はてな」の方が決めてるので自分ではいじれないくさい）
補助線を引いたら、パキパキと音を立てて分かってきたような気が。横文字を使ってこちらを煙に巻こうとしていますが、この「スタイルシート」というやつ、仕組みは案外簡素でいいやつのような気がしてきました。


ん？　もしかして、「誰でも簡単に使えるように」デザインされているものなのか？ そいつは気がつかなかったぞ。