企業系サイト完成
本日の課題の企業系サイトが完成しました。
＜諸条件＞
- 授業内５時間で画像制作からコーディングまで
- 色彩計画・キービジュアル画像は適宜
- 全体は、#conatiner幅「980px」
- ヘッダー情報とフッター情報の見栄えは、ブラウザ幅全体を利用する
- 横幅「140px」ピクセルのナビゲーションボタンを7個作成
- 高さは「50px」
- 「トップページ TOPPAGE」「ソリューション SOLUTION」「実績紹介 ACHIEVEMENT」「パートナー PARTNERS」「カスタマー CUSTOMERS」「会社概要 COMPANY」「お問い合わせ CONTACT」
- キャッチコピー「あなたにとって 最高のパートナー であるために。」
- 色彩計画「基調色、強調色、アソートカラー」の３色は、事前に決定する
- 大見出し、中見出しは画像にする
- ページ遷移のための「矢印アイコン」は作成する
- フッター部にもグローバルナビと同様のテキストリンクを作成する
- テキストリンクは、すべて擬似クラスを設定する
完成はこちら↓↓↓
http://webtre.ikidane.com/biz/
色彩計画では、イメージの鍵になる大画像から、配色を決めるのがルール。
それを知らなかった時は、深緑をキーカラーにして、オレンジ色をアクセントにしようか・・・ と考えていましたが、メイン画像をこれに決めたので、大幅な変更を余儀なくされました。
見ての通り、基調色（青）、アクセントカラー（茶又はピンク）、全体の背景色、すべて画像にある色です。
１回目提出時の先生のご指摘
①「グローバルナビのボタンと横の帯が2pxずれている」
先生のPCでは確認できたものの、私のPCでは、ChromeでもFirefoxでも１pxたりともずれていませんでした。
原因探しですが、なかなか見つかりませんでした。
結論から書くと、
リセットCSSで imgにvertical-alignを設定していなかったのが原因で、h1のディセンダ分2px高くなっていたことと、div#headerに設定していたmargin-bottomの計算ミスの２つでした。
それができていれば本来高さ84pxの#headerなのに、86pxになってしまっていたのでした。
［教訓］リセットCSSでimgに対して指定するのは
border: none; と vertical-align:bottom; の２つ！！
②グローバルナビの文字の大きさ
最初はグローバルナビの日本語フォントサイズは18ptで、ボタン横幅ギリギリでした。
全体的に見ると、詰まった感じがし、ページ上部分が重くなり過ぎているとのことで16ptに下げました。
③「弊社について」「ABOUT」の間隔
間隔をもう少し空けた方がよいとのことで、それぞれフォントサイズを下げました。
