読者です 読者をやめる 読者になる 読者になる

ku-sukeのブログ

Just another hatena blog

kennsuさんの一式をDLしてみてなんかつくってみる。

ちょっとプログラミングを息抜きして、デザイナよりになってみようと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に変更

ここにヘッダを書くんだよ
ここがメインだよ
ナビゲーションはここだよ
フッターだよ

あれ?ナビゲーションは右じゃ。っておもったらcss/layout.cssに書いてあった。

BODYタグにclassを設定。

1カラムと2カラムが用意してあるので(といっても1カラムはnavのcss指定がおかしいっぽい。)bodyタグに設定する。

<body class="two-column">

これでナビゲーションが右寄せになった。ここにメニューやらブログパーツやらAdSenseやらを載せる。3カラムにしたかったらnavの中にDIVタグ2つで分割してやれば良さそう。幅は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%前後)
  • あとはひと文字ごとに字の間隔が同じくらいになるように調整して終わり。

というながれです。英字だけフォントを返る場合にた雰囲気の物が良いでしょう。