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

完全無料のホームページの作り方講座「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>以外の方法でやろうとすると、スタイルシート(6日目で少し説明します)という少々複雑な技術を勉強しなくてはなりません。
7タグは初心者さんのための講座なので、ここではあえて簡単な<FRAME>をご紹介いたしました。
今後スタイルシートをお勉強していただき、<FRAME>から書き換えていただければと思いますm(_ _)m




Copyright (C) 7tag project dv