ホームページを無料で作りたい方必見！メモ帳で簡単に作れるギャグwebデザイン講座☆ 　
教子先生の！webテク講座！～テクその１～
★フレームを使ったページ
TOP > ～テクその１～
　
　 　 　 　 　 　 　 　
「今日は、フレームを使ったページを教えてあ・げ・ル♪」
「でへへっ！10日でできる？でいちおうできるようになりましたよ～教子せんせぇ～☆色々他のテクを教えて欲しいっす！」
「あら、やるじゃない！めがねくん。その前に、10日でできる？で使ったファイルを使うから、やってない人はわかりずらいかもだけどとりあえずいくわよ�｡」
「ふぁーい☆」
「今日やるのは、フレームで作るページよ☆」
「ふぇ？ハーレムなら知ってますけど。」
「ふふふ。めがねくん面白いわね～ハーレムまではいかないけどおねーさんが、色々教えてあげるから期待してて☆」
「まじっすか～☆興味しんしんッス�｡どきどき…」
「フレームっていうのは、めがねクンもよく見かけるこんな分割されたページのことです。」

こんなページ←クリックしてみてっ★
　 　
「おおー！割れてますね～☆」
「そうなの！こういうページを今回作るわ。とりあえずいくわよ。下の文を書き写してみて★」

<html>
<head>
　　　　<title>メガーネのお部屋。☆</title>
</head>
<body>
</body>
</html>

　 　
「ほーい☆かけました！」
「次に下の文字を追加してみて。」

<html>
<head>
　　　　<title>メガーネのお部屋。☆</title>
</head>
<body>
<frameset cols="140,*">
<frame src="list.html" name="left">
<frame src="top.html" name="right">
</frameset>
 </body>
</html>

　 　 　 　 　 　 　
「ほいほい！コピペしちゃったけどできましたよ～☆」
「ホントは、打って欲しいけどまぁコピペでもいいわ！これを『index.htm』という名で『myhome』と名前を付けたフォルダに保存してね！でも、前の10日でできる？の方で作った『index.htm』を他のフォルダにどけておかないと上書きされちゃうから、気をつけてね★」
「了解ッス！」
「でブラウザで確認してみて」
「おおー！割れてますよー！！」
「でしよ！なんでそうなったのかここで間単にさせてもらうわ」
「ほーい」

■<frameset>～</frameset>…フレームの指定です。
■cols…縦に分割、横に分割したいときはrows
■"150,*"…『140』は左の幅、「*」は全体の画面から左の幅を引いた右ページの幅。
■frame src=xxx.htm"…右と左のページの内容をを読み込むために2つのページを指定してます。
■name…そのぺージの名前です（必須よ！）

　 　 　 　 　
「なんとなくわかったかな？」
「うわっなんか難しいっすね～！頭がと股間がはち切れそうです！」
「うふふ！はち切れるのはまだ早いわよ！横分割したいときは、『rows』で指定よ。また、『rows』="30％,*"ような『％』表示もできるわ。考え方は同じで、左が30％の幅の時もう片方は、70%の幅よ」
「『rows』が分割れで、『cols』が立て割れですね～うーんマイルド。」
「ちょっとわっかったみたいだから次に進むわね！ 左側のフレームページをつくるよ！したの文を書き写してネ！」

<html>
<head>
　　　　<title>メガーネのお部屋。☆</title>
</head>
<body="image/megane.gif">
<font color="blue">
<center>
<a href="top.html"><img src="image/bu_top_ao.gif"></a></br></br>
<a href="profile.html"><img src="image/bu_pro_ao.gif"></a></br></br>
<a href="diary.html"><img src="image/bu_iyan_ao.gif"></a></br></br>
<a href="bbs.html"><img src="image/bu_keijiban_ao.gif"></a></br></br>
<a href="link.html"><img src="image/bu_link_ao.gif"></a></br></br>
</center>
</body>
</html>

　 　
「ほーい！またコピペっちゃいました（笑）」
「書けたら、『list.html』って名前を付けて保存よ★画像が一つ抜けてると思うから、この画像をダウンロードして『image』フォルダに入れてネ♪」

