インターネット入門講座

ちょっと役立つHTMLテクニック

1．逆ヘアーライン

ヘアーラインは引っ込むだけでは面白くないという方に提案します。
通常のヘアーラインはこのようなものですが、

このように飛び出すようにもできます。

記述方法は、
<table border="1"width="100%"cellspacing="0"><tr><td></td></tr></table>
テーブルタグを応用してます。

2．画像のボーダー

このような画像にリンクを設定すると、

通常このようにボーダーがかかってしまいます。
これを消す方法は、<IMG SRC="image",BORDER="0">とすれば解決します。

これが結果です。

3．擬似クリッカブルマップ

２の項目を応用します。下のイメージで作成します。

この画像をリンク先によって、分割します。

それにリンク指定して通常ならべると、この様になりますが、

BORDER="0"の指定を加えると下のようにきれいにつながります。
<A HREF="- リンク先1 -"><IMG SRC="image/sample11.gif"BORDER="0"></A><BR>
<A HREF="- リンク先2 -"><IMG SRC="image/sample12.gif"BORDER="0"></A>
<A HREF="- リンク先3 -"><IMG SRC="image/sample13.gif"BORDER="0"></A>
<A HREF="- リンク先4 -"><IMG SRC="image/sample14.gif"BORDER="0"></A>

ポリゴンやサークル指定のような複雑な指定はできませんが、組み合わせるとかなりのマップが実現します。でも面倒なことは確かです。

4．アイコンバーの変形

こんなアイコンバーがあるとします。例：<IMG SRC="icon-bar.gif">

長さが足りないまま使っているのを見ますが、HTMLは画像の変換ができます。
IMG SRCの記述にWIDTHとHEIGHTを指定する事によって解決します。

変換例１：<IMG SRC="icon-bar.gif"WIDTH="100%">

変換例２：<IMG SRC="icon-bar.gif"WIDTH="100%"HEIGHT="5">

つまり、どんな画像でもアイコンバーで使用することが可能です。

5．フォームのボタンをリンクボタンに使う

次の記述でリンク先のURLを指定すると、リンクボタンとして使えます。

6．ヘアーラインの断続表示

次の記述で、このようにヘアーラインをとぎれとぎれに表示することができます。