Mac mini ミニ大作戦！
第8回 目指せ、完全CSSレイアウト
（アイコンメニュー作成編）
現在テキストでリスト表示している左メニューを画像で置き換える。この場合も背景画像として扱うというから驚き。ついでにマウスオーバーで画像切り替えにもチャレンジ。
え？背景扱いですか？
今回は左側にあるテキストで表示されたメニューのアイコン化にチャレンジ。現時点のHTML上では普通のリスト表示になっていて、これを画像で置き換えるんだけど、これまでは<img>タグを用いてアイコン画像をそのまま配置し、そこへリンクを張っていた。まあ、実用的にはそれでも全く問題なくて、むしろそのままの方が手間もかからず都合が良いのだけれど、それではせっかくの企画の意味が失われてしまうので、参考書にある事例をそのままなぞってみる。そこでまた驚いたのだけれど、やはり今回のメニューアイコンも「背景画像」として扱うらしい。背景をリンク領域にするという発想がまた自分にとってかなり新鮮で興味が湧く。では早速。
まずサンプルHTMLの各リスト要素にid属性で名前を付ける。とりあえず自分に分かり易いネーミングにしておくのだけれど、HTMLの修正はこの部分だけ（要所のみ抜粋）。
<ul>
<li id="Macmini"><a href="../../../Macmini/index.html">Mac mini ミニ大作戦！</a></li>
<li id="Movie"><a href="../../../Movie/index.html">映画百本</a></li>
<li id="Radio"><a href="../../../Radio/index.html">放談ラジオ音響系</a></li>
<li id="BBS"><a href="../../../BBS/index.html">BBS放送局</a></li>
<li id="Book"><a href="../../../Book/index.html">読後の一言</a></li>
<li id="Mail"><a href="../../../Mail/index.html">メールの宛先</a></li>
</ul>
 使用するアイコン画像はそれぞれ別個に用意するのではなく、バラにする前の1枚状態で用意。というかバラさない。さらにマウスを置いたとき、アイコンの色が変わるようにするために、変化後の状態もまとめて作成しておく。‥のだそうな。
