HTML(ホットミルク)講座

課外授業その1・小分けしてラッピング♪

==教授と助手の吹き出し(?)も併せてお楽しみ下さい。==


 
ちょっと申し訳なさそうな助手「夜分すみません、教授!」



寝ぼけ眼で起きてきた教授「・・ま、まー仕方ないぢゃろ・・ホットミルクの件と言われれば。」



にこっと笑う助手「そうですよね?なんと言っても講義の依頼なんですから。」


ちょっと焦る教授「・・依頼?・・もしかして、葛葉の野、野外塾かの?・・うーーむ・・前回はちょうどぽかぽか日よりで良かったんぢゃが、もう冬ぢゃからのぉ・・寒いんぢゃ。・・できるならぢゃのぉ・・・」



作り笑いの助手「教授・・断れる義理ぢゃないでしょ?それに、野外でなんて言いませんよ。とにかく、早速始めましょう」



こいつ呆けたのか?と思った教授「おいおい、早速と言っても今、夜の11時ぢゃぞ。もう遅いし、それに、外は寒いんぢゃぞ。誰が講義を聞きに来るんぢゃ?」


よくこれでPCやってるなと思った助手「教授・・今から野外でするわけないでしょぉ?インターネットでするんですよ、インターネットで!」



目を丸くする教授「おおーー!その手があったわい!わしとしたことが忘れておったわい。ははははは!・・で、どうやって?」


あきれきっている助手「○○ミーティングでやるんです。」



目を丸くする教授「なるほどなるほど・・確か、お絵かきよし、音声よし、映像よし、画像よしのぢゃな。」



今時それくらい当たり前ですよ、とあきれている助手「そうです。では、お願いします。」


上機嫌の教授「ほいほい、では、早速始めるとしようかの?(なんせ講義の依頼なんて滅多にないからのぉ・・嬉しいのぉ・・。)で、何についてぢゃったかのぉ?」


ため息をつく助手「さっき電話でお話したでしょ?フレームについて、です。」



少し照れている教授「おお!そうぢゃった!そうぢゃった!」



咳払いする教授「ごほん!では、始めますぞ。題は、『小分けしてラッピング』ぢゃ!」
え?と意味が分からず驚く助手「ラ、ラッピング?」
少し意地悪そうな目で助手を見る教授「そうぢゃ。サンドウイッチを入れるバスケット作りぢゃ。」
にこっと笑う助手「フレームですね?」
真剣な教授「そうとも言う。前置きが長かったので、早速ソースといくぞ。」
ため息をつく助手(眠いからだな・・・・。)
真剣な教授「ん?何か言ったかの?」
ごまかし笑いの助手「い、いえ・・それでは、お願い致します、教授!」



ちらっと助手を見る教授「・・・ま、いいか・・。では、下のソースを見てくれたまえへ。まず、ラップでくるむサンドウイッチをフレームで分ける数だけ作っておくのぢゃぞ。これは、左右に分けた場合ぢゃ。で、右側に表示させるページは、nakami.htmlという名前で適当に作っておいてくれ。普通のhtmlファイルでいいぞ。」


左側に表示させるメニューのソース[menu.html]
<html>
<head>
<title>menu</title>
</head>
<body bgcolor="#eee8aa" text="#006400" link="#008000" alink="#00ff00" vlink="#008080">
<table border="0" cellpadding="3">
<tr><th><font size="5" color="#006400"><i><u>Contents</i></u></font></th></tr>
<tr><td><A HREF="リンクするページのファイル名" target="migi">タイトル1</a></td></tr>
<tr><td><A HREF="リンクするページのファイル名" target="migi">タイトル2</a></td></tr>
<tr><td><A HREF="リンクするページのファイル名" target="migi">タイトル3</a></td></tr>
</table>
</body>
</html>
表 示
 
Contents
タイトル1
タイトル2
タイトル3


真剣な教授「これは一応例ぢゃからの。好きに作ってくれたまへ。」



