くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

企業系サイト完成

本日の課題の企業系サイトが完成しました。

 

<諸条件>

  • 授業内5時間で画像制作からコーディングまで
  • 色彩計画・キービジュアル画像は適宜
  • 全体は、#conatiner幅「980px」
  • ヘッダー情報とフッター情報の見栄えは、ブラウザ幅全体を利用する
  • 横幅「140px」ピクセルのナビゲーションボタンを7個作成
  • 高さは「50px」
  • 「トップページ TOPPAGE」「ソリューション SOLUTION」「実績紹介 ACHIEVEMENT」「パートナー PARTNERS」「カスタマー CUSTOMERS」「会社概要 COMPANY」「お問い合わせ CONTACT」
  • キャッチコピー「あなたにとって 最高のパートナー であるために。」
  • 色彩計画「基調色、強調色、アソートカラー」の3色は、事前に決定する
  • 大見出し、中見出しは画像にする
  • ページ遷移のための「矢印アイコン」は作成する
  • フッター部にもグローバルナビと同様のテキストリンクを作成する
  • テキストリンクは、すべて擬似クラスを設定する

 

完成はこちら↓↓↓

 

課題サイト・スタイルシートカンパニーの完成ページ

http://webtre.ikidane.com/biz/ 

 

色彩計画では、イメージの鍵になる大画像から、配色を決めるのがルール。
それを知らなかった時は、深緑をキーカラーにして、オレンジ色をアクセントにしようか・・・ と考えていましたが、メイン画像をこれに決めたので、大幅な変更を余儀なくされました。

見ての通り、基調色(青)、アクセントカラー(茶又はピンク)、全体の背景色、すべて画像にある色です。

 

1回目提出時の先生のご指摘

「グローバルナビのボタンと横の帯が2pxずれている」

先生のPCでは確認できたものの、私のPCでは、ChromeでもFirefoxでも1pxたりともずれていませんでした。

原因探しですが、なかなか見つかりませんでした。

結論から書くと、
リセットCSSで imgにvertical-alignを設定していなかったのが原因で、h1のディセンダ分2px高くなっていたことと、div#headerに設定していたmargin-bottomの計算ミスの2つでした。
それができていれば本来高さ84pxの#headerなのに、86pxになってしまっていたのでした。

 

[教訓]リセットCSSでimgに対して指定するのは
border: none; と vertical-align:bottom; の2つ!!

 

グローバルナビの文字の大きさ

最初はグローバルナビの日本語フォントサイズは18ptで、ボタン横幅ギリギリでした。

全体的に見ると、詰まった感じがし、ページ上部分が重くなり過ぎているとのことで16ptに下げました。

 

「弊社について」「ABOUT」の間隔

 間隔をもう少し空けた方がよいとのことで、それぞれフォントサイズを下げました。

広告を非表示にする