フレーム
フレーム基本形 <frameset><frame src=" ">～</frameset>- 境界線の表示
<frame src=" " frameborder=" "> <frameset frameborder=" ">
- 境界線固定 <frame src=" " noresize>
- 境界線の幅、色
<frameset border=" " bordercolor=" "> <frame src=" " bordecolor=" ">
- マージン <frame src=" " marginwidth=" " marginheight=" ">
- スクロールバー表示 <frame src=" " scrolling=" ">
- ウインドウ指定 <frame src=" " name=" ">
- インラインフレーム <iframe src="">～</iframe>
1.フレーム基本形
sample
★縦に分割（左右に分かれます）★
<html>
<head>
<title>HTML│CSSタグ辞書</title>
</head>
<frameset cols="150,*">
<frame src="frame1.html" name="left">
<frame src="frame2.html" name="right">
</frameset>
</html>
preview
explain
cols="☆,☆"・・・フレームを縦に分割
cols="150,*"（左側が150ピクセル、右側がその残り）
cols="80%,*"（左側が80%、右側がその残り、つまり20%）
使える単位は「ピクセル（単位つけない）」「%」「*（アスタリスク）」
sample
★横に分割（上下に分かれます）★
<html>
<head>
<title>HTML│CSSタグ辞書</title>
</head>
<frameset rows="150,*">
<frame src="frame1.html" name="top">
<frame src="frame2.html" name="bottom">
</frameset>
</html>
preview
explain
rows=" , "・・・フレームを横に分割
rows="150,*"（上が150ピクセル、下がその残り）
rows="80%,*"（上が80%、下がその残り、つまり20%）
使える単位は「ピクセル（単位つけない）」「%」「*（アスタリスク）」
2.境界線の表示
sample
<frameset rows="150,*" frameborder="0">
<frame src="frame1.html" name="left">
<frame src="frame2.html" name="right">
</frameset>
preview
explain
frameborder="0"
フレームの境界線を非表示にします。
3.境界線の固定>
sample
<frameset rows="150,*">
<frame src="frame1.html" name="left" noresize >
<frame src="frame2.html" name="right">
</frameset>
preview
explain
<frame src=" " noresize>
フレームの境界線が動かせなくなります。
この指定がないと、境界線の上にカーソルを持っていくと境界線を動かすことができてしまいます。
4.境界線の幅、色
sample
<frameset rows="150,*" bordercolor="#ff3366" border="5" >
<frame src="frame1.html" name="left">
<frame src="frame2.html" name="right">
</frameset>
preview
explain
<frameset rows=" , " bordercolor="#ff3366" border="5" >
bordercolorで境界線の色指定、borderで境界線の幅（太さ）指定
5.マージン
sample
<frameset rows="150,*">
<frame src="frame1.html" name="left" marginwidth="10" marginheight="10">
<frame src="frame2.html" name="right" marginwidth="50" marginheight="50">
</frameset>
preview
explain
<frame src=" " marginwidth="10" marginheight="10">
marginwidthでフレーム内の左右のマージン（あき具合）を指定。
marginheightでフレーム内の上下のマージン（あき具合）を指定。
6.スクロールバー表示
sample
<frameset rows="200,*">
<frame src="frame1.html" name="left" scrolling="yes">
<frame src="frame2.html" name="right" scrolling="auto" >
</frameset>
preview
explain
<frame src=" "scrolling=" ">
フレーム内のスクロールバーの表示非表示の設定
7.ウィンドウ指定
sample
<frameset rows="200,*">
<frame src="frame1.html" name="left">
<frame src="frame2.html" name="right" >
</frameset>
preview
explain
<frame src=" " name="left">
name=" "で各フレームに名前をつけます。
リンク先を違うフレームに表示したい場合などに使います。
（例.<a href="http://yahoo.co.jp" target="right">yahooはこちら</a>）
8.インラインフレーム
sample
<html>
<head>
<title>HTML│CSSタグ辞書</title>
</head>
<body>
<iframe src="frame_sample8_1.html"></iframe>
<br />
↑iframeで別のhtmlファイルを読み込んでいます。
</body>
</html>
preview
explain
薄毛・抜け毛の解消｜植毛・自毛植毛のヨコ美クリニック