じーっとソースを見ている助手「でも、なぜテーブル?」
真剣な教授「それはぢゃな、段落を変えるだけでは、間が狭すぎる、かといって一行開けたんぢゃ開きすぎると感じた場合、こうすることもできる、という例なんぢゃ。」
じーっとソースを見ている助手「なるほどー。」
真剣な教授border="0"で、枠無しのを作るんぢゃ。で、cellpadding=で、枠線と文字の間隔をきめるんぢゃ。それが、この場合、行間の役割をしておるんぢゃ。」
じーっとソースを見ている助手「なるほどー。」
真剣な教授target="migi"は、migiという名前のフレーム内に表示させるという意味なんぢゃ。好きな名前でいいんぢゃぞ。」
じーっとソースを見ている助手「ふむふむ。」
真剣な教授「で・・・フレームを消して次のページへリンクするときは、target="_top"
新しくウィンドウを開いてそこに次のページを表示させるときは、target="_blank"とするのぢゃ。
target指定を忘れるとそのコンテンツのところに表示されてしまうぞ。」
じーっとソースを見ている助手「ほうほう・・。」
真剣な教授「お次がフレームのソースぢゃ。これは、自分で試してくれたまえ。
あ!分かっておるとは思うが、全部同じディレクトリに入れておいて、開くのは、フレームのファイルぢゃぞ。」

フレームのソース[test1.html]
<html>
<head>
<title>frame</title>
</head>

<frameset cols="22%,78%">
<frame src="menu.html" name="nemu" scrolling="auto" >
<frame src="nakami.html" name="migi" scrolling="auto" >

<noframes>
<body background="huukei2.gif" text="black" link="#006400" alink="lime" vlink="green" >
<center>フレームなしのページにジャンプします。<br>
<href="フレーム使用していないページのファイル名">ここ</a>をクリックして下さい。
</center>
</body>
</noframes>

</frameset>

</html>


真剣な教授「説明も表で行くとしようかの。」

ソース 説 明
<frameset cols="22%,78%"> 指定した%の広さで左右2つに分ける
上下に分ける場合は、colsの代わりにrowsと指定する
<frame src="menu.html"
<frame src="nakami.html"
そのフレームにアクセスした時に表示されるファイル名
name="nemu"
name="migi"
フレームに名前をつける
scrolling="auto" スクロールバーの表示方法の指定
auto:内容の大きさに応じてブラウザが判断
yes:常にバーを表示
no:バーを表示しない
<noframes>
</noframes>
フレームに対応していないブラウザの時表示される内容


やれやれ終わったわいと安心している教授「フレームでいくつにでも分けることはできるが、あんまり分けすぎると重くなるでの。その点も考えるように。」


教授が寝ないで無事終わってほっとしている助手「はーい!分かりました!私は、まず、左右に分けて、右側を上下に分けようと思います。」



大きなあくびをしながら、ソースを表示する教授(終わろうと思ったのに、しかたないのぉ・・。)「その場合のソースは、こんなもんかの。すでに作ったmenu.htmlとnakami.htmlに加えてue-nakami.htmlを作ってから試すのぢゃぞ。」


フレーム3つのソース[test2.html]
<html>
<head>
<title>frame</title>
</head>

<frameset cols="22%,78%">
<frame src="menu.html" name="nemu"scrolling="auto" >

<frameset rows="27%,73%">
<frame src="ue-nakami.html" name="ue" scrolling="auto" marginheight="10" marginwidth="10">
<frame src="nakami.html" name="sita" scrolling="auto" >
</frameset>


<noframes>
<body background="huukei2.gif" text="black" link="#006400" alink="lime" vlink="green" >
<center>ようこそ助手のページへ<br>
何もないですが、ゆっくりしていって下さい。<br>
【メニュー】<br>
<A HREF="リンクするページのファイル名">タイトル1</a><br>
<A HREF="リンクするページのファイル名">タイトル1</a><br>
<br>
</center>
</body>
</noframes>

</frameset>

</html>


大きなあくびをする教授「まー、いろいろ試してみるのもいいぢゃろ。」



教授のサービスに驚いている助手「あ、ありがとうございました、教授!やってみます!」



今にも寝そうな教授これで自分も家へ帰れるとほっとしている助手「それでは、みなさん、また機会がありましたら、お逢いしましょう!
ご意見、ご感想、ご要望などございましたら、お気軽にメール下さい。」




<< 課外授業その1・フレーム(完) >>


前ページへ 【ホットミルク講座】目次へ

【タグ辞典INDEX】 【Html Index】

[ここへジャンプしてきたページに戻る]