◆半歩進んだＨＴＭＬ
１．リンク元へ戻る
２．子ウインドを上手に使う
３．クリッカブルマップを使う
４．リストで見易いページを作る
５．フレームを使う
一歩進んだホームページを作りたい方は、HTML事例集へ
　
★１．リンク元へ戻る
　複数のページから「共通」ページにリンクを張っている場合、「共通」ページからリンク元へ戻るにはブラウザの「戻る」ボタンを使います。「共通」ページの中に「元に戻るリンク」を作るとスマートですね。次のようにします。

<A HREF="JavaScript:history.back()">［戻る］</A>

　［戻る］の文字を工夫したり、画像にすればよりスマートになります。FORMタグを使うとボタンができます。

<FORM><INPUT TYPE=button VALUE="　戻る　" onClick="self.history.back()"></FORM>

ブラウザがJavaScriptに対応している必要があります。
ページのトップへ
　
★２．子ウインドを上手に使う
　ちょっとした説明を、小さな別のウインドに表示すると分かり易くてスマートですね。サンプルを見てみましょう。
　これを実現するには、リンク箇所に次のように記述します。

<A HREF="JavaScript:void(0)"
onClick="window.open('リンク先ＵＲＬ','ウインド名','スタイル指定')">
リンク先へ</A>

　同じスタイル指定で複数のリンクを開く場合は、<HEAD>〜</HEAD>間に次のように記述し、

<SCRIPT LANGUAGE="JavaScript">
<!--
newStyle1 = "スタイル指定";
-->
</SCRIPT>

リンク部分に、次のように記述します。

<A HREF="JavaScript:void(0)"
onClick="window.open('リンク先ＵＲＬ','ウインド名',newStyle1)">
リンク先へ</A>

  • newStyle1は好きな文字列で良いですよ。但し、ヘッダ部とリンク部で同じにします。
ページのトップへ
　
★３．クリッカブルマップを使う
　画像上の特定の場所をクリックすると別のページにリンクするのが、クリッカブルマップです。先ず、サンプルを見てみましょう。

これを実現するＨＴＭＬは次のとおりです。
<IMG SRC="画像ファイル名" USEMAP="#linkmap">
<MAP NAME="linkmap">
<AREA SHAPE=rect COORDS="x1,y1,x2,y2" HREF="リンク先ファイル名">
<AREA SHAPE=circle COORDS="x,y,r" HREF="リンク先ファイル名">
<AREA SHAPE=polygon COORDS="x1,y1,x2,y2,x3,y3" HREF="リンク先ファイル名">
</MAP>
  • <IMG>タグで画像を表示させます。
  • USEMAP="#linkmap",MAP NAME="linkmap"：画像に名前を付けます。複数ある場合に区別できます。
  • SHAPE=rect：四角形の範囲を指定します。対角にある２点(x1,y1),(x2,y2)の座標で指定します。
  • SHAPE=circle：円形の範囲を指定します。中心(x,y)座標と半径(r)で指定します。
  • SHAPE=polygon：多角形の範囲を指定します。各頂点(x1,y1),(x2,y2),(x3,y3)…座標で指定します。
  • 座標は画像の左上を(0,0)とし、そこからのピクセル数で表します。
ページのトップへ
　
★４．リストで見易いページを作る
　複数の項目を箇条書きする場合、リストを使うときれいに項目が並びます。次のとおりです。

表示結果ＨＴＭＬ
  • scrollbarsでスクロールバーが表示されます。
  • toolbarでツールバーが表示されます。
  • resizableを追加するとウインドサイズが変更できます。
  • left=n,top=mを追加するとデスクトップ上の表示位置が指定できます。
<UL>
<LI>scrollbarsでスクロールバー‥‥
<LI>toolbarでツールバーが表示‥‥
<LI>resizableを追加するとウイン‥‥
<LI>left=n,top=mを追加するとデ‥‥
 </UL>

<UL TYPE=circle>（square）も試してみましょう。

  1. scrollbarsでスクロールバーが表示されます。
  2. toolbarでツールバーが表示されます。
  3. resizableを追加するとウインドサイズが変更できます。
  4. left=n,top=mを追加するとデスクトップ上の表示位置が指定できます。
<OL>
<LI>scrollbarsでスクロールバー‥‥
<LI>toolbarでツールバーが表示‥‥
<LI>resizableを追加するとウイン‥‥
<LI>left=n,top=mを追加するとデ‥‥
 </OL>

<OL TYPE=A>（a、I、i）も試してみましょう。


ページのトップへ
　
★５．フレームを使う
　フレームを使うと、画面を分割して夫々に異なったＨＴＭＬファイルを表示できます。従って、片方にメニュー画面を表示しておき、他方にメニューをクリックした時にクリックした内容を表示することができます。

　下のリンクをクリックしてみましょう。

ページのトップへ

HOMEページへジャンプ