| ページを分割なかなか便利 |
フレームとDTD宣言・早引きリンク 1.フレーム 2.フレームをセットするために 3.フレーム内でのリンク 4.インラインフレーム 5.DTD宣言と文字コード |
HTML入門 | HTML頻出タグ一覧 |
|---|---|---|---|
| レイアウトについて | ブラウザについて | ||
| CSS入門 | CSS頻出プロパティ | ||
| 立ち上げ用意 | サイト立ち上げ用意 | ||
| はじめに | 玄関へ |
１．フレーム
フレームとは何ぞや？
簡単に言ってしまえば、一画面に複数のページを表示することです。
例えば画面の左側にメニューやリンクを表示させたまま、右側に表示したページをスクロールしたり、または別のページを新しく表示させることができます。
メニューが動かないということで、複数のページへのリンクを容易にするという利点がありますが、色々と気をつけないといけないこともあるのでご注意下さい。
２．フレームをセットするために
フレームを用いたWebページを作成するには、最低3つのHTMLファイルが必要となります。まず2つ、HTMLファイルを作成してください。ファイル名は何でもいいですが、英数小文字でつけてくださいね。
それでは、フレームを指定するページを作成していきましょう。一気に基本形をご紹介します。
<html>
<head>
<title> </title>
</head>
<frameset cols="数値,*" border="数値">
<frame src="+++.html" name="abc" nosize scrolling="auto">
<frame src="&&&.html" name="def" nosize scrolling="auto">
<noframes>
フレーム非対応のブラウザをご使用の方は、<a href="%%%.html">こちらへ</a>
</noframes>
</frameset>
</html>
順を追っていきましょう。
<frameset cols="数値,*" border="数値">
フレームをセットする宣言です。
ここでは属性にcolsを使っていますが、他にrowsがあります。それぞれは
cols="x,y"：横に画面を分割。ｘとｙには数値が入り、それで分割する幅を設定する。片方を設定すれば十分なので、もう一方は*でも可。
rows="x,y"：縦に画面を分割。ｘとｙには数値が入り、それで分割する幅を設定する。片方を設定すれば十分なので、もう一方は*でも可。
border="数値"：分割されたページの境界線の太さを設定します。線を出したくなかったら、0を入力してください。
あ、この境界線の色も指定できます。
bordercolor="色名 or カラーコード"：境界線の色を指定します。
と、なります。
では、次にそれぞれのフレームに表示するHTMLファイルを指定します。
<frame src="+++.html" name="abc" noresize scrolling="auto">
<frame src="&&&.html" name="def" noresize scrolling="auto">
先に書かれたほうが、例えばこのソースならばcols="x,y"のｘのページに表示されます。後で指定したほうは、もちろんｙになります。
では、それぞれの属性を。
name="値"：分割したページを区別するための名前を付けます。
noresize：フレームの幅を変更でき内容にします。変更を可にする場合は、書かなくていいです。
scrolling="値"：値には「auto」・「yes」・「no」が入り、それぞれ「自動」・「可能」・「不可」となります。「no」にすると例えページが一画面に収まらなくともスクロールできないことになってしまうので、「auto」にしておくのが無難ですよ。
<noframes>何らかの文章や対策</noframe>
以前のブラウザの中にはフレームをしようできないものもあります。そのようなブラウザのために、ここに案内を書いておきます。
まぁ最近のブラウザはフレーム対応なので必要ないとも思……いやいや、やはりここは書いておきましょう。
フレームの基本はこんな感じです。
色々な例を挙げていきますので、動作を確認してみてください。例は別窓で開きます。
これ、基本形。
左のページだけ200pxで固定されます。ブラウザの表示サイズを変えてみると、それが分かります。
<frameset cols="200,*" border="0">
<frame src="demo-f-menu01.html" name="menu" noresize scrolling="auto">
<frame src="demo-f-main01.html" name="main" noresize scrolling="auto">
<noframes>省略</noframes>
</frameset>
→こうなります
基本形に、境界線を出してみます。
<frameset cols="200,*" border="5">
<frame src="demo-f-menu01.html" name="menu" noresize scrolling="auto">
<frame src="demo-f-main01.html" name="main" noresize scrolling="auto">
<noframes>省略</noframes>
</frameset>
→こうなります
その境界線を赤色にします。
<frameset cols="200,*" border="5" bordercolor="red">
<frame src="demo-f-menu01.html" name="menu" noresize scrolling="auto">
<frame src="demo-f-main01.html" name="main" noresize scrolling="auto">
<noframes>省略</noframes>
</frameset>
→こうなります
境界線を出した状態で、noresizeを消して境界線を閲覧者が動かせるようにします。赤い境界線にマウスのカーソルを合わせてみてください。カーソルが矢印に変わって、フレームの分割サイズを自由に動かせます。
<frameset cols="200,*" border="5" bordercolor="red">
<frame src="demo-f-menu01.html" name="menu" scrolling="auto">
<frame src="demo-f-main01.html" name="main" scrolling="auto">
<noframes>省略</noframes>
</frameset>
→こうなります
基本形を縦分割に変更します。colsをrowsにします。
<frameset rows="200,*" border="0">
<frame src="demo-f-menu02.html" name="menu" noresize scrolling="auto">
<frame src="demo-f-main02.html" name="main" noresize scrolling="auto">
<noframes>省略</noframes>
</frameset>
→こうなります
縦分割の基本形を使って、スクロールバーのご説明。まずはスクロールの必要の有無をブラウザが自動的に判別するよう、scrolling="auto"にします。
<frameset rows="200,*" border="0">
<frame src="demo-f-menu03.html" name="menu" noresize scrolling="auto">
<frame src="demo-f-main03.html" name="main" noresize scrolling="auto">
<noframes>省略</noframes>
</frameset>
→こうなります
上のページをscrolling="no"にして、ページスクロールをできないようにします。これを使うと、例え文章・画像がページ外に行っても読むことができなくなるので、あまりお勧めしません。
が！
Firefox1.0だけはスクロールバーの表示はなくなるものの普通にページスクロールができました。（※Firefox1.5ではスクロールバーやホイールによるスクロール不可。ただしフレーム選択後（フレームのページ上でクリックなど）にキーボードの『Page Up／Page Down』や『↑↓←→』などで表示位置を動かせます）
この例を作ってみてビックリ。
これをキッカケにInternet Explorer6でスクロールできる方法があるかを調べてみたら、ありました。ページ上でクリック&ドラッグをすればなんとかスクロール可能です。
Netscape7.1はいずれもスクロール不可でした。
あ、Firefoxでスクロール不可のフレーム内の全体像を見たいときは「右クリック」→「このフレーム」→「このフレームだけを表示」でみることができます。
<frameset rows="200,*" border="0">
<frame src="demo-f-menu04.html" name="menu" noresize scrolling="no">
<frame src="demo-f-main04.html" name="main" noresize scrolling="auto">
<noframes>省略</noframes>
</frameset>
→こうなります
最後に縦横分割を組み合わせたフレームを作ってみましょう。フレームセットを二つ使うので、閉じる時も二つちゃんと閉じてくださいね。
<frameset rows="50,*" border="0">
<frame src="demo-f-menu05.html" name="menu-top" noresize scrolling="auto">
<frameset cols="200,*" border="0">
<frame src="demo-f-menu06.html" name="menu-left" noresize scrolling="auto">
<frame src="demo-f-main05.html" name="main" noresize scrolling="auto">
<noframes>省略</noframes>
</frameset>
</frameset>
→こうなります
最後に、フレームでのリンクの設定を説明します。
△TOP
３．フレーム内でのリンク
フレームでのリンクは少々特殊で、target属性を用いてリンク先をどう呼び出すのかを指定しなければなりません。
なぜならフレームは表示画面が分割されていますから、例えば左右に分けられていたら、呼び出したいページを左右のどちらに表示したいのかを指定しておかないとページの構成がおかしくなってしまうことがあるためです。
その指定方法の例を挙げますね。
フレームは左右分割で、左側にメニューとなるページを表示し、コンテンツとなるページを右側に表示していく代表的な形です。
そしてフレームをセットする時、以下のように書いたとします。
例：
<frameset cols="100,*" border="0">
<frame src="menu.html" name="menu" nosize scrolling="auto">
<frame src="page.html" name="page" nosize scrolling="auto">
そうすると、画面にはまず左にmenu.htmlの画面が、右にpage.htmlが表示されます。
そして、例えば左側のメニューに『日記』のページに行く（つまり右側のページに日記のページを呼び出す）ためのリンクを用意しようとしたら、このように書くことになります。
例：<a href="nikki.html" target="page">日記</a>
target名は、フレームセット時につけた「name」を使います。
ここでは右のページを「page」としていますから、「target="page"」となるわけです。
これで、nikki.htmlが右側のフレーム内に読み込まれます。もちろん名前をmenuにしたら、左側に読み込まれますよ。
また、「_top」と「_blank」ももちろん有効です。
こんな感じです→別窓で例を見る
特に、他者のページへのリンクのtargetには「_top」か「_blank」のどちらかを必ず書きましょう。そうしなければ、自分のWebページに、あたかも自分が作ったページかのように他人のWebページを表示するという大反則を行ってしますことになりますので。
大反則の例です→別窓で例を見る
△TOP
４．インラインフレーム
ページの中に別ページを読み込むフレームです。小さな窓から別のページを見ると言えば分かりやすいでしょうか。
これは通常の（フレームセットのファイルでない）HTMLの中に、<p>や<table>と同じような感覚で、一つのタグとして書きます。
<iframe src="フレーム内に呼び出すファイル" name="abc" width="数値" height="数値">
このページではインラインフレームを使用しています。
インラインフレーム非対応のブラウザを御使用の方は、<a href="zzz.html">こちらへ</a>お願い致します。
</iframe>
→インラインフレームの例
リンク等の取り扱いもほとんどフレームと同じです。フレームと大きく違う点は、widthとheightでインラインフレームの大きさを指定する点です。
<iframe></iframe>内に書かれた文字はインラインフレーム非対応のブラウザにのみ表示されます。
△TOP
５．DTD宣言と文字コード
書かなくても特に問題はないけど書いてあると何だか格好いいぞ……なDTD宣言です。
別に書かなくてもいいやという方は、文字コードにお進みくださいなっと。
これは、HTMLファイルがどのような文書型定義（DTD）で書かれているかを宣言するものです。難しいことを説明できるほど精通しているわけではないので、とりあえず「自分のHTMLが該当するのはこれだぞ」というDTD宣言をそのまま書いちゃってください。僕もそれくらいの気持ちで書いてます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
横幅の都合上改行されていますが、『〜//EN"』と『"http://（URL）』の間には半角スペースが入っています。
一番最後はフレームにのみ使う宣言です。
問題は上の二つですが、strictとURLに書いてある一番上の宣言は、最もHTML構造に対して厳格と考えてくれればいいと思います。
なので、お勧めは二番目のTransitionです。これはHTMLをルースに解釈してくれるので、厳密には使わないことになっている要素や属性を使用することができます。特に後半のURLを省略した、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
が一番緩やかで、比較的定義に縛られずこちらが思うような表示を出しやすいですよ。
あ、そうそう。もちろんどの宣言もURLを省略可能です。URLを表記するか否かには昔のブラウザとの互換性が関わってくるようですが、趣味でHPを作っている分にはそこまで理解する必要もないでしょう。
また、どれを使えばいいか不安な場合は『書かない』という手もあります。最初に書いた通り、このDTD宣言は書かなくても問題なくページは正常に表示されるからです。
もう一つ、重要なことを。
それは文字化けを防ぐためのソースです。難しいことは考えず、<head></head>の間に
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
と、書き込んでください。これは「このページの文字コードはShift_JISですよ」とブラウザに知らせて、文字化けを防いでいます。
△TOP
| R： | さぁ次はCSSだー！ |
|---|---|
| C： | おお？何かやる気あるじゃねぇか。 |
| R： | いやー、ここまできたら何かのってきたっすよー。CSS、説明しづらいけどやっちゃうっすよー。 |
| C： | ……なんか、頭の使いすぎで妙なノリになってやがる。だから待て。 |
| R： | なんで？ |
| C： | レイアウトの件はどうした。 |
| R： | あ。 |