|
フレーム
|
| |
|
フレームを利用するためには、
HTMLの三つの文章型定義(DTD)のうち、
HTML 4.01 Frameset を用いなくてはなりません。
また、フレームに表示する内容のHTMLファイルは別に用意する必要があります。
|
| |
|
内容の準備
|
| |
|
フレームを使って、二つのHTMLファイルを表示してみましょう。
まずはそのためのHTMLファイルを二つ用意する必要があります。
html27_2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>「歩行ロボット進化論」</title>
<meta name="author" content="0n0">
<meta name="keywords" content="ロボット,歩行,2足,4足">
<meta name="description" content="歩行ロボットを自作する人のための情報ページです">
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
</head>
<body>
<ul>
<li>自己紹介</li>
<li>自作歩行ロボット紹介</li>
<li>歩行ロボットリンク集</li>
<li>日記</li>
</ul>
</body>
</html>
|
クリックすると表示結果をみることができます。
|
| |
html27_3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>「歩行ロボット進化論」</title>
<meta name="author" content="0n0">
<meta name="keywords" content="ロボット,歩行,2足,4足">
<meta name="description" content="歩行ロボットを自作する人のための情報ページです">
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
</head>
<body>
<p>
このページは、歩行ロボットに関する情報を集めて公開していきます
</p>
</body>
</html>
|
クリックすると表示結果をみることができます。
|
| |
|
フレーム
|
| |
|
上記の二つのHTMLファイルをフレーム内に表示するためには、
どのように表示するかを指定したファイルを用意しなくてはなりません。
この場合のHTMLファイルには、
frameset 要素を使います。
表示時するHTMLファイルの指定には、
frame 要素に src 属性を付けて指定します。
縦に分割する場合には cols 属性を、横に分割する場合には rows 属性を使います。
分割の高さや幅はカンマで区切って指定します。
指定には、ピクセルもしくは % が利用できます。
また、* を使えば残り全てという意味になります。
ここでは、body 要素が無いことに気を付けてください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
<head>
<title>「歩行ロボット進化論」</title>
<meta name="author" content="0n0">
<meta name="keywords" content="ロボット,歩行,2足,4足">
<meta name="description" content="歩行ロボットを自作する人のための情報ページです">
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<frameset cols="300,*">
<frame src="html27_2.html">
<frame src="html27_3.html">
</frameset>
</html>
|
クリックすると表示結果をみることができます。
|
| |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
<head>
<title>「歩行ロボット進化論」</title>
<meta name="author" content="0n0">
<meta name="keywords" content="ロボット,歩行,2足,4足">
<meta name="description" content="歩行ロボットを自作する人のための情報ページです">
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<frameset rows="150,*">
<frame src="html27_2.html">
<frame src="html27_3.html">
</frameset>
</html>
|
クリックすると表示結果をみることができます。
|
| |
|
インラインフレーム
|
| |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
<head>
<title>「歩行ロボット進化論」</title>
<meta name="author" content="0n0">
<meta name="keywords" content="ロボット,歩行,2足,4足">
<meta name="description" content="歩行ロボットを自作する人のための情報ページです">
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<body>
<p>
<iframe src="html27_2.html"
width="200" height="200" align="right">
インラインフレーム
</iframe>
このページは、歩行ロボットに関する情報を集めて公開していきます
</p>
</body>
</html>
|
クリックすると表示結果をみることができます。
|
| |
| 2003/07/09(Wed) |
|
トップページへ |
