Webサイト http://ai11.net のデザインを変えたときの記録。
前のデザインは
あまり細かく作りこんではいないデザインだった。
今回どんなデザインにするかと考えて、「緑色がいいな……LISMOのリス http://www.kddi.com/lismo/ みたいな」
とイメージしていた。そこへ偶然、はてなブックマークで
デザインやファッションに取り入れたい、2009年 夏のトレンドカラー | コリスhttp://coliss.com/articles/build-websites/operation/design/most-popular-color-for-summer-2009.html
のページが紹介されていた。
紹介されている色 使うことにした。
まずはプロフィールページを修正する。このページは他の記事と連動せず独立しているので修正しやすいのと、あと単に求職活動の自己PRに使うためにこのページを優先で更新したかったのだ。
最初に画面上部のヘッダ画像を作成した。屋号の「きりんシステム」をwebページのタイトルに使う。Fireworksを使用して、さきほど紹介されていた色をパレット代わりにそのまま使って、こんな色になった。
ほんとはもっと新緑っぽい色にしようと思っていたけど、灼熱サバンナ的な色になった。キリンだし、この色でもいいか。
マスコットキャラがヘッダにほしいなと思い、キリンの絵柄を使うことにした。Flash+タブレットでいくつかキリンのラフ画を描き、ベジエでなぞり、キャラ絵は完成。
FireworksMXではFlashのファイルをそのままでは読み込めないので、AdobeIllusrator形式で書き出す。そのとき必要ないレイヤは削除して、キャラは1枚のレイヤにまとめて、ステージのサイズも小さくする。
それをFireworksに配置して、あと文字も組み替えて、ヘッダ画像は完成した。ナビゲーション背景やフッタも作成して、以下のようになった。
Fireworksで画像をスライスして書き出す。そのあとはHTML/CSS作りを開始する。
HTMLの構造は、HTML5 (http://www.thinkit.co.jp/article/48/1/) に合わせて、大きく 5つの部分(division)に分けることにする。
- header
- navi
- article
- aside
- footer
しかしこのwebサイトにはあまり内容がないので、naviは使わない。これらを使用して、ほかにも必要な division を追加して、HTMLを記述した。正直、HTML記述は使い慣れたテキストエディタのほうが早い。
次にCSSを記述する。
まずはリセット用のCSSを適用して、ブラウザごとの見え方が異なるのをなるべくなくすようにする。Yahoo UI LibraryのResetCSS (http://developer.yahoo.com/yui/reset/) を使う。
HTMLの該当箇所のHTMLコードをクリックして、Dreamweaverの「CSS新規ルールを追加」ボタンをクリックしてCSS要素を指定していく。CS4はさすがに使いやすい。
ある程度できたあとでIE6で表示させると、IE6ではすきまがあいたり画像が読み込まれなかったりした。ググってひとつひとつ解決していった。
Fireworksで知ったこと
- 画像の四隅を丸める方法。矩形オブジェクトを作り「角丸の半径」15くらいにする。それを「編集-カット」して、次に丸めたい画像を選択してから「編集-マスクとしてペースト」
CSSで知ったこと
- IE6では、
ul li { width:550px)
とするとリストの点がずれる。li にはwidthを指定せず、ul { width:550px)
とすれば期待の結果になる。
- IE6では max-width:550px しても効かない。スターハックでIE6だけ width:550px することで解決した。
- 以前は floatすると画面下があわなかったりしてfloatは使いたくない気持ちだったので http://mix-mplus-ipa.sourceforge.jp/ のページもfloatは使ってないんだけど、最近では clearfixという方法でfloat使った副作用をなくすことができるようだ。しかし大げさな気もするので、【CSS】clearfixを使わずにfloatを解除する http://c-brains.jp/blog/wsg/08/03/25-210042.php のサイトに書かれた方法を使った。
Dreamweaver CS4 (V10.0) 日本語版 Windows版
- 出版社/メーカー: アドビシステムズ
- 発売日: 2008-12-19
- メディア: DVD-ROM
完全なるプロフェッショナル向けになった