というのも、CSSでは画像中の表示させたい部分だけを指定することが出来るのだからだそうで、一枚全体を最初に読み込ませておいて、キャッシュですぐ切り替えられるよう考慮された方法らしい。なるほどねえ〜。
そんなわけで上図のような「nav.gif」を作成してみた。それぞれ60×60ピクセルで仕切ってある。
次はCSS
ここからようやくCSSに手を付ける。「#nav」領域、前回のブロック図でいうところの「x」部分に対する振る舞いを指定していく。これまで記述してきたCSSのおしりに追加していく形で、ちまちまタイプしていく。
/*左メニュー
________________________*/
#nav ul {margin: 0,0,0,0px ; padding: 0; list-style: none; }
目立つ変化としてはlist-style:noneで左メニューのリスト部分の●が無くなって、マージン＆パディングの指定で左隅に寄った。普通<ul>によるリストって、段落が一つ下がるんだけど（右に一つずれる）、それを無効にしている。ここは後で希望通りの位置に配置指定していけば良し。
次は<ul>の中の要素である<li>について細かく設定。ここでは新しくdisplayというものを使って、「実際に表示する領域を設定」する。60×60ピクセルでしか表示しないよ、ってこと。
/*左メニュー
________________________*/
#nav ul {margin: 0,0,0,0px ; padding: 0; list-style: none; }
#nav li, #nav a {display: block; width: 60px; height: 60px; }
なるほど。で、ここで試しにこの四角領域からはみ出すほどの文章を追加してみたら、どんどんはみ出して表示された。え〜厳密に切り抜きされるワケではないのか？。果たしてうまく行くんだろうか？
リンク部分に画像を置いてみる
画像を置くのはリンク部分<a>要素の背景。ここで先に名前を付けておいたリンクidそれぞれに対する画像の表示領域をピクセルで指定。
/*左メニュー
________________________*/
#nav ul {margin: 0,0,0,0px ; padding: 0; list-style: none; }
#nav li, #nav a {display: block; width: 60px; height: 60px; }
#nav a {background: url(nav.gif) no-repeat }
#Macmini a {background-position: 0 , -0px}
#Movie a {background-position: 0 , -60px}
#Radio a {background-position: 0 , -120px}
#BBS a {background-position: 0 , -180px}
#Book a {background-position: 0 , -240px}
#Mail a {background-position: 0 , -300px}
この状態で挙動を確認してみる。
ありゃりゃ、予想に反してなんかとんでもない状況に。しばらく試行錯誤して実験していたら、ポジションの領域指定の箇所にカンマ「,」があるのがいけなかったらしい。なんだそれ。
/*左メニュー
________________________*/
#nav ul {margin: 0,0,0,0px ; padding: 0; list-style: none; }
#nav li, #nav a {display: block; width: 60px; height: 60px; }
#nav a {background: url(nav.gif) no-repeat }
#Macmini a {background-position: 0 -0px}
#Movie a {background-position: 0 -60px}
#Radio a {background-position: 0 -120px}
#BBS a {background-position: 0 -180px}
#Book a {background-position: 0 -240px}
#Mail a {background-position: 0 -300px}
そういうわけでせっせとカンマを削除。普通に考えるとカンマ必要な感じするけどなあ〜。まあ結果オーライで。
さらに細かくアレコレ指定
さらにマウスオーバーしたときの切り替え部分の画像領域も指定。
/*左メニュー
________________________*/
#nav ul {margin: 0,0,0,0px ; padding: 0; list-style: none; }
#nav li, #nav a {display: block; width: 60px; height: 60px; }
#nav a {background: url(nav.gif) no-repeat }
#Macmini a {background-position: 0 -0px}
#Movie a {background-position: 0 -60px}
#Radio a {background-position: 0 -120px}
#BBS a {background-position: 0 -180px}
#Book a {background-position: 0 -240px}
#Mail a {background-position: 0 -300px}
#Macmini a:hover {background-position: 60 -0px}
#Movie a:hover {background-position: 60 -60px}
#Radio a:hover {background-position: 60 -120px}
#BBS a:hover {background-position: 60 -180px}
#Book a:hover {background-position: 60 -240px}
#Mail a:hover {background-position: 60 -300px}
この状態で挙動を確認してみる。
がははは、変わる変わる。おもしろー。しかも用意した画像が1ピクセルずれてたらしく、マウスを置くとペコンとアイコンが動く。これはこれでファニーなので、とりあえずそのままにしておく。今はマウスポインタを上に置いた時に変化するa:hoverだけを指定してるけど、この他にマウスを押している状態を指定するためのa:activeとか、訪問済みを表すa:visitedなどのオプションがある。
しかし背景画像なのにちゃ〜んとリンク動作するんですな。驚きです。それが分かったら、上に乗っかっているテキストが邪魔なので消してしまう。しかしHTML上でホントに消すとリンク自体の存在（文章構造上の存在）が無くなってしまうので「モニタ画面上では見えないところに飛ばしてしまえ」と参考書に書いてある。ええ、飛ばしてしまいましょう。
/*左メニュー
________________________*/
#nav ul {margin: 0,0,0,0px ; padding: 0; list-style: none; }
#nav li, #nav a {display: block; width: 60px; height: 60px; }
#nav li {text-indent: -9999px; /*←画面の外へ文字を飛ばしている*/ }
#nav a {background: url(nav.gif) no-repeat; text-decoration: none }
#Macmini a {background-position: 0 -0px}
#Movie a {background-position: 0 -60px}
#Radio a {background-position: 0 -120px}
#BBS a {background-position: 0 -180px}
#Book a {background-position: 0 -240px}
#Mail a {background-position: 0 -300px}
#Macmini a:hover {background-position: 60 -0px}
#Movie a:hover {background-position: 60 -60px}
#Radio a:hover {background-position: 60 -120px}
#BBS a:hover {background-position: 60 -180px}
#Book a:hover {background-position: 60 -240px}
#Mail a:hover {background-position: 60 -300px}
text-decoratinで文字の装飾を排除してるんだけど、説明によるとこれはFirefoxの挙動不審対策として追加するとベターとのこと。この状態で確認してみる。
これでほぼ意図通りの表示・動作が出来た。ところでこの作業中、思い通りの動作が起きなかったり、まったく動かなくなったりして、キャッシュのせいかとミニを再起動したりとかなり試行錯誤した。さらにGoLive CSの挙動がおかしくなって突然落ちたり、とりあえずこの前バージョンはCSS編集に向いてないのかも、と思った。やはりDreamweaver 8に乗り換えたいけど、あれは高い‥。会社も一緒になったことだし、GoLiveユーザーの優待クロスアップグレードを設定して欲しい。また関係ないとは思うけれど、最初に<li>のidの名前を付ける際、大文字を入れていたので小文字に変更しておいた。
左メニューはまだセンタリングとか、アイコンの微妙な位置調整とか、やることがまだまだあるけれど、大体これで外観は現行テーブル組レイアウトに近づいた感じ。改めて思うのは、CSSの指定ってとっつきにくいところもあるけれど、昔、スペーサー役の画像を用意して位置調整をしていたことを考えるとスマートだと思う。
ところで今回参考にしている書籍。非常に有益なテクニックが掲載されていてとても勉強になるのだが、誤植もかなり多い。サンプルを鵜呑みにして何も考えずコピーするといつまでたっても完成しない。タイプしつつ、「あれ？この記述おかしいんじゃない？」とか「あれ？1行足りないんじゃ‥」とか思ったらガンガン実験すべきですね。そんなわけで、当企画の記述内にもかなり間違いが紛れ込んでいるのは確実なんだが、自分ではま〜ったく気付かないのが怖い。
|
