DTPしか知らない僕がCSSを書いてみた。1回目

仕事でCSSを書いてみた…けど

以前、仕事で簡単なCSSをいじることがあり、
簡単とはいえDTPしか経験がない僕にはなかなかハードルが高く
本を読んだり人に聞いたりしながらなんとか作業をしていました。

それから数ヶ月後再びCSSを書く仕事が回ってきたのですが、
さぁ書こうとしたものの、前回やったことをほとんど覚えてない（汗）

前回学んだことを忘れているというより、
そもそも覚えるに至らないまま仕事として完了していたんだと思います。

うーん、これではいかん！
と思い、マジメにCSSを身につけようと思ったのです。

やる気と根気

身に付けるといっても、本を読んだり解説サイトを見てるだけじゃ
なんとなく分かったような気にしかならず、全然覚えられてないというパターン。
まぁよくありますよね。
とにかく実際に書くこと。書いてみなきゃ始まらないってことで
まず手をつけたのが自分のフォトブログです。
うにかめ
Tumblerをブログがわりに使ってるんですが、
これはテンプレート一覧から好きなのを選んで自分でHTMLやらCSSを編集できるようになってます。
フォトブログなので写真を大きく載せたいものの、CSSの書き方がわからずずっと諦めていました。
とはいえ基本のテンプレをいじる程度なので少し調べればそんなに難しいこともなく、
2日ほどかかりましたがおおむね自分の思い通りの形にすることができました。
書きだすと止まらなくなって、つい寝る時間を削ってまでやってましたが全然苦にならない。
やっぱり、自分のものを作るとなると俄然やる気が湧いてきますね（笑）

続けることが大事

いったん満足したもののこれで終わってしまってはまた忘れてしまう。
それに、だんだんCSSを理解できてきて気持ちよくなってきたこともあり
次は、はてなブログも調整することにしました。（このブログです）
はてなブログもテンプレートを選んでCSSを調整できる仕様なのですが
今度は何も無い状態から書いてみようかな、と。
まずこのCSSをオフにした画面を見て「うっ…」という気分になりましたが（笑）

大枠を考える

どっから手をつけていいものかという迷いもありつつ、とはいえまずは枠取りからだろう、と。
DTPでもまず紙サイズを決めて、マージン決めてガイド作成しますもんね。
基本は紙もWEBも同じだ。
もっといえば最初にデザインラフを書くべきですが、そこまでの気合がなくとりあえずアドリブで。
（こういうところがいけませんね…）
最近、バニデザノートさんを見て良いなと思ったのでパｋ…参考にさせてもらうことに。
バニデザノート
話はそれますが、@vanillateさんはフリーのデザイナーさんなのですがデザインがすごく綺麗！
名刺のデザインをTLで見かけた時に勝手に一目惚れしてしまいました。
これは機会があったら別で書きたいんですけど、紙のデザインが上手なひとのwebデザインって
やっぱ他のデザインと少し違うんです。
何が違うかというと「文字組み」のうまさが違う。
僕も偉そうに言える立場ではないのですが、紙媒体のデザインって文字組抜きには語れない。
例えばカナと漢字が並べばカナをツメるし、100円って書く時は円を小さくする。
何気ない部分へのこだわりがすごいというより、調整することが癖づいてるんです。
町を歩いてて文字組の荒い広告を見たら、直したくなってムズムズするぐらいに（笑）

webという性質上、環境によって見え方も変わる中で文字組を整えるのは大変なことだろうし
どこかで諦めをつけざるをえないんだろなぁというのはなんとなく理解してます。
でもそれでもこれだけ綺麗に文字を並べられるのはすごいなと。
ホワイトスペースについて書かれているエントリがあるのですが、この記事自体がすごく読みやすい。
ホワイトスペースを使ったウェブデザインの考え方
これを見てまた勝手に一目（二目？）惚れしてしまいました（笑）

たしかに、ブログのデザインなので大前提として読みやすくないとダメだなと。
読みやすく、シンプルに。そしてちょっと上品（笑）な感じにしようと決めました。

そして実際にCSSを書いていくわけですが、
前置きでダラダラと書きすぎてしまったので
続きは2回目へ…。