| パソコン / ホームページの作り方 |
| 2020/5/4 |
前回（フレームがホームページの原点）、「cssで擬似フレーム」という言葉が出てきましたが、CSSの他にスタイルシートという用語もあって、それらの関係がよく分かりません。スタイルシートとは ： IT用語辞典では、両者の関係を次のように説明しています。
| なお、インターネット上では「スタイルシート」をCSSとまったく同じものとして取り扱っている例が多いが、厳密には「CSSはスタイルシート機能を実現するための言語のひとつ」という関係になっている。例えば、HTML文書で使えるスタイルシートの言語はCSSのみだが、XMLではCSSのほかに、スタイルシート機能を実現する言語としてXSLが用意されている。 |
実は、このページでもスタイルシートを使っています。このページのソースを見ると出だしの部分は次のようになっています。赤字で示したのがスタイルシートに関連した記述です。ここでは、CSS言語で書かれた「rokuga.css」というファイルのスタイルシート機能を使えと指示されています。
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.0
Transitional//EN"> <html><head><title>パソコン/tableとiframeで擬似フレーム</title> <meta content="text/html; charset=shift_jis" http-equiv="Content-Type"> <meta name="GENERATOR" content="MSHTML 8.00.6001.23588"> <link rel="STYLESHEET" type="text/css" href="../../../rokuga.css"> <base target="_rokuga"></head> |
|
.rei1 { font-size : 90%; } p {font-family: "メイリオ"; } A:link {COLOR: #000051} |
「A:」は、リンク部分の文字の色を変えます。
「p {font-family: "メイリオ"; }」で、本文の文字のフォントを指定しています。
このように、CSSファイルにスタイルシートを書き込んでおき、すべてのHTMLファイルにそのCSSファイルを参照させれば、サイト内全体のファイルの書式を一度に決定することができますし、CSSファイルを編集することにより、サイト全体のデザインを一挙に変更することもできます。このスタイルシートを使ってページのレイアウトも決めようというのが「cssで擬似フレーム」という考え方です。スタイルシートに習熟していれば、それもひとつの方法ですが、素人にはかなり敷居が高そうです。
●フレームはとてもシンプル
ところで、前にも述べたように、フレームはとてもシンプルなホームページ作成方法です。
このページをフレームで作ると、次のようになります。なお、部品ファイルは、このサイトのものを使っているので、リンクをクリックすると、フレームのページを離れます。
フレームページのHTMLソースは次のようになります。
| <HTML> <HEAD> <TITLE>test</TITLE> </HEAD> <FRAMESET COLS="*,920,*"> <FRAME name="f0" src="gray.html" scrolling="no"> <FRAMESET ROWS="160,*"> <FRAME name="f1" src="../../../title.html" scrolling="no"> <FRAMESET COLS="550,370"> <FRAME name="f3" src="body2.html"> <FRAME name="f2" src="../list.html"> </FRAMESET> </FRAMESET> <FRAME name="f0" src="gray.html" scrolling="no"> </FRAMESET> </HTML> |
上部のフレーム（f1）は、高さ１４０ピクセルとし「title.html」を表示させてあります。
下部左のフレーム（f3）は、幅５５０ピクセルとし、ここに本文「body2.html 」が入ります。
下部右のフレーム（f2）は、幅３７０ピクセルとし「list.html」を表示させてあります。
以上のようにとてもシンプルで、全体の構成が直感的に理解できます。これなら、素人でも扱えそうです。
●テーブルとインラインフレームで
このようなフレームと同じ機能を、テーブルとインラインフレームを使って、作ってしまおうというのが今回の試みです。
まず、入れ物となるテーブルを作ります。フレームのレイアウトをテーブルで行うわけです。alphaEDITを使えば、実際にテーブルの形を確認しながら作業できるので（Windows7以降はインラインフレームの部分は表示されなくなりました）、フレームを使うより楽です。
テーブルが出来たら、上部のセルにインラインフレームで「title.html」を埋め込み、下部右側のセルにインラインフレームで「list.html」を埋め込みます。下部左側のセルには直接本文を書き込みます。
このページのソースは、大体次のようになります。
|
<html><head><title>パソコン/tableとiframeで擬似フレーム</title> |
●ターゲットは、"_parent"に！
ただ、注意しなければならないのは、「title.html」や「list.html」からリンクを貼るときは、ターゲットを、"_parent"にしなければならないということです。
外形はフレームのように見えますが、この構造では、インラインフレームで埋め込まれた「title.html」、「list.html」と本文はワンセットとなっています。
したがってリンクで呼び出すときはページ全体を書き換えなくてはなりません。
感じとしては、ページを呼び出したとき、まず本文が表示され、次いでインラインフレームで埋め込まれた「title.html」、「list.html」が呼び出されます。その結果、本文だけが書き換わったように見えますが、実はページ全体が書き換えられているのです。