HTMLの基礎 Last Update : 2013/09/05 09:08:44

 Webページ作成の為のHTMLを解説しています。

はじめに
■機能索引
HTMLとは
タイトルや背景
文字
レイアウト
リンク
画像
表(テーブル)
フォーム
フレーム
拡張子
カラーチャート
CSS辞典
相対・絶対パス
特殊文字
■主なタグ索引
meta
body
p
br
hr
h
font
b
i
sup
sub
acronym
marquee
div
pre
ul
ol
blockquote
q
dl
img
a
table
frameset
iframe
form
input
textarea
select
button
リンクしてね☆
HTMLの基礎-タグを覚えてウェブページを作ろう!
バナーはダウンロードしてお使い下さい。
フレーム
■フレーム領域の設定

ここではフレームの領域の設定の仕方を説明しています。 フレームとは一つのブラウザのウインドウに複数のページを表示させる 機能の事を言います。
このページに掲載しているタグは以下の通りです。

■フレーム領域の設定 <frame>


使用例
<frameset cols="値" rows="値">
<frame src="値">
</frameset>

属性 属性の値 解説
cols ピクセル数or
比率(%)
フレームの幅
rows ピクセル数or
比率(%)
フレームの高さ
src URL フレーム領域に
表示するページ

<frameset></frameset>でフレームを設定することが出来ます。

col属性でページを縦に分割し、rows属性でページを横に分割します。
フレームを分割する際、縦に分割するときは左側のフレーム、横に分割する際には上側の フレームから順に、各フレームの大きさを「,」で区切って指定します。

フレームの大きさの指定をする際に、「*」を利用すると、 例えば「cols="100,*"」のように縦に 2分割したときに、左側のフレーム領域の横幅は100ピクセル、残りが右側のフレーム領域の 横幅となるように、自動で残りのフレームの領域の大きさを設定することができます。

注意事項として、<frameset></frameset> を定義するページには<body></body>を記述する必要はありません。
<body></body>を記述すると、フレームが正常に表示されない場合があります。

■ フレームを使ったページの分割例 ■

フレームを使ったページ分割例





■フレームの領域内のマージン・スクロールバーの設定
<frame>


使用例
<frame src="値" marginwidth="値" marginheight="値" scrolling="値">

属性 属性の値 解説
src URL フレーム領域内に
表示するページ
marginwidth ピクセル数 マージンの幅
marginheight ピクセル数 マージンの高さ
scrolling yes
no
auto
スクロールバーの表示
スクロールバーの非表示
自動で表示/非表示

marginwidth・marginheight属性を指定すると、フレーム領域内のマージンを設定することができ、 scrolling属性ではフレームにスクロールバーを表示するかしないかの設定をすることができます。

scrolling属性でyesを指定すると、ページの大きさにかかわらずスクロールバーが表示され、 noを指定すると、ページの大きさにかかわらず、スクロールバーが表示されません。autoはウェブ ブラウザのサイズにあわせてスクロールバーの表示・非表示を自動で設定します。

  • marginwidth属性のみを指定すると、自動で上下のマージン(marginheight)が0に設定されます。

  • marginheight属性のみを指定すると、自動で左右のマージン(marginwidth)が0に設定されます。

  • Netscape6・7では、scrolling属性でyesを指定した場合とautoを指定した場合の表示 結果は同じになります。





■フレームの領域の境界線の設定  <frame>


使用例
<frameset frameborder="値" bordercolor="値">
<frame src="値" frameborder="値" bordercolor="値" noresize>
</frame>

属性 属性の値 解説
frameborder 1 or yes
0 or no
1またはyesで境界線表示
0またはnoで境界線非表示
bordercolor 色の名前 or
カラーコード
境界線の色を指定
src URL フレーム分割ページ
noresize
<frame>のみ
境界線の位置を固定

<frameset></frameset>または<frame>でframeborder属性とbordercolor 属性を指定して、フレームの境界線を設定することが出来ます。

frameset属性で「0」「no」を指定しても、境界線は完全に消えません。

フレームを設定して分割したページの境界線は、マウスでドラッグして移動させることができます。 レイアウトの都合上境界線を移動させたくない場合は、noresize属性を指定して、 境界線の位置を固定してください。
(<frame>にのみ設定可能)





■フレーム内のリンク先ページの表示位置の設定 <frame>


使用例
■フレームを定義するファイルで■
<frame src="値" name="値">

■フレームを設定されたフレーム領域のファイルで■
<a href="値" target="値">文字列・画像</a>

属性 属性の値 解説
src URL フレーム領域に
表示するファイル名
name 名前 フレーム領域に
つける名前
href リンク先のURL 文字列や画像
などのリンク先
target 名前 リンク先のファイルを表示
するフレーム領域の名前

文字列や画像に設定されたリンク先のファイルを、別のフレーム領域に表示するには、リンク先のページを 表示させたいフレーム領域に名前を付けます。

フレームを定義するファイルに、<frame>のname属性で名前を指定します。

例えば、左と右2つに分割されたフレームを表示したページがあったとします。
左と右のフレームにはそれぞれ違うファイルが表示されているわけです。
分割されたフレームの左側に表示したファイル内の画像や文字列に、リンクを張り、 そのリンク先のページを右のページに表示したいときに、<a></a>の target属性を利用し、フレームを定義したファイルで右側のフレームに付けた名前を指定します。 そうすれば左にある文字などに張られたリンクをクリックしたときに、右側のフレームに そのリンク先のページを表示することができます。

※ target属性を指定しない場合、リンクを設定しているフレームと同じフレーム領域に そのリンク先のページが表示されます。

***************** ***************** *****************

● target属性には次の値も指定できます ●

属性 属性の値 解説
target _top フレームを解除してページの全体に表示
_blank 新しいページが開いて表示
_parent framesetを定義しているウインドウに表示
_self リンクを設定しているそのフレーム領域に表示





■ページ内にフレーム領域を作成する  <iframe>


使用例
<iframe src="値" name="値" width="値" height="値"></iframe>
<a href="値" target="値">文字列・画像</a>

属性 属性の値 解説
src URL フレーム領域に表示
するファイルのURL
name 名前 フレーム領域の名前
width ピクセルまたは
比率(%)
フレームの幅
height ピクセルまたは
比率(%)
フレームの高さ
href URL リンク先のURL
target 名前 表示させる領域の名前

<iframe></iframe>を設定すると、 ページを分割せずに、ページ内にフレーム領域を作成する事ができます。





■フレーム非対応のブラウザへの配慮 <noframes>


使用例
<noframes>ページ内容</noframes>

ブラウザがフレーム非対応、もしくは表示しない設定にしている場合、 <noframes></noframes>の間にフレームを表示できない時に表示される 内容を記述します。

<noframes></noframes>の間には <body></body>の間に記述できるタグを使用する事ができます。






メール

質問メールがとても多くなった為、現在返信が遅れております。 お返事が出来ていないものも沢山あり、今のところいつになるのか・必ず返信出来るのかどうかの保証が出来ません。 申し訳ございませんが、その事をご理解いただいた上でご送信下さい。 また、ここではHTMLの質問に関してのみ受け付けております。


サイト検索
制作便利アイテム

カラーチャート
Color fan

色相・明度・彩度順カラーチャート。CMYK、RGB、慣用色名、配色事典付き。DTP、Web(HTML)で使えます。収録色の全てに、CMYK値、RGB値、そしてHTML用16進数を併記。
WEB関連リンク

Copyright © 2003 - ykr414. All Rights Reserved.