HTML(ホットミルク)講座
課外授業その1・小分けしてラッピング♪
==教授と助手の吹き出し(?)も併せてお楽しみ下さい。==
「夜分すみません、教授!」
「・・ま、まー仕方ないぢゃろ・・ホットミルクの件と言われれば。」
「そうですよね?なんと言っても講義の依頼なんですから。」
「・・依頼?・・もしかして、葛葉の野、野外塾かの?・・うーーむ・・前回はちょうどぽかぽか日よりで良かったんぢゃが、もう冬ぢゃからのぉ・・寒いんぢゃ。・・できるならぢゃのぉ・・・」
「教授・・断れる義理ぢゃないでしょ?それに、野外でなんて言いませんよ。とにかく、早速始めましょう」
「おいおい、早速と言っても今、夜の11時ぢゃぞ。もう遅いし、それに、外は寒いんぢゃぞ。誰が講義を聞きに来るんぢゃ?」
「教授・・今から野外でするわけないでしょぉ?インターネットでするんですよ、インターネットで!」
「おおーー!その手があったわい!わしとしたことが忘れておったわい。ははははは!・・で、どうやって?」
「○○ミーティングでやるんです。」
「なるほどなるほど・・確か、お絵かきよし、音声よし、映像よし、画像よしのぢゃな。」
「そうです。では、お願いします。」
「ほいほい、では、早速始めるとしようかの?(なんせ講義の依頼なんて滅多にないからのぉ・・嬉しいのぉ・・。)で、何についてぢゃったかのぉ?」
「さっき電話でお話したでしょ?フレームについて、です。」
「おお!そうぢゃった!そうぢゃった!」
「ごほん!では、始めますぞ。題は、『小分けしてラッピング』ぢゃ!」
「ラ、ラッピング?」
「そうぢゃ。サンドウイッチを入れるバスケット作りぢゃ。」
「フレームですね?」
「そうとも言う。前置きが長かったので、早速ソースといくぞ。」
(眠いからだな・・・・。)
「ん?何か言ったかの?」
「い、いえ・・それでは、お願い致します、教授!」
「・・・ま、いいか・・。では、下のソースを見てくれたまえへ。まず、ラップでくるむサンドウイッチをフレームで分ける数だけ作っておくのぢゃぞ。これは、左右に分けた場合ぢゃ。で、右側に表示させるページは、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> |
表 示 |
「これは一応例ぢゃからの。好きに作ってくれたまへ。」
「でも、なぜテーブル?」
「それはぢゃな、段落を変えるだけでは、間が狭すぎる、かといって一行開けたんぢゃ開きすぎると感じた場合、こうすることもできる、という例なんぢゃ。」
「なるほどー。」
「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・フレーム(完) >>