専門サイト制作日記08

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

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

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

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

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


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

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

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

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

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

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

ブログから本が生まれました!


「相続を気軽に学べる解説書を」ということで、八王子の行政書士・社労士の井出さん(至誠法務労務サポート代表)と一緒にコツコツと書き溜めたブログが、1冊の本になりました。
 100の題材を「相続」「遺言」「成年後見」「終活」の4章に分け、各タイトルは五七五の川柳形式にしてあります。口語調の解説文が「わかりやすい!」と評判です。

ABOUTこの記事をかいた人

はちおうじ総務相談所の長岡です。

GONZOを名乗りながらも、当たり障りのない記事を書いています。
中小企業の経営に役立つ情報を発信していきたいと思っているのですが……