top / パソコン / ホームページの作り方
 tableとiframeで擬似フレーム 
2020/5/4
スタイルシートはCSSと同じ？
　前回（フレームがホームページの原点）、「cssで擬似フレーム」という言葉が出てきましたが、CSSの他にスタイルシートという用語もあります。両者の関係は次のようになっています（スタイルシートとは - 意味をわかりやすく - IT用語辞典 e-Words）。
スタイルシート
（style sheet）　		 文書データの見栄えに関する情報のみを記録・定義したデータやファイルなどのこと　
CSS
（Cascading Style Sheets）　		 スタイルシートを記述する専用の言語　
　つまり、「cssで擬似フレーム」というのは、正確に表現すれば「CSS言語で書かれたスタイルシート機能を使って擬似フレームを作る」ということになるのでしょうか。
　実は、このページでもスタイルシートを使っています。このページのソースを見ると出だしの部分は次のようになっています。赤字で示したのがスタイルシートに関連した記述です。ここでは、CSS言語で書かれた「rokuga.css」というファイルのスタイルシート機能を使えと指示されています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 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.23580">
<link rel="alternate" media="only screen and (max-width: 640px)"
     href="https://tvrock69.cloudfree.jp/_sp/pc/hp/frame3/body.html" />
<link rel="canonical" href="https://tvrock69.cloudfree.jp/pc/hp/frame3/body.html" />
<link rel="stylesheet" href="../../../rokuga.css">
  <base target="tvrock">
 </head>
　この「rokuga.css」の内容は次のようになっています。単なるテキストファイルの拡張子を「css」に換えただけですから、テキストエディターで編集できます。

body{
 font-family:"メイリオ", sans-serif;
background-color: #c0c0c0;
}
table{
 font-family:"メイリオ", sans-serif;
}
A:link {COLOR: #000000}
A:visited {COLOR: #000000}
A:active {COLOR: #000000}

　「A:」は、リンク部分の文字の色を変えます。
　「font-family:"メイリオ", sans-serif; 」で、本文の文字のフォントを指定しています。
　このように、CSSファイルにスタイルシートを書き込んでおき、すべてのHTMLファイルにそのCSSファイルを参照させれば、サイト内全体のファイルの書式を一度に決定することができますし、CSSファイルを編集することにより、サイト全体のデザインを一挙に変更することもできます。
　スタイルシートは、HTMLファイル内部にstyle要素で記述することもできます。
<head>
    <style>
    body{
     font-family:"メイリオ", sans-serif; 
     background-color: #c0c0c0;
     }
    table{
     font-family:"メイリオ", sans-serif; 
     }
    </style>
</head>　
　このスタイルシートを使ってページのレイアウトも決めようというのが「cssで擬似フレーム」という考え方です。スタイルシートに習熟していれば、それもひとつの方法ですが、素人にはかなり敷居が高そうです。

フレームはとてもシンプル　
　ところで、前にも述べたように、フレームはとてもシンプルなホームページ作成方法です。
　このページをフレームで作ると、次のようになります。なお、部品ファイルは、このサイトのものを使っているので、リンクをクリックすると、フレームのページを離れます。
　
　フレームページのHTMLソースは次のようになります。
<HTML>
<HEAD>
<TITLE>test</TITLE>
</HEAD>
<FRAMESET COLS="*,920,*">
  <FRAME name="f0" src="gray.html" scrolling="no">
  <FRAMESET ROWS="170,*">
    <FRAME name="f1" src="../../../title.html" scrolling="no">
    <FRAMESET COLS="580,340">
      <FRAME name="f3" src="body2.html">
      <FRAME name="f2" src="../list.html">
    </FRAMESET>
  </FRAMESET>
  <FRAME name="f0" src="gray.html" scrolling="no">
</FRAMESET>
</HTML>
　ページ幅は920ピクセルに固定し、その左右外側のフレーム（f0）に「gray.html」（全画面灰色のファイル）を配置してあります。
　上部のフレーム（f1）は、高さ170ピクセルとし「title.html」を表示させてあります。
　下部左のフレーム（f3）は、幅580ピクセルとし、ここに本文「body2.html 」が入ります。
　下部右のフレーム（f2）は、幅340ピクセルとし「list.html」を表示させてあります。
　以上のようにとてもシンプルで、全体の構成が直感的に理解できます。これなら、素人でも扱えそうです。 

テーブルとインラインフレームで　　
　このようなフレームと同じ機能を、テーブルとインラインフレームを使って、作ってしまおうというのが今回の試みです。
　まず、入れ物となるテーブルを作ります。フレームのレイアウトをテーブルで行うわけです。alphaEDITを使えば、実際にテーブルの形を確認しながら作業できるので、フレームを使うより楽です。　
 
　テーブルが出来たら、上部のセルにインラインフレームで「title.html」を埋め込み、下部右側のセルにインラインフレームで「list.html」を埋め込みます。下部左側のセルには直接本文を書き込みます。
　このページのソースは、大体次のようになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 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.23580">
<link rel="alternate" media="only screen and (max-width: 640px)"
     href="https://tvrock69.cloudfree.jp/_sp/pc/hp/frame3/body.html" />
<link rel="canonical" href="https://tvrock69.cloudfree.jp/pc/hp/frame3/body.html" />
<link rel="stylesheet" href="../../../rokuga.css">
  <base target="tvrock">
  </head>
<body topmargin="0" link="#000000" alink="#000000" vlink="#000000" bgcolor="#c0c0c0">
<p style="FONT-FAMILY: メイリオ, sans-serif" >
<table cellspacing="10" cellpadding="0" width="940" height="980" align="center" border="0">
  <tr>
    <td bgcolor="#e7e7e7" colspan="2"
      width="920" height="170"><iframe height="170" src="../../../title.html" frameborder="0" width="920" scrolling="no"></iframe></td>
  </tr>
  <tr>
    <td bgcolor="#ffffff" valign="top" style="PADDING-BOTTOM: 10px; PADDING-TOP: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px" width="590" >幅590ピクセル　高さ100％<br>
ここに本文が入る
</td>
    <td valign="top" width="320" height="100%"  bgcolor="#ffffff"><iframe height="100%" src="../list.html" frameborder="0" width="320" scrolling="no"></iframe></td>
  </tr>
</table>
</p>
</body>
</html>

　テーブルのバランスや、タイトルページやリストページを埋め込むときの位置決めの微調整にはそれなりの手間はかかります。

ターゲットは、"_parent"に！　
　ただ、注意しなければならないのは、「title.html」や「list.html」からリンクを貼るときは、ターゲットを、"_parent"にしなければならないということです。
　外形はフレームのように見えますが、この構造では、インラインフレームで埋め込まれた「title.html」、「list.html」と本文はワンセットとなっています。
　したがってリンクで呼び出すときはページ全体を書き換えなくてはなりません。
　感じとしては、ページを呼び出したとき、まず本文が表示され、次いでインラインフレームで埋め込まれた「title.html」、「list.html」が呼び出されます。その結果、本文だけが書き換わったように見えますが、実はページ全体が書き換えられているのです。