ホームページできるかな/超初心者さん向きHP作成
Web dekirukana.net
サイトメニュー >> ホームページのデザインテンプレートをダウンロードできるサイト
トップページ
HPのはてな?
HPはどこにある?
HPのなかみ
HTMLって?
相対・絶対パス
つくってみよう!
用意するもの
作成手順
HP用素材
基本の小技集
HPを公開!
もっと知ろう!
タグのプレビュー
いろいろな色
特殊文字
記号のよみかた
PCコラム
メール
メールフォーム BBS
掲示板

リンク
リンクについて
お役立ちリンク
自動相互リンク
レンタルサーバー
プロバイダー
広告でおこづかい
参考文献
【クリック募金】


【ウィルス対策】
Click Here!

【HTMLタグ】
みんなのタグ辞書
TAG <index>

【PCトラブル】
Windows.FAQ

【ランキング】
206 Web Ranking
ホームページの情報屋さん

【P R】


Click Here!

Click Here!



ページ設定

> タグの簡易テスト(別窓)
| フレーム | フレームDL | フレームに枠線 | インラインフレーム | インラインフレームDL |
| 背景に色(背景色) |

フレーム

| フレームの基礎 | リンクターゲット |

■フレームの基礎
ページが分かれていて上部や左側にタイトルやメニュー部分等を固定させているページをよくご覧になると思います。これは「フレーム」と呼ばれる、ひとつの画面に2つ以上のHTMLを表示させる、窓枠のような役割のものを使っています。
フレーム例
↑上図の例では、「menu.html」、「main.html」と、この2つを収める「index.html」があります。「index.html」は、一番初めに表示されるページです。フレームを使ったページをトップページにする時は、必ずフレーム(窓枠部分)を「index.html」にしてくださいね。

「main.html」は普通に作ってください。表示されるスペースが狭く変わるだけで、特別なことは何もありませんよ。
「menu.html」は、メニューとして使う場合(リンク先を右隣の mainFrame にする場合)、リンクターゲットの指定が必要になってきます。でもあとは表示されるスペースが極端に狭くなることくらいですので、幅に気をつけて普通に作ってください。

全く違うのはこの2つのHTMLを収めるフレーム(窓枠部分)で、これは上図のようなページの場合、以下のような記述になります。
記述

<html>

<head>
<title>タイトル</title>
</head>

<frameset cols="100,*" frameborder="NO" border="0" framespacing="0">
<frame name="leftFrame" noresize src="menu.html">
<frame name="mainFrame" src="main.html">
</frameset>

<noframes>
<body>
</body>
</noframes>

</html>

解説
<frameset cols="100,*" 〜>
これは左側の幅の設定をする個所です。単位はピクセルです。
100px
100=100ピクセル
←このぐらいの幅です。

<frame name="leftFrame" noresize src="menu.html">
menu.html は leftFrame という名前のフレームに入りますよ、という意味です。
noresize を記述することで、先に指定した100ピクセル幅が固定されます。この記述なしだと、ブラウザで表示させた時フレーム幅がドラッグで変えられるんです。

<frame name="mainFrame" src="main.html">
main.html は mainFrame という名前のフレームに入りますよ、という意味です。
このフレームの名前が、次にご説明する「リンクターゲット」のリンク指定先となります。


■リンクターゲット
→ mainFrame
「menu.html」のリンクを右側の「mainFrame」に表示させる場合、リンクは以下のような記述になります。
<a href="リンク先.html" target="mainFrame">文字や画像</a>

leftFrame ←
もし逆に、「main.html」のリンクを左側の「leftFrame」に表示させる場合は↓です。
<a href="リンク先.html" target="leftFrame">文字や画像</a>

Point:
その他のリンクターゲットはこちら>>リンクターゲット
フレーム名はリンクターゲットとして使う・使わない以前に必ず必要です。
フレーム名は「frame name="migi"」でも「frame name="hidari"」でも、半角英字であれば何でもいいです。分かりやすい名前を忘れずにつけてくださいね。


ページ全体に適用
ページ内のすべてのリンク先フレーム名が一括指定できます。これは <head> 〜 </head>内に、<base target="フレーム名">を記述するだけでOK!です。
<html>
<head>
<title> </title>
<base target="フレーム名">
</head>

<body>
表示させたい部分に
<a href="リンク先.html">文字など</a>
</body>

</html>

使用前例 使用後例
<a href="a.html" target="frame">link</a>
<a href="b.html" target="frame">link</a>
<a href="c.html" target="frame">link</a>
<a href="a.html">link</a>
<a href="b.html">link</a>
<a href="c.html">link</a>
ひとつひとつのリンクに target="フレーム名" を記述しなくてもよくなります。


■フレーム ダウンロード

>>こちらにあります



このページのトップへ
BACK HOME
ホームページできるかな
相対パス・絶対パス HTMLって? ホームページのなかみ ホームページはどこにある? 作成手順 作成サンプル 用意するもの ホームページ用素材 HPを公開!FFFTP 基本の小技集 コラム 特殊文字 記号のよみかた いろいろな色 タグの簡易プレビュー
Copyright(C) 2003-2005 laz All rights reserved.
当サイト内の無断使用及び無断転載を固く禁じます。