62歳パソコン教師の日記 NO.357 (2001.1.7)


 昨年の暮れにホームページのトップページを模様替えをしましたが、表示方法に関するご質問が多数寄せられています。このマガジンの読者の方はタグ入力でホームページを作成している人が多いので、ソースに関心がおありなのでしょうね。

 今日はソースの説明をします。ホームページにご興味のない方には申し訳ありませんがご了承お願いいたします。

【フレームの分割】

 大きな変更点はフレームを使って画面を三つに分割したことです。

  1. 最上部の全幅、高さ 2cm ほどが「Title」

  2. その下の左側、横幅 4cm 弱が「contents」

  3. その右側全体が「home」として分割しています。
 このフレームの名前は自由に決めて構いません。「表示」→「ソース」とクリックして表示される「index.html」のソースにこのフレーム分割のみが記述がされています。

 このソースには <BODY>-</BODY> タグがないことに気が付かれたでしょう。その代わりに <FRAMESET>-</FRAMESET> を用いてフレーム機能を宣言しています。

「ROWS="53,*"」は上下に分割して、上のフレームの高さを 53 ピクセル、「*」は下のフレームの高さが残り全ての意味です。

「COLS="170,*"」は左右に分割して、左のフレームの横幅が 170 ピクセル、「*」は右のフレームの横幅が残り全ての意味です。

「NORESIZE」はドラッグをしても境界を移動できない記述です。

「Title」の下と「contents」の右のフレームの境界幅を「FRAMEBORDER="0"」にして、スクロールバーを「SCROLLING="no"」にしているので、見ただけでは境界が判りませんね。

 三つのフレームのソースを表示するには、それぞれのフレーム内の何もない箇所を右クリック、→表示されるメニューの「ソースの表示」をクリックします。

【フレームのリンクの記述】

 「contents」のリンクスポットをクリックすると「home」のフレームに表示するには下記のように「TARGET="home"」を記述します。

<A HREF="hemingmate.html" STYLE="TEXT-DECORATION:none" TARGET="home">

「STYLE="TEXT-DECORATION:none"」はリンクスポットの文字列に下線を付けない記述です。下線が付いていると格好が悪いですからね。

 他のサイトへのリンクを同じように記述しては「SALTY」から抜け出すことができなくなります。 この場合は下記のように「TARGET="_top"」または「TARGET="_parent"」と記述すると、フレーム機能が解除されウインドウ全体に表示されます。

<A HREF="http://www67.tcup.com/6721/nishikubo.html/" STYLE="TEXT-DECORATION:none" TARGET="_top">

 現在のページをそのままに、別ウインドウに表示する場合は下記のように「TARGET="top"」と記述します。

<A HREF="nenga.html" STYLE="TEXT-DECORATION:none" TARGET="top">

【スクロールバーの色を指定する】

 「home」のスクロールバーだけを表示して、グリーンの色を付けています。このタグは
 タグの意味は下記のとおりです。色の指定はこの例のように16進数でも英語のカラーネームでも構いません。カラーネームの場合は「#」は不要です。

scrollbar-face スクロールボックスと上下の三角矢印ボタンの表面
scrollbar-shadow 同陰部分の明
scrollbar-highlight 同陽部分の暗
scrollbar-3dlight 同陽部分明
scrollbar-darkshadow 同陰部分の暗
scrollbar-track スクロールバーの地色
scrollbar-arrow 上下の三角矢印ボタンの矢印
 でも、このように同じタグを全ページに記述するのは無駄ですね。下記の記述を拡張子「css」を付けて同じフォルダに保存します。例では「scr.css」としました。

BODY {scrollbar-face-color:#00E4C1; scrollbar-shadow-color:#777777; scrollbar-highlight-color:#99FFDD; scrollbar-3dlight-color:#99FFDD; scrollbar-darkshadow-color:#777777; scrollbar-track-color:#99FFDD; scrollbar-arrow-color:#FFFFFF}

 そうして、各ページの と の間に下記の記述を貼り付けておき、「scr.css」を呼び出します。「Java Script」を「js」の拡張子を付けて保存して呼び出すのと同じですね。

<link REL="stylesheet" HREF="scr.css" TYPE="TEXT/CSS">

 元旦に送信した年賀状に私の声も入れたつもりでいましたが、「Mp3 ファイル」は「Outlook Express」で使用できないことが解りました。遅ればせながらホームページに同じ年賀状をアップしました。こちらでは  ちゃんと聞こえますよ。

ホームページには広告バナーを載せていませんでしたが、この度、トップページの下方に「Webリンカー」のバナーを貼り付けました。「ISDN」「OCNエコノミー」「DIONスタンダード」などは是非  こちらからお申込みくださいますようお願い申し上げます。