■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【 Webプログラミング Code Sample 】 Since2001/11/23
Code009: 続・HTMLとは何か！(中編)
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Produced by ichikoro.com
▼毎週月曜日配信です。
▼等幅フォントでご覧いただくとキレイに見えます。
▼登録・解除はこちらから可能です。
< http://www.ichikoro.com/webp/ >
※バックナンバーへのリンクもあります。
※お友達にもぜひお勧めください(^^)/
─【Contents】───────────────────────────────
09. Sample ................... 今回はフレームどすえ
10. Sample ................... フレーム：FRAMESETタグ
11. Sample ................... フレーム：FRAMEタグ
12. Sample ................... フレーム：非対応ブラウザへの配慮
13. Sample ................... フレーム：リンクのポイント その1
14. Sample ................... フレーム：リンクのポイント その2
15. Sample ................... フレーム：リンクのポイント その3
16. Sample ................... フレーム：違うファイルを埋め込む(IFRAME)
17. Sample ................... フレーム：違うファイルを埋め込む(IFRAME)
非対応ブラウザ対応
18. Sample ................... フレーム：違うファイルを埋め込む(ILAYER)
19. Sample ................... フレーム：違うファイルを埋め込む あわせ技
20. Sample ................... 見出し ：H1〜H6タグ
※続編になります。
まずはこちらをお読みください。
< http://www.ichikoro.com/webp/back_list/ >
↑バックナンバーのページが出来ました！
機能的にはまぐまぐと変わりませんが(^^;
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
09.Sample 「今回はフレームどすえ」
──────────────────────────────────────
今回は、一つのウィンドウを複数に分割する方法を解説したいと思います。
いわゆるフレーム(FRAME)というやつです。
さてさて、とりあえず下記のサンプルを実行してみてください。
<HTML>
<HEAD>
<TITLE>○○なぺーじ</TITLE>
</HEAD>
<FRAMESET cols="120,*">
<FRAME name="MENU" src="menu.html">
<FRAME name="CONTENTS" src="top.html">
</FRAMESET>
</HTML>
中身は何でもかまいませんので menu.html と top.html を用意し、上記のHTMLと
同じ階層においてください。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
10.Sample 「フレーム：FRAMESETタグ」
──────────────────────────────────────
ウィンドウが横二つに分かれて、menu.html と top.html がそれぞれ呼び出されたと
思います。複数のファイルを同時に呼び出す、これがフレームです。
では、HTMLを順番に追っていきましょう。
まずは、FRAMESETタグです。
<FRAMESET> 〜 </FRAMESET>
の間に、どういった構成のフレームにするかを記述していきます。
さて、ポイントはFRAMESETの属性にあります。
・cols ..... 横に分割する際にこの属性を指定します。
値にはピクセル数、もしくはパーセンテージで指定できます。
cols="120,50%,*"
このようにカンマ(',')で値を区切ります。
アスタリスクはウィンドウの残りの幅すべてを意味します。
・rows ..... cols属性とは逆に、縦に分割する際に使用します。
基本的にはcolsと変わりません。値にはピクセル数、もしく
はパーセンテージで指定できます。
rows="120,50%,*"
このようにカンマ(',')で値を区切ります。
アスタリスクはウィンドウの残りの高さすべてを意味します。
お分かりの通り、上のサンプルではcolsを使っていたため横に分割されました。
では最初のソースを rows に変えてみましょう。
<HTML>
<HEAD>
<TITLE>○○なぺーじ</TITLE>
</HEAD>
<FRAMESET rows="120,*">
<FRAME name="MENU" src="menu.html">
<FRAME name="CONTENTS" src="top.html">
</FRAMESET>
</HTML>
予想通りの結果になったでしょうか？
また、他にも
・frameborder ... フレームの間に境界線をつけるかつけないかの指定ができま
す。境界線がいる場合には1を、いらない場合には0を指定し
ますが、IE(NC)では YES(NO) も使用できます。
・border ........ フレームの間に出来る境界線の太さを指定できます。
無論ピクセル数で指定します。
・bordercolor ... 境界線の色を指定します。
といった属性が存在します。
ちなみに、FRAMESETの中にさらにFRAMESETを記述することもできます。
<HTML>
<HEAD>
<TITLE>○○なぺーじ</TITLE>
</HEAD>
<FRAMESET cols="120,*">
<FRAME name="MENU" src="menu.html">
<FRAMESET rows="150,*">
<FRAME name="HEAD" src="head.html">
<FRAME name="CONTENTS" src="top.html">
</FRAMESET>
</FRAMESET>
</HTML>
これを応用していくと、複雑怪奇なページが作れます(^^;
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
11.Sample 「フレーム：FRAMEタグ」
──────────────────────────────────────
お次はFRAMEタグです。
上の段で、
> <FRAMSET> 〜 </FRAMESET>の間に、どういった構成のフレームにするかを記述し
> ていきます。
と書きました。
この実際の構成を指定するのがFRAMEタグです。
> <FRAME name="MENU" src="menu.html">
> <FRAME name="CONTENTS" src="top.html">
・src ..... ここには読み込むファイルの場所を指定します。
絶対パス、httpから始まる絶対パス、相対パス(*1)で指定します。
・name .... そのフレームに名前をつけることができます。
Aタグのtarget属性やJavaScriptと組み合わせて使用することができ
ます(後述)。
FRAMEタグを単体で使うことはまずないです。基本的にFRAMESETの中に記述します。
ここまでで、ソースの全体像は見えたでしょうか？
簡単ですよね？
他にもこんな属性が存在しています。
・scrolling ....... スクロールバーを表示するかどうかの設定ができます。
値には以下を指定します。
yes : 常に表示します。
no : 常に表示しません。
auto : スクロールの必要があれば表示し、なければ
表示しません。何も指定がない場合(省略時)
は自動的にautoになります。
・noresize ........ これを指定すると、フレームの上下左右の大きさの変更が
できなくなります。
<FRAME name="hoge" src="huga.html" noresize>
といった感じで使用します。
・marginheight .... フレームの上下にできるスペースを調整できます。
0だとピタッとくっついたような感じになります。
・marginwidth ..... フレームの左右にできるスペースを調整できます。
必要に応じて使い分けてください。
*1 ...... 絶対パス、相対パスについてはバックナンバーのCode003をご参照
ください。
< http://www.ichikoro.com/webp/back_list/?cd=00003 >
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
12.Sample 「フレーム：非対応ブラウザへの配慮」
──────────────────────────────────────
Netscape2.0など昔のブラウザはフレームに対応していませんでした。
現在主流のブラウザの大半はほとんど対応していますが、テキストベースのブ
ラウザ(lynx(*2)など)や、iモードはフレームに対応していません(*3)。
そこで、そういった非対応ブラウザへの配慮として、本来は下記のように記述する
のがベターです。
<HTML>
<HEAD>
<TITLE>○○なぺーじ</TITLE>
</HEAD>
<FRAMESET cols="120,*">
<FRAME name="MENU" src="menu.html">
<FRAME name="CONTENTS" src="top.html">
</FRAMESET>
<NOFRAME>
<BODY>
<H2>○○なぺーじ</H2>
<P>
申し訳ありませんが、このサイトはフレームを使っています。<BR>
フレームに対応したブラウザでもう一度訪れていただくか、 <BR>
下記のフレームを使っていないページからお入りください。 <BR>
<BR>
<A href="/noframe/index.html">Come in!</A>
</P>
</BODY>
</NOFRAME>
</HTML>
非対応のブラウザで見た場合、<NOFRAME> 〜 </NOFRAME>の間が表示されることに
なります。あくまでシンプルに記述し、こったタグを使わないのがポイントです。
そうそう、実はとある有名なロボット型の検索エンジンでは、このNOFRAMEが重要な
ポイントだったりしますが、その話はまた今度(^-^)
*2 ..... lynxは画像などが表示されない、文字通りテキストベースのブラウザ
で、主にUNIXな方が使われる場合が多いようです。Windows版もリリ
ースされていますので、試しに使ってみるとそれはそれで世界観が変
わっていいかもしれません。また、lynxで見た場合どうなるか、なん
ていう疑似体験ができるサイトも存在します。
※ブラウザのシェアで言うとすごく低いんですけどね(^^;
・lynx(英語)
http://lynx.browser.org/
・Lynx のページ by patakuti
http://www.t3.rim.or.jp/~patakuti/lynx/
*3 ..... これを書いている段階で cHTML にFRAMEタグは含まれていません。
うっかり来ちゃったという方のためにも、NOFRAMEは書いておくのが良
いでしょう。現在の端末では、操作も煩雑になる上に表示がつらいので、
当分対応されることはないと思われます。
※メリットあんまりないですからね(^^;
・iモード対応HTMLタグ・画面イメージ対応表
http://www.nttdocomo.co.jp/mc-user/i/tag/index.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
13.Sample 「フレーム：リンクのポイント その1」
──────────────────────────────────────
左右二つにフレームを切ったページがあったとします。
左側のフレームには、サイト全体のメニューを置いて、そのメニューをクリックする
と右側のフレームがそれに応じて切り替わる、といった事がしたいという場合はどう
すればいいでしょうか？
例えば、最初に紹介したこのソースを元に考えて見ましょう。
<HTML>
<HEAD>
<TITLE>○○なぺーじ</TITLE>
</HEAD>
<FRAMESET cols="120,*">
<FRAME name="MENU" src="menu.html">
<FRAME name="CONTENTS" src="top.html">
</FRAMESET>
</HTML>
ポイントは、FRAMEタグの name属性です。
ここにつけられている値("MENU"と"CONTENTS"ですね)を、覚えて置いてください。
やり方は非常に簡単です。
menu.htmlを下記のように書き換えてみてください
<HTML>
<HEAD>
<TITLE>○○なぺーじのメニュー一覧</TITLE>
</HEAD>
<BODY bgcolor="White">
<UL>
<LI><A href="index.html" target="CONTENTS">トップページ</A>
<LI><A href="diary.html" target="CONTENTS">日記</A>
<LI><A href="profile.html" target="CONTENTS">自己紹介</A>
</UL>
</BODY>
</HTML>
実際にやっていただくとわかると思いますが、注目するのはtarget属性(*4)です。
ここにFRAMEのname属性で指定した物を記述すると、それに該当するフレームが
書き換わります。簡単ですよね？
それでは逆にCONTENTSからMENUをいじる場合はどうすればいいでしょうか？
正解は30行後に
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
お分かりですね？
CONTENTSのフレーム内から
<A href="menu2.html" target="MENU">メニューを切り替える</A>
とするだけです。
ちなみに、自分自身を書き換えるときは、
<A href="menu2.html">普通にリンク</A>
というように普通にリンクするか、
<A href="menu2.html" target="_self">普通にリンク</A>
とします。
*4 ..... Aタグ、target属性については、Code005をご参照ください。
< http://www.ichikoro.com/webp/back_list/?cd=00005 >
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
14.Sample 「フレーム：リンクのポイント その2」
──────────────────────────────────────
Code005で、target属性で指定する値についていくつかご紹介したと思います。
>この属性は、他にも下記のような値を指定できます。
>
> ・ _blank ..... 新しいウィンドウを立ち上げます。
> ・ _self ...... 自分自身を書き換えます。普段使うことはあまりありませ
> んが、明示的に表したい場合に使用します。
> ・ _top ....... フレーム(後述)使用時に、フレームをすべて消しその上に
> 指定されたURLを反映します。
“_self”は上で紹介しました。ここで注目するのは“_top”です。
どのフレームでもいいですので、
<A href="index.html" target="_top">フレームを消してトップページへ</A>
などとしてみてください。
リンクをクリックすると、フレームがすべてかき消されて、真っ白いウィンドウの
上に指定のファイルが表示されます。リンクした先もフレームだったという場合や、
単純にフレームをやめたい場合に使用します。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
15.Sample 「フレーム：リンクのポイント その3」
──────────────────────────────────────
例えば左右に分割したフレームで左側がメニュー、右側にコンテンツを表示する
サイトがあったとします。
この時、左側でメニューとなっているリンクをクリックすると、右側が変化するわ
けですが、ブラウザのURL欄は変わっていないと思います。
これは、そのフレームの枠の中が変化しているだけで、今自分がいる場所(フレーム)
自身は移動していないためです。
よく、これで混乱する方を見かけますので、一応解説まで(^^;
これを応用(?)して、
<HTML>
<HEAD>
<TITLE>URLだまし</TITLE>
</HEAD>
<FRAMESET cols="100%,*">
<FRAME name="YAHOO" src="http://www.yahoo.co.jp/">
<FRAME name="DUMMY" src="dummy.html">
</FRAMESET>
</HTML>
なんてファイルを自分のサーバに上げると、あたかも自分のサーバの上でYahooが
動作しているように見えます。
実際、企業間でコンテンツ貸しをしている所は、自分のサーバにフレームのファイル
一つおいて、あたかも自分のところのコンテンツであるように見せてる、なんてこと
は、常套手段だったりします。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
16.Sample 「フレーム：違うファイルを埋め込む(IFRAME)」
──────────────────────────────────────
IEのみ対応している物で、IFRAMEと言われるタグが存在します。
通常のフレームはウィンドウ事態を分割していたのに対し、IFRAMEはページ内に
指定のHTMLファイルを埋め込むことができます。
論より証拠ですね。例によって中身は何でもいいので、include.htmlを用意し
ていただき、下記のソースをブラウザに読み込ませてください。
<HTML>
<HEAD>
<TITLE>便利なんですよね〜、IFRAME</TITLE>
</HEAD>
<BODY bgcolor="White">
▼ここから▼<BR>
<IFRAME src="include.html" width="500" height="300"></IFRAME><BR>
▲ここまで▲
</BODY>
</HTML>
上手くいきましたか？
特別な技術など使わなくても、こんなに簡単にHTMLを挿入することが出来て
しまうのです。用途としては、色々考えられますが、サイト全体のヘッダと
フッタを、
<HTML>
<HEAD>
<TITLE>ヘッダとフッタを共通の物にする</TITLE>
</HEAD>
<BODY bgcolor="White">
<P>
ヘッダ
<IFRAME src="/head.html" width="100%" height="300"></IFRAME>
</P>
ここにページの中身
<P>
フッタ
<IFRAME src="/foot.html" width="100%" height="300"></IFRAME>
</P>
</BODY>
</HTML>
というようにしておけば、もし変更する必要が出てきた時に、一つのファイルを変
更すればサイト全体が変わるなんていうこともできちゃいます。
IFRAMEの要素は、基本的にFRAMEと同じような物が多いです。
・src ..... ここには読み込むファイルの場所を指定します。
絶対パス、httpから始まる絶対パス、相対パスで指定します。
・name .... そのフレームに名前をつけることができます。Aタグのtarget属性
やJavaScriptと組み合わせて使用することができます。
・width(height) ... IFRAMEの領域を指定します。widthは横幅、heightは高さに
なります。ここではピクセル、パーセント指定の両方が可能
です。
他にも、
・frameborder ..... フレームの周りにできる枠線を表示するか、しないかの設定
が可能です。表示する場合は 1 または YES、しない場合は 0
または NO で指定します。
・border .......... フレームの周りに出来る枠線の太さを設定します。
ここではピクセル数での指定になります。
・scrolling ....... スクロールバーを表示するかどうかの設定ができます。
値には以下を指定します。
yes : 常に表示します。
no : 常に表示しません。
auto : スクロールの必要があれば表示し、なければ
表示しません。何も指定がない場合(省略時)
は自動的にautoになります。
・marginheight .... フレームの上下にできるスペースを調整できます。
0だとピタッとくっついたような感じになります。
・marginwidth ..... フレームの左右にできるスペースを調整できます。
な感じで勢ぞろいしています。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
17.Sample 「フレーム：違うファイルを埋め込む(IFRAME) 非対応ブラウザ対応」
──────────────────────────────────────
IFRAMEは現在のところ、IEでのみ対応しているタグです。
そこで、NOFRAMEのように非対応ブラウザへの配慮がやはり必要になってきます。
基本的には
<HTML>
<HEAD>
<TITLE>IFRAME非対応ブラウザへの配慮</TITLE>
</HEAD>
<BODY bgcolor="White">
<IFRAME src="include.html" width="500" height="300">
IFRAME対応ブラウザでのみ閲覧できる部分です
</IFRAME>
</BODY>
</HTML>
という感じで、<IFRAME> と </IFRAME> の間に記述したものが、非対応ブラウザで
見ることができます。試しにNetscapeなどで閲覧してみてください。
ちなみに、NetscapeにはIFRAMEと同様の機能をもっている、ILAYERと呼ばれるタグが
存在しています。それも合わせてご紹介しましょう。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
18.Sample 「フレーム：違うファイルを埋め込む(ILAYER)」
──────────────────────────────────────
まずはLAYERの説明から...と思ったのですが、ワケわかんなくなっちゃいますので、
今回は単純にILAYERの使い方だけをご説明します。
下記のソースをブラウザで開いてください。
<HTML>
<HEAD>
<TITLE>NNだけのタグ、ILAYER</TITLE>
</HEAD>
<BODY bgcolor="White">
<ILAYER src="include.html" width="500" height="300"></ILAYER>
</BODY>
</HTML>
私が以前試していた時は怪しい動作をしていた記憶がありますが基本的な動作は、
IFRAMEと同様だと思います。
....が、ILAYERはIFRAMEに比べると、はるかに高機能です。
backgroud属性やbgcolor属性も備えており、JavaScriptと一緒に使えば派手な効果
を演出できます。詳しくはまた機会を見てしませう。
※ただし、ILAERに対応しているのはNCのみです(^^;
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
19.Sample 「フレーム：違うファイルを埋め込む あわせ技」
──────────────────────────────────────
じゃぁ、IEとNNで同時に実現できる方法を考えて見ましょう。
勘の言い方ならすでにお分かりだと思いますが、
<HTML>
<HEAD>
<TITLE>IEとNCで同じように動作する</TITLE>
</HEAD>
<BODY bgcolor="White">
<IFRAME src="include.html" width="500" height="300">
<ILAYER src="include.html" width="500" height="300"></ILAYER>
</IFRAME>
</BODY>
</HTML>
と、すればOKです。
また
<HTML>
<HEAD>
<TITLE>IEとNCで同じように動作する</TITLE>
</HEAD>
<BODY bgcolor="White">
<IFRAME src="include.html" width="500" height="300"></IFRAME>
<NOFRAME>
<ILAYER src="include.html" width="500" height="300"></ILAYER>
</NOFRAME>
</BODY>
</HTML>
なんて手もあります。
ただ、いずれにしてもブラウザに依存しますので、一番確実なのはSSIという技術を
使う方法ですが、それはまた今度の機会に。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
20.Sample 「見出し：H1〜H6タグ」
──────────────────────────────────────
さてさて、12項で何気なく使ってましたが、
<H2>○○なぺーじ</H2>
<P>
申し訳ありませんが、このサイトはフレームを使っています。<BR>
フレームに対応したブラウザでもう一度訪れていただくか、 <BR>
下記のフレームを使っていないページからお入りください。 <BR>
<BR>
<A href="/noframe/index.html">Come in!</A>
</P>
H2タグって何？と思われた方、よく読んでいらっしゃいますねぇ(^-^)
これは、“見出し(Heading)”を表すタグです。
試しにこのサンプルをブラウザに流し込んでください。
<HTML>
<HEAD>
<TITLE>○○なぺーじ</TITLE>
</HEAD>
<BODY bgcolor="White">
<H2>○○なぺーじ</H2>
<P>
申し訳ありませんが、このサイトはフレームを使っています。<BR>
フレームに対応したブラウザでもう一度訪れていただくか、 <BR>
下記のフレームを使っていないページからお入りください。 <BR>
<BR>
<A href="/noframe/index.html">Come in!</A>
</P>
</BODY>
</HTML>
H2で囲まれた部分のフォントが大きくなり、ボールドされ、後ろが改行されている
と思います。
Hタグは、H1〜H6まで準備されており、H1が一番フォントサイズが大きく、H6が一番
小さくなりますが、単に文字サイズを変えたいだけなら、FONTタグかCSSを使いまし
ょう。
属性としては、
・align ..... 横方向の行ぞろえを指定できます。
値として以下の物が使えます。
center ： 真ん中に寄せる。
right ： 右寄せします。
left ： 左寄せします。
が、存在します。
うーん、というわけで次回はこのように紹介し忘れているタグを、いくつか紹介
したいと思います。また、実際ユーザーが目にすることはないんだけど、非常に
奥の深いMETAタグについても、解説したいと思います(^-^)/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
編 集 後 記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
遅ればせながら、新年明けましておめでとうございます。
ふつつかなメルマガではござますが、今年も何とぞよろしくお願いいたします。
八は末広がりで縁起のいい数字で、しかも今日は大安吉日です。というわけで、前回
のメールでお知らせしました通り、今回は特別に火曜日の配信とさせていただきまし
た。出だしが肝心ですもんね。
この原稿は丁度1月3日、実家の島根県で書いています。例年通り今年もおもちを食べ
食べ寝正月です。今夜はカレーみたいです。昨日から全国的に雪とのこと、島根もご
多分に漏れず降り積もっていますが、そんな死にそうに寒い中、横では猫が元気に飛
び跳ねています(^^; ＜おいおい大丈夫か
さてさて、年末にかかった奇病ですが、どうやら“はしか”の線がコユイかもという
診断を受けました。おかげで会社にもいけず(行こうとしたら必死に止められ(^^;)、
自宅でグデ〜と、横になっていました。
今はすっかり良くなりました。応援のメールを送っていただいたみなさま、本当にあ
りがとうございました！元気が出ました(^-^)
実家に帰って調べてみると、はしかだけ予防接種も受けず、小さいころかかっていな
かったとのこと。う〜ん、まさかこの歳でかかるとは思いもしませんでした。どうや
ら予防接種は病院でやってもらえるらしいので、この手の予防接種を小さいころ受け
ていない方は、ぜひ行かれることをお勧めします。いや、ほんとに(^^;
ではでは、次回は通常通り月曜日にお送りいたします！
それではまた来週 (^-^)/~~
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【 Webプログラミング Code Sample 】
発 行 ： ichikoro.com
発行責任者 ： 勝部 麻季人
< katsube@ichikoro.com >
発行部数 ： 1401部(前回)
Webサイト ： < http://www.ichikoro.com/webp/ >
お問い合わせ先 ： < mm-webp@ichikoro.com >
Powerd by まぐまぐ
All Right Reserved, CopyRight(C) 2001 Webプログラミング Code Sample
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
