専門サイト制作日記08

外観について、まだやるべきことがありました。
 
まずは、ナビゲーションバーの位置を絶対値で指定してみることに。
 


上の画像を基準にして、そこから5px下げていたものを……
 


画面の上端から60px下げる指定に変更します。
 


二段目のナビが隠れてしまいました。
 
どうやら、絶対値で指定したメインナビを無視して、その上にある画像を基準にしてしまうようです。ためしにメインナビをさらに下げてみると……
 


突き抜けました。
 
二段目のナビも絶対値で指定すると本文がずれ、それも指定するとフッターがずれてしまいます。本文の高さは決まっていないので、フッターを絶対値で指定することはできません。解決策を考えるのが面倒だったので、けっきょく絶対値での指定は諦めてしまいました。
 
ためしに要素を組み替えてみたものの、Firefoxでの問題は解決しないままでした。こちらも諦めます。
 


 
ナビバーは初期の状態に戻しました。IEは本気で無視するつもりだったのですが、PNGの画像とCSSで指定した画像が並ぶとなんとなく違和感があったもので。
 


角がちょっと違うのでしょうか……。
 
 
あとは表のデザインも決めておきました。
 


基本的に、このサイトで使われているものと同じです。最上段の色は業種によって変えようと思い、485行目以降で指定しています。
 
並べてみるとこんな感じに。
 


左上にあるのは、線のないパターンです。
 
 
さらに、会話形式で解説することも考えて、ふきだしを作ってみました。
 


これは右側のふきだしです。左側のものを作りたい場合は、枠で囲んだ部分を入れ替えます(”after”なら”before”)。ちなみに、赤枠の合計がゼロにならないと、ふきだしを構成する三角と四角がずれてしまいます。
 
できあがりはこちら。
 


 
今度こそ外観の設定はほぼ終了です。いよいよここからが本番ですね。
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です