〜デザインのための小技集〜




◆透過・半透明化

"IFRAME"の項でも書いたようにstyleを使ったTABLEやIFRAMEの半透明化はNNでは無効になります。
ということでそれなら背景にあらかじめ半透明のオブジェを描けばOKです。このサイトの様に完全に固定している場合のみですが。
他には透明+1色で作った透過Gifを背景に利用する方法があります。あと、TABLEの場合ならレイヤーを使うという方法もあるようです。




◆画像リンク

このサイトは各ページのいろいろな部分にリンクを貼っています。全て背景の上にTABLEを組み、さらに下の絵と会う位置に透明Gifを置いてそこにリンクを貼っています。
オブジェ一つずつを画像にするよりデータは増えてしまいますが、このサイトの場合使っている色数が少ないのでそれほど変わりません。


でも考えてみるとTABLEで細かくセル分けしなくてもイメージマップの方が簡単かも、、、ということでイメージマップが簡単に作れるソフトを紹介。
フリーソフト:ClientSIdeImageMapEditor




◆常に中央に

このサイトはブラウザに対して常に真ん中に表示されてます。このやり方について。


<BODY leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%" HEIGHT="100%"> <TR><TD valign="middle">


<TABLE ALIGN="center">中略</TABLE>


</TD></TR></TABLE>


最初のBODYでは空白の設定をしています。なくても可。
次のTABLEでブラウザ表示部分全体を囲みます。valignをmiddleにすることで上下の中央に内容が表示されます。
そして次の太字部分である、内側のTABLEのalignをcenterにすることで左右の中央になります。
このTABLE内に書いた内容はTABLEと共に移動するので常に画面の中央になります。
※TABLEで画面全体を囲むと、中の内容を全て読み込むまで何も表示されない、というhtmlになるのでおすすめはしません。大量のテキストや絵が表示されるようなページでは特に使わない方がいいです。