ちょっとプログラミングを息抜きして、デザイナよりになってみようとWebDesigning購入（ただし古本w）
ノンデザイナが、時間と手間をかけずに見栄えが良いサイトを作るのに、いい資料集めが目的。
早速ダウンロードしてみる。
Nothing found for 2007 09 Post_43
ファイル構成を見ると、うちの会社でデザイナさんが使ってるフォルダ構成と似てる。
ちなみになんでもかんでもSubversion派なので、Eclipseを使用します。
まずはブラウザに表示してみる。
各DIVタグ内にひとこといれてみる。
<div id="header"> ここにヘッダを書くんだよ <!-- /header --></div> <div id="main"> ここがメインだよ <!-- /main --></div> <div id="nav"> ナビゲーションはここだよ <!-- /nav --></div> <div id="footer"> フッターだよ <!-- /footer --></div>
するとこんなかんじ↓ 文字化けしたので1行目のeuc-jpをutf-8に変更
ここにヘッダを書くんだよ ここがメインだよ ナビゲーションはここだよ フッターだよ
BODYタグにclassを設定。
１カラムと２カラムが用意してあるので（といっても1カラムはnavのcss指定がおかしいっぽい。）bodyタグに設定する。
<body class="two-column">
これでナビゲーションが右寄せになった。ここにメニューやらブログパーツやらAdSenseやらを載せる。3カラムにしたかったらnavの中にDIVタグ２つで分割してやれば良さそう。幅はlayout.cssでお好みに。
配色をきめる。
その他のCSSはおいといて、WEB 2.0っぽい配色を探します。 僕はkulerがけっこうお気に入りです。ここでPopularから探すもよし、自分の好きなキーワード（英語）を入れるもよしです。
今回はPopularから、Granny Smith Appleを選んでみました↓
■#85DB18 ■#CDE855 ■#F5F6D4 ■#A7C520 ■#493F0B
忘れないうちに、base.cssとかにメモっておきます。今回は明るめの色が多いので、文字に一番くらい色、それ以外を適当に使う事にしてみました。
画面幅を決める。
リキッドデザインはハイレベルなスキルが要る（と思い込んでいる）ので、固定幅にします。ターゲット画面サイズは1024*768なので、余白を少しとって900pxくらいで固定。default.cssいじってええんかな。それともlayoutで上書きするんかな。わからんわー
div#container {
width:900px;
margin:0 auto;
}
ここまでの状態。
ロゴを考える
英語系は、わりとジェネレータでやってもいい感じになる気がする。でも日本語はやっぱり字詰めがおすすめ。
フォントはフリーフォントでもOK。
無償で商用利用できて品質の高い日本語フォント一覧 - Liner Note
今回はMSPゴシックで字詰めをやってみる。
上がもとの状態。下がフォントサイズを調整した状態です。多少バランスが良くなったとも思います。
- 文字の間隔をややつめ気味にする。
- 英字は大きめ、ひらがなは小さめにフォントサイズ変更（10%前後）
- あとはひと文字ごとに字の間隔が同じくらいになるように調整して終わり。
というながれです。英字だけフォントを返る場合にた雰囲気の物が良いでしょう。
