*フレーム*・・・の続き

完全無料のホームページの作り方講座「7タグ」！がんばっていきましょ～

2.<A HREF="">のtarget属性

さっき気づいた方も多いと思いますが、
今のままでは、menu.htmlのリンクボタンをクリックしたとき、切ないことになります。

「profile」をクリックすると、こうなるわけですね・・・(ToT)↓

リンク先が、狭いほうに表示されちゃうのです。

つまり、「どっちのフレームに表示するか」っていうのを指定しないといけないんです。
指定しないと、自フレームに表示してしまいます。

今一度、「menu.html」を開いてください。
<A HREF="">に、target="○○○"という属性をつけていきます。

target="○○○"の"○○○"には、フレーム名を書きます。
さっき、top.htmlのほうのフレームには「contents」という名前をつけましたね。

<HTML>
<HEAD>
    <TITLE>ななたぐのへや</TITLE>
  </HEAD>
  
  <BODY bgcolor="#B0C4DE" background="image/wall.gif">
      <CENTER>
      <A HREF="top.html" target="contents"><IMG SRC="image/top.gif" border=0></A><BR><BR>
      <A HREF="profile.html" target="contents"><IMG SRC="image/profile.gif" border=0></A><BR><BR>
      <A HREF="diary.html" target="contents"><IMG SRC="image/diary.gif" border=0></A><BR><BR>
      <A HREF="bbs.html" target="contents"><IMG SRC="image/bbs.gif" border=0></A><BR><BR>
      <A HREF="link.html" target="contents"><IMG SRC="image/link.gif" border=0></A><BR><BR>
      <A HREF="mailto:sample@sample.xx"><IMG SRC="image/mail.gif" border=0></A>
      </CENTER>
  </BODY>
</HTML>

これでOK！
ブラウザで確認してください。
※今開いてる「index.html」を「更新」するだけでOKです。

さーて、これでもう安心・・・しないでください！！
もうひとつ問題が残っています。w(゜o゜)w
「リンクのページ（link.html）」です。
リンクのページの「Yahoo!JAPAN」をクリックすると・・・↓

当然、こうなってしまうわけです。。。

大丈夫、ちゃんと対策があります！
実はtarget="○○○"は、フレームしか指定できないわけではありません！
次のふたつを見てください。

target="_top"・・・フレームをつなぎ合わせて表示します。
target="_blank"・・・別のウィンドウを開いて表示します。
※「_（アンダーバー）」に注意してください。-（ハイフン）じゃありません。
アンダーバーはたいていのキーボードで、「Shift」＋「ろ」で出てきます。

では、テキストエディタにて「link.html」を修正しましょう！

<HTML>
  <HEAD>
    <TITLE>リンクのページ</TITLE>
  </HEAD>

  <BODY bgcolor="pink" text="purple">
  <center><h1>リンク</h1></center>
  <A HREF="http://www.yahoo.co.jp/" target="_top">Yahoo!JAPAN</A>・・・検索サイト。
  （以下略）

たまに、これをしないで、リンク先をフレーム内に表示してしまうサイトを見かけます。
気をつけましょうね(^-^)


※フレームの今後について※

たったいま作っていただいた<FRAME>ですが、
実は、あまり推奨されていません。
今後、使えなくなる可能性が高いテクニックのひとつです。

「じゃあなんで作らせたんだよっ！（｀□´*）」って感じですよね・・・
スミマセンm(_ _;)m

実は、このようにページを縦割り・横割り・自由自在にレイアウトすることは、ホームページのデザインにとても大切なことです。
これを<FRAME>以外の方法でやろうとすると、スタイルシート（６日目で少し説明します）という少々複雑な技術を勉強しなくてはなりません。
７タグは初心者さんのための講座なので、ここではあえて簡単な<FRAME>をご紹介いたしました。
今後スタイルシートをお勉強していただき、<FRAME>から書き換えていただければと思いますm(_ _)m



Copyright (C) 7tag project dv