複数の方のはてなダイアリーで「スタイルシート（CSS）を調整したいが難しい」という記述を見て、不肖ながら「はてなダイアリー」に特化したスタイルシート講座のページを作りたくなってきた。
スタイルシートは、HTMLと同じ程度に簡単で、同じ程度に難しい。簡易さと、必要な知識とのバランスがHTMLに似ていると思う。
スタイルシートを少し変えて、見栄えを確認したらまた少し変えて見栄えを確認…という作業は、HTMLだけでWebページを作っていたときとあまり変わらない手軽さだ。
一方、文法の勉強をおろそかにしすぎると、「なんかいい感じで見えてるからこれでいいや」とやってしまいかねない。実は文法が間違っていたり、ブラウザのウィンドウサイズを変えただけで崩れてしまうレイアウトだったりするかもしれないのに。
スタイルシートを知るには、HTMLもある程度知っていなければならない。そこでページの方針を「『はてなダイアリー』向けのスタイルシートを作るには」と限定してしまえば、スタイルシートを適用するHTMLファイルの基本構造は読者全員で共通になる。HTMLの説明は最小限ですみ、スタイルシートの解説に専念できるだろう。
スタイルシートを解説する記事については以前から、「こういう順序で解説していけばわかりやすいのではないか」というアイデアがあった。「はてなダイアリー」という場を得たのはいい機会かもしれない。
公私とも忙しい時期だが、やりがいはある。ここにこうして書いてしまえば、自分へのプレッシャーになるだろう。ざっと構成案を書いていってみよう。
- スタイルシートとは
- はてなダイアリーのスタイルシートをいったんOFFにする
- ページ全体の見栄えを変えてみよう
- 背景色をつけてみよう
- 背景に画像を入れてみよう
- 見出しを装飾してみよう
- 文字の大きさを変えてみよう
- 枠線を引いてみよう
- 余白には「内側の余白」と「外側の余白」がある
- 文字の表示位置を変えてみよう
- 太字をやめる?
- そのほかの装飾
- 引用、リストなども同じように装飾できる
- リンクの見栄えを変えてみよう
- キーワードのリンクだけ見栄えを変えてみよう
- 画像の配置を調整してみよう
- 文字を回り込ませてみよう
- 日ごとのスタイルを指定してみよう
- 自分だけのスタイルを作ってみよう（ネタバレ防止スタイルの作成）
- アンテナを表示させてみよう
- アンテナを段組で表示させてみよう
- 項目を横に並べる方法
- ヘッダを入れてみよう
- フッタを入れてみよう
- etc.
ひとつひとつは小さな知識でも、挙げていくと長くなってしまうものだ。色や長さの指定方法など、定型の説明はなるべくほかのリソースへのリンクで代用するのがよさそうだ。
今の忙しさでは、すぐにでき上がることは絶対にないだろうが、ひとまず計画として書き留めておくことにしよう。
コメント
id:nobody『[CSS講座]ぜひお願いします。気長に待ちます。』
id:manpukuya『コメントありがとうございます。なるべくお待たせしないよう努力します。』
id:wine『わたくしも『はてなダイアリー』を利用していますがスタイルシートをどうやればいいのかサッパリです。ＣＳＳ口座、楽しみに待っています。』
