６２歳パソコン教師の日記 NO.357 (2001.1.7)
昨年の暮れにホームページのトップページを模様替えをしましたが、表示方法に関するご質問が多数寄せられています。このマガジンの読者の方はタグ入力でホームページを作成している人が多いので、ソースに関心がおありなのでしょうね。
今日はソースの説明をします。ホームページにご興味のない方には申し訳ありませんがご了承お願いいたします。
【フレームの分割】
大きな変更点はフレームを使って画面を三つに分割したことです。
このフレームの名前は自由に決めて構いません。「表示」→「ソース」とクリックして表示される「index.html」のソースにこのフレーム分割のみが記述がされています。
- 最上部の全幅、高さ 2cm ほどが「Title」
- その下の左側、横幅 4cm 弱が「contents」
- その右側全体が「home」として分割しています。
このソースには <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"」はリンクスポットの文字列に下線を付けない記述です。下線が付いていると格好が悪いですからね。
他のサイトへのリンクを同じように記述しては「ＳＡＬＴＹ」から抜け出すことができなくなります。 この場合は下記のように「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」のスクロールバーだけを表示して、グリーンの色を付けています。このタグは
タグの意味は下記のとおりです。色の指定はこの例のように１６進数でも英語のカラーネームでも構いません。カラーネームの場合は「＃」は不要です。
でも、このように同じタグを全ページに記述するのは無駄ですね。下記の記述を拡張子「css」を付けて同じフォルダに保存します。例では「scr.css」としました。
scrollbar-face スクロールボックスと上下の三角矢印ボタンの表面 scrollbar-shadow 同陰部分の明 scrollbar-highlight 同陽部分の暗 scrollbar-3dlight 同陽部分明 scrollbar-darkshadow 同陰部分の暗 scrollbar-track スクロールバーの地色 scrollbar-arrow 上下の三角矢印ボタンの矢印
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」で使用できないことが解りました。遅ればせながらホームページに同じ年賀状をアップしました。こちらでは ちゃんと聞こえますよ。
ホームページには広告バナーを載せていませんでしたが、この度、トップページの下方に「Ｗｅｂリンカー」のバナーを貼り付けました。「ＩＳＤＮ」「ＯＣＮエコノミー」「ＤＩＯＮスタンダード」などは是非 こちらからお申込みくださいますようお願い申し上げます。
