締切済み

HPを作りたいのですが

2009/11/28 10:51

画像を載せたので見た上で回答お願いします＞＜

tutinoco7
お礼率66% (24/36)

その他([技術者向] コンピューター)
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

みんなの回答

noname#102650

2009/11/28 11:34 回答No.3

HTML講座 7. フレーム【2003-12-05更新】この章では、フレーム操作をおこないます。フレームは、フレーム内に表示する複数のファイルと、フレーム操作をおこなうことを記述するファイルを用意する必要があります。今までに作成した、「welcome.html」と「greeting.html」をフレーム内に表示させてみましょう。 1.フレーム操作をおこなうファイルを作成する。メモ帳で新しいHTML文書を作成し、「frame.html」という名前で保存します。 ■ HTMLの記述「frame.html」 <html> <head> <title>CyberLibrarianトップページ</title> </head> <frameset rows="30%,*"> <frame src="welcome.html"> <frame src="greeting.html"> </frameset> </html> ■ ブラウザでの表示ようこそ -------------------------------------------------------------------------------- CyberLibrarianのホームページへごあいさつコンピュータの基礎ビットとバイト拡張子拡張子拡張子内容 .sys システムファイル（System file）ごあいさつ -------------------------------------------------------------------------------- ようこそ！新しくホームページを開設しました。 -------------------------------------------------------------------------------- トップページへ ■ 解説作成した「frame.html」を開くと、2つのファイルをフレーム表示します。 <frameset>タグでフレームの分割の仕方を定義します。rows属性で縦に分割する際の、cols属性で横に分割する際の、フレームの大きさや割合を指定します。フレームセット指示で使用できる属性の見本は以下の通りです（フレーム内の色は、わかりすくするためにつけているだけです）。 HTMLの記述ブラウザでの表示解説 <frameset rows="30%,*"> 上下縦に2分割。上フレーム：30% 下フレーム：自動（70%） <frameset rows="*,70%"> 上下縦に2分割。上フレーム：自動（70%）下フレーム：30% <frameset rows="10%,*,70%"> 上中下縦に3分割。上フレーム：10% 中フレーム：自動（20%）下フレーム：70% <frameset cols="30%,*"> 左右横に2分割。左フレーム：30% 右フレーム：自動（70%） <frameset cols="150,*"> 左右横に2分割。左フレーム：150ピクセル右フレーム：自動 <frame>タグは、src属性と組み合わせてフレーム内に表示するファイルを指定します（フレーム内の色は、わかりやすくするためにつけているだけです）。 HTMLの記述ブラウザでの表示 <frame src="welcome.html"> <frame src="greeting.html"> welcome.html greeting.html scrolling属性で、フレームのスクロールバーの表示・非表示を指定できます。指定できる値は、「yes」「no」「auto」です。「auto」を選択すると、スクロールが必要な場合のみ自動的にスクロールバー（）を表示します。デフォルトは、「auto」です。 HTMLの記述ブラウザでの表示 <frame src="welcome.html" scrolling="yes"> <frame src="greeting.html" scrolling="yes"> welcome.html greeting.html <frame src="welcome.html" scrolling="no"> <frame src="greeting.html" scrolling="no"> welcome.html greeting.html target属性を使用すれば、フレーム内にリンクを記述した場合、リンク先ページをどのフレームに表示するかを指定することができます。まず、name属性で、各フレームに名前を付けます。 <frameset rows="30%,*"> <frame src="A.html" name="frame1"> <frame src="B.html" name="frame2"> </frameset> このように記述すると、上フレームに「frame1」、下フレームに「frame2」という名が定義されます。次に、「A.html」内に「C.html」へのリンクを張ります。 A.html C.htmlへのリンク B.html ブラウザでの表示（クリック前） HTMLの記述ブラウザでの表示（クリック後） <a href="C.html">C.htmlへのリンク</a> C.html B.html <a href="C.html" target="frame1">C.htmlへのリンク</a> C.html B.html <a href="C.html" target="frame2">C.htmlへのリンク</a> A.html C.html 同じ例で、target属性に、「_self」「_top」「_parent」「_blank」などの値を指定することもできます。「_self」は、自分自身のフレームに表示します。上例のtarget属性を省略したとき、および「frame1」を指定したときと同じ結果になります。「_top」は、分割されているフレームを全て解除して表示します。「_parent」は、分割されているフレームを1つだけ解除して表示します。「_blank」は、現在のウィンドウとは別に、新規にウィンドウを作成して表示します。 HTMLの記述ブラウザでの表示（クリック後） <a href="C.html" target="_self">C.htmlへのリンク</a> C.html B.html <a href="C.html" target="_top" >C.htmlへのリンク</a> C.html <a href="C.html" target="_parent" >C.htmlへのリンク</a> C.html <a href="C.html" target="_blank">C.htmlへのリンク</a> A.html B.html + C.html 横に2分割し、さらに右フレームを縦に2分割したいような場合は、<frameset>タグを入れ子にして記述します。 HTMLの記述ブラウザでの表示 <frameset cols="30%,*"> <frame src="A.html"> <frameset rows="30%,*"> <frame src="B.html"> <frame src="C.html"> </frameset> </frameset> A.html B.html C.html この場合、下の例のように、「B.html」内に「D.html」へのリンクを張ったとすると、target属性の値に「_top」と指定しても「_parent」と指定しても全てのフレームが解除されます。 A.html B.html D.htmlへのリンク C.html ブラウザでの表示（クリック前） HTMLの記述ブラウザでの表示（クリック後） <a href="D.html" target="_top">D.htmlへのリンク</a> D.html <a href="D.html" target="_parent">D.htmlへのリンク</a> D.html 上と同じ、横に2分割、右フレームを縦に2分割は、次の方法でも記述できます。まず、「B.html」と「C.html」とを縦2分割のフレームとして記述し、「frame2.html」という名前で保存します。 HTML（frame2.html）の記述ブラウザでの表示 <frameset rows="30%,*"> <frame src="B.html"> <frame src="C.html"> </frameset> B.html C.html 次に、「A.html」と「frame2.html」とを横2分割のフレームとして記述し、「frame1.html」という名前で保存します。 HTML（frame1.html）の記述ブラウザでの表示 <frameset cols="30%,*"> <frame src="A.html"> <frame src="frame2.html"> </frameset> A.html B.html C.html この場合、下の例のように、「B.html」内に「D.html」へのリンクを張ったとすると、target属性の値に「_top」と指定すると全てのフレームを解除してしまいますが、「_parent」と記述すると、「frame2.html」のフレームのみを解除して「D.html」を表示します。 A.html B.html D.htmlへのリンク C.html ブラウザでの表示（クリック前） HTMLの記述ブラウザでの表示（クリック後） <a href="D.html" target="_top">D.htmlへのリンク</a> D.html <a href="D.html" target="_parent">D.htmlへのリンク</a> A.html D.html フレーム使用に関する問題点フレームは大変便利な機能ですが、下記のような問題点があり、できるだけ使用しない方が良いとされています。プリントアウトがうまくできないことが多い。特定ページをフレーム内に表示させた状態で、ブックマーク（お気に入り）やリンクに登録することが困難。フレームを表示させた状態でフレーム内の特定のページにリンクしようとすると、そのフレームのトップページにリンクが張られてしまいます。また、フレーム内の特定のページにリンクを直接張ると、そのページの作者の意図と違った形（フレームなし）で表示されることになっていまいます。ロボット型検索エンジンの検索結果には、フレーム内のページがフレーム無しの状態で表示されてしまうことが多い。メニューなどを別フレームにしておくと、他のページへのナビゲーションが出来ないなどの問題が生じます。また、自分の意図と違った形（フレームなし）で表示されることになっていまいます。視覚障害者などが使用している「音声ブラウザ」では、利用者がフレームを認識しにくいなどの、Webアクセシビリティに問題がある。フレーム機能に対応していないブラウザも存在している。

質問者

お礼 2009/11/28 13:09

すごいです！こんなに詳しく書いてくださってありがとうございました！！

whitecom
ベストアンサー率46% (95/206)

2009/11/28 11:07 回答No.2

フレームですね。 http://www.asahi-net.or.jp/~ax2s-kmtn/ref/html/hp7.html 見たところ、そのページは三つに区切られているようです。上の茶色い部分のフレームはなしに、ただページを二つに区切りたいだけであれば上記ページに記載のある<frameset cols="30%,*">を使用すればよいかと存じます。このサイトも詳しいです。 http://www.tagindex.com/html_tag/frame/index.html あとは質問者さまのHP作成の手段にもよるので、使っているソフトの種類などを記載していただくと、よりよい回答がつくかと思われます。またカテゴリーは「HTML」が妥当です。メモ帳やテキストエディタで作っているなら、上記のようなタグ打ちが必要ですが、何かHP作成ソフトやHP簡単作成サービスのようなものがあるサーバを使用している場合「フレーム」という項目を探せば簡単に作れる可能性がありますので。