|
■ホームページ基礎知識
1章； HTML入門
2章； HTMLの基本
3章； リンクについて
4章； 文章の整形
5章； ファイル転送
6章； 画像について
■基礎知識 「中級編」
■基礎知識 「上級編」
■HTML リファレンス
・基本構成編
・リンク編
・フォント編
・テキスト編
・画像編
・リスト編
・テーブル編
・フレーム編
・フォーム編
・拡張タグ編
・カラー編
■アクセスアップの方法
・評価の高いサイト
・SEOのメリット
・SEO関連語句解説
■相互リンクについて
お勧めレンタルサーバー
■お勧め独自ドメインプラン
違うURLサイト複数製作可
□相互リンクでSEO!
□やきぶたサーチSEO
□アクセスアップ無料情報
□ホームページ作成講座
□アクセスアップSEO
□格安レンタルサーバー
Ｌ 無料レンタルサーバー
□チャ−シューメンズ倶楽部
□SEOのつもりがスパム？
■ホームページ作成
★FC2 無料ホームページ
★ホームページ テンプレート 1
★ホームページ テンプレート 2
|
■ フレーム基本構成
<HTML>
<HEAD>
<TITLE>〜</TITLE>
</HEAD>
<FRAMESET COLS="n,n">
<FRAMESET ROWS="n,n">
<FRAME SRC="...">
<FRAME SRC="...">
</FRAMESET>
</HTML>
- 【説明】
-
フレーム機能というのは他のタグとは性質が異なります。またフレーム機能はNetscape Navigator2.0以上、Internet Explorer3.0以上からサポートされているので、未対応のブラウザに対する配慮を考えて使用してください。
フレーム機能を使用するには最低3つ以上の別のファイルが必要です。まずフレームの構造を記述する｢構成ファイル｣、分割されたフレーム内で表示される｢内容ファイル｣。最低２分割されるので｢構成ファイル｣と最低２つの｢内容ファイル｣、合わせて３つ以上というわけです。
｢構成ファイル｣は<BODY>タグを使用せず。<FRAMESET>という特別なタグを使用します。他人の｢構成ファイル｣はフレーム機能を使用したページで【文書のソースを見る】で見ることができます。
｢内容ファイル｣は普通のHTML文書です。特別なタグを必要としない通所のページを作成してください。ただし、フレーム内でのリンクについて注意することがあります。他人の｢内容ファイル｣はフレーム機能を使用したページで一度クリックしてフレームを指定し【フレームのソース】で見ることができます。
<FRAMESET COLS="n,n">を使用しウィンドーの左右分割を指定し、<FRAMESET ROWS="n,n">を使用し上下に分割を指定します。これらのタグは｢構成ファイル｣で使用します。分割はピクセル数、パーセント表示、比で指定します。ピクセル数とパーセント表示のとき｢ * ｣で｢残り全部｣という意味になります。
FRAMESETで３つに分割したときは、<FRAME SRC="...">を3つならべます。順番はCOLSのときは左から順番に、ROWSのときは上から順番に並べSRC="..."で｢内容ファイル｣のURLを指定します。
- <FRAMESET ROWS="350,*">
- 350ピクセル、残り全部 上下に分割
- <FRAMESET COLS="65%,"35%>
- 全体の65%、35% 左右に分割
- <FRAMESET ROWS="50%,20%,*">
- 全体の50%、20%、残り全部(=30%) 上下に分割
- <FRAMESET COLS="2*,*,3*">
- 全体の2:1:3 左右に分割
- 【使用例１】
-
<HTML>
<HEAD>
<TITLE>使用例１</TITLE>
</HEAD>
<FRAMESET COLS="30%,70%">
<FRAME SRC="sample1_left">
<FRAME SRC="sample1_right">
</FRAMESET>
</HTML>
- 【表示１】
- 使用例１
- 【使用例２】
<HTML>
<HEAD>
<TITLE>使用例２</TITLE>
</HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME SRC="sample2_left">
<FRAME SRC="sample2_right">
</FRAMESET>
</HTML>
- 【表示２】
- 使用例２
- 【使用例３】
<HTML>
<HEAD>
<TITLE>
使用例３
</TITLE>
</HEAD>
<FRAMESET ROWS="70%,30%">
<FRAME SRC="sample3_upper.html">
<FRAMESET COLS="60%,*">
<FRAME SRC="sample3_lower_left.html">
<FRAME SRC="sample3_lower_right.html">
</FRAMESET>
</FRAMESET>
</HTML>
- 【表示３】
- 使用例３
■ 表示フレームの設定
<FRAME NAME="aaa">
<FRAME SRC="..."MARGINWIDTH="n">
<FRAME MARGINHEIGHT="n">
<FRAME SCROLLING="YES">
<FRAME SCROLLING="NO">
<FRAME SCROLLING="AUTO">
<FRAME NORESIZE>
<FRAME FRAMEBORDER="YES">
<FRAME FRAMEBORDER="NO">
<FRAME BORDERCOLOR="RRGGBB">
｢構成ファイル｣で<FRAMESET>ひとつひとつの設定をします。どの設定も必須という訳ではありません。また同時に複数の設定をすることができます。
■ フレーム名の設定
<FRAME NAME="aaa">
- 【説明】
<FRAME NAME="frame_name">を使用すると各フレームに名前を付けます。他のフレームからリンク先を指定された場合、名前を付ける必要があります。一文字目にアンダースコア｢ _ ｣を使用することはできません。
- 【使用例】
<HTML>
<HEAD>
<TITLE>使用例</TITLE>
</HEAD>
<FRAMESET COLS="30%,70%">
<FRAME SRC="sample1_left" NAME="menu">
<FRAME SRC="sample1_right" NAME="main">
</FRAMESET>
</HTML>
■ フレーム内のマージンの設定
<FRAME MARGINWIDTH="n">
<FRAME MARGINHEIGHT="n">
- 【説明】
<FRAME MARGINWIDTH="n">を使用すると左右のマージン(余白)を設定し、<FRAME MARGINHEIGHT="n">で上下のマージンを設定します。設定はピクセル数で指定します。
- 【使用例】
<HTML>
<HEAD>
<TITLE>使用例４</TITLE>
</HEAD>
<FRAMESET COLS="30%,70%">
<FRAME SRC="sample4_left" MARGINWIDTH="50">
<FRAME SRC="sample4_right" MARGINHEIGHT="50">
</FRAMESET>
</HTML>
- 【使用例】
- 使用例４
■ スクロールバーの設定
<FRAME SCROLLING="YES">
<FRAME SCROLLING="NO">
<FRAME SCROLLING="AUTO">
- 【説明】
-
<FRAME SCROLLING="...">を使用するとフレームにスクロールバーの設定をします。YES、NO、AUTOの3種類から指定します。
YESを指定すると画面内に収まってもスクロールバーが表示され、NOを指定すると画面内に収まらなくてもスクロールバーは表示されません。
AUTOは画面内に収まらないときのみスクロールバーが表示されます。またSCROLLINGを指定しないとAUTOを選択したのと同じことになります。
- 【使用例】
<HTML>
<HEAD>
<TITLE>
使用例５
</TITLE>
</HEAD>
<FRAMESET ROWS="70%,30%">
<FRAME SRC="sample5_upper.html SCROLLING="AUTO"AUTO">
<FRAMESET COLS="60%,*">
<FRAME SRC="sample5_lower_left.html" SCROLLING="YES">
<FRAME SRC="sample5_lower_right.html" SCROLLING="NO">
</FRAMESET>
</FRAMESET>
</HTML>
- 【表示】
- 使用例５
■ フレームサイズの変更禁止
<FRAME NORESIZE>
- 【説明】
<FRAME NORESIZE>を使用するとフレームサイズをユーザーが自由に調節することを禁止します。
- 【使用例】
<HTML>
<HEAD>
<TITLE>使用例６</TITLE>
</HEAD>
<FRAMESET COLS="30%,70%">
<FRAME SRC="sample6_left" NORESIZE>
<FRAME SRC="sample6_right" NORESIZE>
</FRAMESET>
</HTML>
- 【表示】
- 使用例６
■ 外枠の設定
<FRAME FRAMEBORDER="YES">
<FRAME FRAMEBORDER="NO">
<FRAMESET FRAMEBORDER="YES">
<FRAMESET FRAMEBORDER="NO">
- 【説明】
- フレームの外枠を非表示の指定をします。<FRAMSET FRAMEBORDER="...">とするとフレーム全体の外枠の非表示を指定できます。
- 【使用例】
<HTML>
<HEAD>
<TITLE>使用例７</TITLE>
</HEAD>
<FRAMESET COLS="30%,70%">
<FRAME SRC="sample7_left" FRAMEBORDER="NO">
<FRAME SRC="sample7_right" FRAMEBORDER="NO">
</FRAMESET>
</HTML>
- 【表示】
- 使用例７
■ 外枠の色の設定
<FRAME BORDERCOLOR="RRGGBB">
- 【説明】
- 外枠に色を付けます。Netscape3.0以上でのみ使用できます。色の指定はRRGGBBで行います。
- 【使用例】
<HTML>
<HEAD>
<TITLE>使用例８</TITLE>
</HEAD>
<FRAMESET COLS="30%,70%">
<FRAME SRC="sample8_left"BORDERCOLOR="BLUE">
<FRAME SRC="sample8_right" BORDERCOLOR="BLUE">
</FRAMESET>
</HTML>
- 【表示】
- 使用例８
■ ターゲット機能
<A HREF="..." TARGET="aaa">
<A HREF="..." TARGET="_blank">
<A HREF="..." TARGET="_self">
<A HREF="..." TARGET="_parent">
<A HREF="..." TARGET="_top">
- 【説明】
-
<A HREF="..." TARGET="aaa">を使用すると、<FRAME NAME="aaa">と指定したフレームにリンク先のファイルを表示します。
<A HREF="..." TARGET="_blank">を使用すると、新しいウィンドーを作成してリンク先のファイルを表示します。
<A HREF="..." TARGET="_self">を使用すると、リンクタグをクリックした現在のフレームにリンク先のファイルを表示します。
<A HREF="..." TARGET="_parent">を使用すると、親フレームにリンク先のファイルを表示します。
<A HREF="..." TARGET="_top">を使用すると、すべてのフレームを破棄してからリンク先のファイル表示します。
TARGET="_parent"とTARGET="_top"の違いはわかりにくいかもしれません。これはウィンドーを3つ以上のフレームに分割したときのみ違いが分かります。
1つの構成ファイルで<FRAMSET>タグを入れ子にして設定せず、分割されたフレームで本来内容ファイルを表示させるところに新しい構成ファイルを作ってそのフレームを分割したときのみTARGET="_parent"が有効に働きます。
■ フレーム未対応ブラウザへの配慮
<NOFRAMES>〜</NOFRAMES>
- 【説明】
- ペアで使用し、フレーム未対応のブラウザで本来<BODY></BODY>で書くべき本文を表示します。また<NOFRAME>ではなく<NOFRAMES>が正しい名前です。
- 【使用例】
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<FRAMESET ROWS="50%,*">
<FRAME SRC="sample10_right.html">
<FRAME SRC="sample10_Left.html">
</FRAMESET>
<NOFRAME>
このページはフレーム機能を利用しています。
(以下通常のHTML文書)
・
・
・
<NOFRAME>
</HTML>
|