→これ

　 　 　 　 　 　
「入れちゃいました☆」 　
「これで、一応すべてのページができたはずなんだけどこのままブラウザで確認して左のボタンを押すと 左フレームに違うページが右に表示させたい画面がでてきて、崩れてちゃうの。」
「あれれー？なんでですかぁ？ちゃんと入れたのに～」
「うふっ☆なんでかな～？でも大丈夫次のプレイですぐ良くなるわ！」
「どきどき。」
「『list.html』を開いて、次の太字の部分を追加してネ！」

<html>
<head>
　　　　<title>メガーネのお部屋。☆</title>
</head>
<body="image/megane.gif">
<font color="blue">
<center>
<a href="top.html" target="right"><img src="image/bu_top_ao.gif"></a></br></br>
<a href="profile.html" target="right"><img src="image/bu_pro_ao.gif"></a></br></br>
<a href="diary.html" target="right"><img src="image/bu_iyan_ao.gif"></a></br></br>
<a href="bbs.html" target="right"><img src="image/bu_keijiban_ao.gif"></a></br></br>
<a href="link.html" target="right"><img src="image/bu_link_ao.gif"></a></br></br>
</center>
</body>
</html>

　 　 　 　 　 　 　 　 　
「しましたよ～☆」
「ブラウザで確認してみて♪」
「おおおーちゃんと右ページに表示されてるぅ！！」
「そうなの！その追加した『target="right"』なんだけど、めがねクンのお察し道り、リンク先を右フレームに表示させるって意味よ！」
「わーい！これで完成っすね☆」
「まだよ。まだ早いわ！もう少しだけ手直しがあるの。」
「ま、まだだめですかぁ…せ、先生じらさないで下さい！」
「これで完成！って思えるけどまだ『link.html』のページのリンクにさわると同じページ内に表示されちゃうじゃない？ 自分のページが表示されたまま他のページも出せる方法を教えるわ★」
「そんなことできるんすかぁ～」

『target』属性
『target="right"』…右側のフレームページに表示されます
『target="left"』…左側のフレームページに表示されます
『target="_top"』…フレームの分割なくなり表示されます
『target="_blank"』…別のウインドウが開いてリンク先が表示されます

「上の属性を見ればわかるのように、『target』属性は色々使えるのよ★それじゃこの方法を使って『link.html』のページを変更するわネ！下の文のように、『link.html』を開いて『target="_blank"』を追加してみて☆」
「ふぉーい☆」

/省略/
<table border="1" bgcolor="#fff">
<tr><td><a href="http://www.yahoo.co.jp/" target="_blank">
Yahoo!</a></td><td>
/省略/
</body>

　 　 　 　 　 　 　 　
「しました！」
「『target="_blank"』でヤフーのページが別ウィンドウで表示させるようになったはずよ★」 　
「おおー！別の窓が開きました！僕の窓も全開ですっ！」
「そんなに、焦っちゃだめよ☆同じように他のリンク先も『target="_blank"』で指定してみてね♪」
「ほーい☆」
「なんとかついてこれたかな？フレームはこれでおしまいよ★」
「はぁはぁ…えがったっす�｡教子せんせーサイコ－っす☆」
「もっと難しいこと覚えたいなら、こちらでお勉強するのもいいわよ♪」
とほほのWWW入門←知る人ぞ知る、超巨匠のサイトです☆
「ほーい！おぼえるの楽しくなってきたっす！」

これで、また教子先生との距離が一歩近づいた…ざぶーん

topに戻る
10日でできる？ホームページ
1日目| 2日目| 3日目| 4日目| 5日目| 6日目| 7日目| 8日目| 9日目| 10日目|
教子先生の！webテク講座！
～テクその１～| ～テクその2～| ～テクその3～| ～テクその4～|
Copyright (C)2006.01 duyopon
http://www16.plala.or.jp/duyopon_dayo/