8.1 リンクで内容のあるホームページ作り
ホームページの特長は、リンクをクリックすることによって新しい情報にアクセスできることです。ホームページはリンクで成り立っていると言っても過言ではありません。リンクを使いこなして、内容のあるホームページを作りましょう。
8.1.1 別のウインドに表示する
補足説明を、本文にそのまま記載すると、説明を見なくても解る人には煩わしいものです。そのような時に、説明を別のファイルに記述しリンクすると、すっきりしたページになります。
しかし、説明を見る度に画面が切替わってしまうのも、流れが途切れて理解し難くなりますね。そんな時、説明だけ別のウィンドに表示すると流れが中断せず、理解し易いページ作りができます。
それには、次の3つの方法があります。
- 標準サイズのブラウザで表示する。
- サイズやスタイルを指定して表示する。(JavaScriptを使う)
- 同上(リンクが多い場合に推奨)
i.標準サイズのブラウザで表示する
リンクタグに次の属性を指定します。
<A HREF="リンク先URL" TARGET="ウインド名">〜</A>
ウインド名は新しく開くウインドの名前なので、なんでもよい(wind01等)のですが、既にその名前のウインドが開いている場合はそちらに表示されるので、後ろに隠れている場合があります。(同時に複数のホームページを見ていて、他のホームページで同じ名前を使っている場合に起きる可能性があります。一般的な名前は使わない方がいいかもしれません。)
TARGET="_blank"とすると"常に"名前の無い新しいウインドが開きます。
ii.サイズやスタイルを指定して表示する
JavaScriptを使うと、新しく開くウィンドのスタイルを指定することができます。ただしJavaScriptに対応していないブラウザでは見ることができないので注意しましょう。
HTMLは次のように記述します。
<HEAD><TITLE>‥‥‥</TITLE>
<SCRIPT TYPE="text/javascript">
<!--
function newwin() {
window.open("リンク先URL","ウインド名","スタイル指定")
}
//-->
</SCRIPT>
</HEAD>
<BODY>
‥‥‥
<A HREF="JavaScript:newwin()">リンク先へ</A>
</BODY>
</HTML>
スタイルを指定しなければ標準サイズのブラウザが開きます。スタイル指定の詳細は
ここをクリック。
<解説>
<HEAD>〜</HEAD>部分で
関数newwin()を定義し、本文のリンクしたいところでその関数を実行するようにしています。(関数名newwinは好きな名前を付けます)
リンクのためにクリックするところは A タグで作成すれば通常の文字で表現できます。また画像を貼り付けてもいいですね。
クリック部を釦にしたい場合は、<FORM>タグを使います。HTMLは次のとおりです。
<FORM>
<INPUT TYPE="button" VALUE="リンク先へ" onClick="newwin()">
</FORM>
iii.サイズやスタイルを指定して表示する(リンクが多い場合に推奨)
<HEAD>〜</HEAD>間に次のように記述します。
<SCRIPT TYPE="text/javascript">
<!--
var optionString = "スタイル指定";
//-->
</SCRIPT>
リンク箇所に次のように記述します。
<A HREF="javascript:void(0);" onClick="window.open('リンク先URL','ウインド名',optionString)">リンク先へ</A>
とっておきのテクニック!
指定したウインド名のウインドが既に開いている場合には、後ろに隠れて見えません。また、既に開いていなくても伝送路の混雑によりすぐに表示されなくてマウスを操作してしまうと、タイミングによっては新しく開いたウインドがアクティブにならず隠れている場合があります。そのような現象を避ける方法として、"リンク先URL"に次の記述を追加します。
<HEAD>………
<SCRIPT TYPE="text/javascript">
<!--
window.focus();
//-->
</SCRIPT>
</HEAD>
8.1.2 釦からのリンク
ページデザイン上、釦を使うとつい押したくなりなすね。そこで、是非見てもらいたいページへのリンクには釦を使うのも一案です。このホームページでも、サンプルページへのリンクには釦を使っています。
釦は<FORM>タグで作ることができます。その釦を押した時にリンク先に飛ぶにはJavaScriptを使います。次の通りです。
<FORM>
<INPUT TYPE=button VALUE="リンク文字" onClick="JavaScript:location.href=
'リンク先URL'">
</FORM>
下の例は、リンク文字は「8.2へ」、リンク先URLは「#820」(このページの<A NAME="820">を示す)です。
8.2 ブロックにまとめて配置を考える
8.2.1 色を付けて目立たせる
i.色帯の見出し
<DIV STYLE="background:色1;color:色2;width:100%;padding:n;margin-left:m;font-weight:bold">見出し</DIV>
この様に記述すると、色1の帯に色2で見出し文字が表示されます。
- nは文字の上下のスペースをピクセル単位で指定します(1〜5程度)。この項目を削除すればスペースは0です。
- mは左端から帯までの余白をピクセル単位で指定します。この項目を削除すれば左端から色帯が表示されます。
- font-weight:boldを削除すれば文字は通常の太さになります。
とっておきのテクニック!
色帯の左右に文字を書くには
<TABLE WIDTH=100%><TD BGCOLOR=fuchsia>
<TABLE><TD WIDTH=90%><B>見出し</TD>
<TD ALIGN=right>2000/02/01</TD></TABLE>
</TABLE>
ii.色ブロックに文字を書く
<DIV STYLE="background:色1;color:色2;width:L;height:H;padding:n;position:relative;left:x;top:y">
文章
</DIV>
この様に記述すると、色1のブロックに色2で文字が書けます。
- LとHでブロックの大きさをピクセルで指定します。
- nでブロック内部の余白を指定します。
- x,yでブロックの左端からと上からの位置を指定します。
とっておきのテクニック!
ブロックをたくさん作り、x、yの値を色々変えると、文章を色々配置できます。重なった時上に表示したいブロックにz-index:n(nは数字)を追加します。数字の大きいほど上に表示されます。
8.2.2 表・画像・文字の配置を考える
TABLEを使って各セルに表・画像・文字を配置すると、だれが見てもほぼ意図した通りに表示されます。
i.表を複数横に並べて説明を付ける
複数の表は、通常縦に並びます。簡単な表は横に並べて表示したいですね。そんな時は次のようにします。
すなわち、表の中に表を入れ、外の表は罫線を表示しない(BORDER=0または記述しない)ようにします。(ここでは説明のため、外の表の罫線も表示しました。)
このとき注意すべきことは、中の表は</TR>、</TD>は省略しないことです。ネットスケープではうまく表示できなくなるようです。
すなわHTMLは次のように書きます。
<TABLE>
<TR><TD><TABLE BORDER=1>表1の内容</TABLE>
<TD><TABLE BORDER=1>表2の内容</TABLE>
<TR><TD>表1の説明
<TD>表2の説明
</TABLE>
(外側の表の</TR></TD>は省略しても正常に表示されます。)
ii.画像と文字を並べる
この様なアイコン | | を作ってみましょう。 |
上の様な例もTABLEの応用で可能です。
すなわち罫線を表示すれば、次の様になります。
この様なアイコン | | を作ってみましょう。 |
8.3 フレームでクリックの手間を減らす
ホームページ作りが進んでくると、色々なページが増えてその案内のための目次のページも必要になりますね。すると見る人はあるページを見終わって別のページに行く時に目次のページに戻ってから別のページに行くことになります。
そんな不便を解消してくれるのがフレーム機能です。フレームは画面を分割して夫々の画面に別のHTMLファイルを表示させる機能です。従って、一つの画面に目次を表示しておき、別の画面に本文を表示すれば、常に表示されている目次をクリックして本文の好きなページを表示させることができます。
このホームページもフレーム機能を使用しているので、どんなものかは既にわかっていると思いますが、簡単なサンプルを見ながら説明しますので。右の釦をクリックして下さい。
8.4へ