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

昔は…

僕自身、web初心者とはいえいままで全く触れたことがなかったわけではなく、振り返れば高校生のころ家にPC（win95）が来てネットが繋がってからは自分の"ホームページ"を作って公開したり、無料のCGIをDLしてきてサーバーに設置したりとHTMLやFTPソフトに触れていたこともありました。
当時、CSSに対しては「HTMLでできないことができる記述法」ぐらいの認識で、例えばマウスオーバーで色が変わるのをちょっとした装飾に使うぐらいでした。
思えばもう10年前…なつかしい（笑）
値を変更してアップ、ページをリロードして確認して、また値を変更してアップ…という作業をひたすら繰り返してたのを思い出します。

タグの意味を知る

HTMLにしろCSSにしろ、まぁ他のもそうだと思うんですが最初に難しいと感じる理由は「記述の意味が分からない」からだと思うんです。
「求める結果は思い浮かんでるんだけど、どこの値を変更すればいいのかわからない。」
これが、僕がずっとwebデザインに対して感じていた壁でした。

テキストの大きさを変えたい→font-sizeの値を変えるぐらいは分かるんですけど、パッと読んで意味のわからない値もたくさんあって。
単純に調べればいいんですけど、その努力が億劫でして…（汗）
でも今は、便利なツールがあるもんです。

理解するためのツール、Firebug

web開発者にはお馴染みのFirefoxのアドオン、Firebug。
これがCSSを理解するためにすごく役立ちました。
今までは

この部分はどう記述してるんだろう？
↓
ソース表示
↓
それらしき箇所に目星をつける
↓
タグを調べる
↓
サンプルを作って確認

という手順でやっとタグの意味とか値の調整範囲を把握できてたわけですが、Firebugを使えばこれが一瞬でできる！
はじめはFirebugの使い方もよくわかりませんでしたが、とりあえずInspectでページ内を触ってみたり、styleで値を適当にいじっていくうちにこれはすげー便利なツールだなと実感できるようになりました。
こんなのが無料で手に入って良いんでしょうか…すごいなぁ。

Firebugは名前の通り、Firefoxのアドオンですが、Chrome版もあります。
…ですが、機能が少ないのが難点。
メイン機能は備わってるので簡単に使う分には事足りるんですが、Chromeをメインに使ってる身としては、はやく完全版を出して欲しいなぁと。
無料でこんなのが使えてすげぇと言いつつ、文句言うなんてワガママですね（笑）

とにかく、Firebugを入れること。
そして、綺麗に作ってあるサイトを開き、Firebugでいじりたおす！
とくに、値ごとにoffできるのが便利です。どの値が見た目にどう影響してるのか理解しやすい。
個人的には、いじるサイトはあまり複雑でない方がいいかなーと思います。
CSS以外でいろいろ制御されてるとややこしくなりそうなので…
まずはシンプルにHTMLとCSSでつくってあるサイトを。
ブログならデザイン豊富で、構造も理解しやすいので良いんじゃないかな。

あとは、初心者向けのCSS解説サイトをひととおり読んでおきました。
どんなタグがあって、どんなことができるのかを簡単に把握。
実際の記述方法はその時に調べればいいですしね。
できることとできないことのラインを把握しとくだけで頭の中のイメージがだいぶ整理できます。

あとは書くだけ

あとはひたすら書いていくだけです。
エディタはCSS Editを使いました。自動補完が便利というか必須だなと思ったので。
無料版だと保存時に文字数制限がありますが、とりあえずこれで良し。

CSSを書く
↓
ページ更新
↓
おかしい所はFirebugで適切な値を探す
↓
CSSを修正

の繰り返し。
Firebugがあればバッチリな値を見つけるとこまで作業できるので、
「値を変えてみたものの、ちょっと変だった…」
という無駄なやり直しが無くなりました。これはすげー便利だわ。

分からない所は他のサイトを見ながら（もちろんFirebugで）
参考にし、少しずつ形をつくっていきました。
問題だったのは、最初にラフを書かなかったこと。
あとから「ここの文字を大きくしよう」とか「あっちを変えたらこっちも変えたほうがいいな」とかとか。
よくある話ですが今回は練習なのでそれも良しとしましょう（笑）

そんなわけでこのブログも自分の納得できる形に変更できました。
次は、実際に書いてて理解しづらかったポイントとか、疑問点をまとめたいと思います。
（次で終わりです、たぶん）