« 復刊・夜想　第2号／特集#ドール | メイン | スプラッシュページ »

2004年10月19日

CSSのお勉強（その4）

　というわけで4回目です。こんな風になりました。詳しくはソースを見ていただければわかることなのですが、それなりに説明いたします。

◆右下サイト名
　単にgifの画像をつくって挿入しただけです。この画像はindexページ（一番最初に表示されるべきページ）へのリンクともなっています。
　前回はmargin-top :45pxとしてメニューの部分を下にずらしていたのですが、この画像が入ったので、わざわざずらす必要がなくなりましたのでmargin-top :0pxとなっています。

◆メニュー
　ここが今回の最大の山です。
・ロールオーバー
　マウスのポインタが上に乗る、もしくはクリックされることによって、その画像が変化する仕組みをロールオーバーといいます。これがテキストであればCSSのhoverを利用して、マウスが乗ると色を変えることが可能です。現在のCCでもこの方法を利用しています。http://www9.plala.or.jp/c_c/top.htmのメニュー部分は、マウスを乗せると「赤」に変わります。こうやってマウスへの反応を視覚化しているのです。
　今回の下部メニューはgif画像を利用しましたので、基本的にCSSではロールオーバー動作をさせることができません（裏技的に背景にしてという手はある）。そこでJavaScriptで実現させるのですが、わたくしJavaScriptさっぱりわかっておりません（おい）。
　ということなので、この部分は以前買ったDreamweaver4のナビゲーションバーという機能で実現しております。もちろん画像はFireworks4で作っておりまして、Dreamweaver4/Fireworks4 Studio様々です。発売当時18.000円で売っていたとは思えないパフォーマンスのよさであります。

・画像間隔の調整
　本来、単にFireworksを利用してロールオーバーをさせると、その部分はtableを利用したレイアウトになり、スペンサーgifなども生成されます。http://www.ashrization.com/の上部メニューは正にこれです。初回表示のときに歯抜けで表示され、それが埋まっていくので、それとわかるでしょう。
　CCではtableによるレイアウトを使用していません。そうなるとFireworksで一気にロールオーバー部分を作ってDreamweaverに読み込むということができず、一つ一つ部品を作ってからDreamweaverのナビゲーションバーの作成時に読み込んでいるわけです。
　一つ一つ画像を作るといいましたが、当然ながら、その画像はぎりぎりまで削る必要があります。なぜなら画像の容量は、一つ一つの大きさは、たいしたものでなくとも集まれば、サイトスペースの容量を無駄に消費してしまいます。また、ブラウザでの表示の際に、サーバから転送される情報量も多くなってしまうので、表示が遅くなりかねないのです。ブロードバンド化が進んでいるといっても減らせる無駄は減らすに限ります。
　そうすると、そのまま画像を並べてしまうと、えらく詰まった感じになってしまいます。test3-1は、そのまま並べたものです。最初が大文字になっていることと、ロールオーバーのお陰で、何とか画像の区切れがわかりますが、見た目には連続した単語に見えてしまいます。
　tableレイアウトであれば、tableの横幅を調整したり、穴埋めのスペンサーgif画像（背景色と同じ色の画像）を利用することで空間を空けるわけですが、意地でCSSで実現するのがCCです。そこで利用したのがletter-spacingプロパティです。本来はテキスト文章の文字間隔を調整するプロパティなのですが、画像に利用にも利用できます。

・右寄せ
　text-alignのプロパティでrightにしていしいますが、それだけでは右端にぴったりくっついてしまうので、padding-rightで右端に少し空間をあけています。言うまでもないと思いますがこれをmarginでやると背景がない空間ができてしまいます。なのでpaddingでやるわけですな。

　とりあえず現状はこんなところとなっております。後は文章に関する設定（フォントの大きさ、行間など）と背景関連の部分を固めれば、ほぼ完了でしょうかね。

　次回は、スプラッシュページについて考えてみたいと思います。

投稿者 黒川鍵司 : 2004年10月19日 09:54

トラックバック

このエントリーのトラックバックURL:
http://www.ashrization.com/x/admin/mt-tb.cgi/35

コメント