初心者のためのホームページ作り:第73号

                   毎週金曜日配信 What's New 2003/11/7
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

  ┏┏┏┏   初心者のためのホームページ作り/Web for beginner
  ┏┏┏         http://www.scollabo.com/banban/
  ┏┏
  ┏              <第73号>

                banban@scollabo.com

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

 当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格的
な Webページ作成に役立つことを目的に配信されております。

 当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となってい
ます。なお、このマガジンは等幅フォントでお読みいただくと快適に読めるよう
になります。

  今週のコンテンツ
      ■ Webデザイン 第18回 --- 自分のホームページを好きになる
   ■ HTML講座  第18回 --- インラインフレーム
   ■ XML初級講座 第10回 --- エンティティ宣言
    ■ 属性の解説(第4回) --- bgcolor属性

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆Webデザイン(第20回) 自分のホームページを好きになる

 見よう見真似で初めて作ったホームページを開設したときには、それなりの満
足感があります。苦心して素材を集め、慣れないマークアップをコーディングす
ることは大変なことですが、やり遂げた充足感を感じることは、誰でも経験する
ことでしょう。

 しかし、時間が経つうちに「どうして自分のページは他と比べてもダサいのだ
ろう、何で他はあんなにいいんだろう?」というような疑問が生まれます。
 そこで、自分が気に入ったページのレイアウトをそっくり真似して入れ替える
などといった更新作業を経験したことはありませんか?

 ■「カッコよさ」とは何でしょう?
 絵が動いたり、音が出たり、スクリプトを動作させるなどといった手法は、昔
 から使われてきました。その意味では、既にそういった手法には新鮮さを感じ
 ることがなくなりました。

  あなたが作るページの評価はあなたが決めるのではなく、訪れる閲覧者が決
 めるものです。その評価のほとんどが、コンテンツ(情報)の内容そのもので
 あるという事実を、しっかりと知るべきです。
  動画やアニメはすぐに飽きられてしまいます。それが、コンテンツと関連し
 て重要なものであるのなら、その限りではありませんが、実際は単なるアクセ
 サリーのような使われ方をしています。

  元々HTMLとは、情報源である「あるテキスト」を Web上で共有する目的のた
 めに、マークアップする言語として生まれました。しかし、視覚系ブラウザが
 登場し、表現の機能を高めたことにより、いつの間にか「表現主体」のマーク
 アップになってしまいました。
  そして「表現」を提供するため、様々なオーサリングツールが生まれ、今で
 はそれが標準化しつつあります。

  しかし、ページを飾る様々な「道具」を動作させることだけで、はたして本
 当に「カッコいい」ページが実現するでしょうか?

  Webデザインの基本はコンテンツの提供です。コンテンツこそが主体です。
 本来提供すべきコンテンツがおざなりで、動画やアニメ、JavaScriptやスタイ
 ルシートを駆使してもあまり意味がありません。
  あなたがインターネットにアクセスして Webページを閲覧しようとする動機
 は何でしょう?きっと、何かしらの「目的」があるからアクセスするのではな
 いでしょうか。

  閲覧者に立場に立って、その「目的」を達成することができるページこそ、
 クールで「カッコいい」ページなのだと、私は思います。
  ゴテゴテと飾り立てるアニメーションや画像は、ページを重くするだけです。
 意味がなければ、そういったアクセサリーは必要ありません。閲覧者の目的は
 情報にアクセスすることなのです。

  私がページを作る場合、まず最初に始めることは、テキスト中心のページを
 作ります。画像やスタイルシートを排除した1世代前のHTMLを仕上げます。
  そこで重要なことは、テキストに記した「情報」です。それはストレートに
 コンテンツを意味します。充実したコンテンツを作成することが目的なのです。
  それが完成してから、はじめて「見栄え」を考えます。

 ■自分のホームページを好きになろう
 苦労しながら作成する自分自身のホームページには、苦労した分だけ愛着が湧
 くものです。最初の頃はつたない中身でも、時間をかけ少しずつ更新していく
 ことで、いろいろな問題を解決して成長していきます。
  よそのページはあくまでよそのページです。自分のページと比較するもので
 はありません。提示されるコンテンツを比較するのは愚の骨頂でしょう。
  しかしながら、だからといって自己満足してはいけません。

  自分自身のページに愛情を持つならば、自分自身の環境で満足せず、訪問す
 るあらゆるユーザの立場を認識し、見せかけではないしっかしりたコンテンツ
 を提供するように心がけなければなりません。
  その上で、もっともっと自分のページを好きになってください。好きになれ
 ばなるほど、サイト全体に愛情をかけるほど、それが肥やしとなって成長を促
 進することでしょう。

                    (第21回 文字の画像化につづく)

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆HTML講座(第20回) インラインフレーム

 インラインフレームとは、同じページの中に埋め込まれるウィンドウを意味し
そのウィンドウには、他のページを表示させることができます。
 フレームは、各ウィンドウに区切ることを定義していますが、このインライン
フレームはウィンドウで区切る必要はありません。いわば、1つのオブジェクト
として利用する感覚になります。
 なお、インラインフレームを「擬似フレーム」と呼ぶこともあるそうです。

 元々、インラインフレームを定義する iframe要素は、Micosoft社が MSIEブラ
ウザの独自規格とされてきましたが、HTML 4.0が勧告されたときに標準仕様とし
て盛り込まれました。
 ただし、この iframe要素は「非推奨」として扱われている関係で、利用の際
には、HTMLの冒頭で定義する文書型は過渡期仕様、つまり Transitional を選択
しなければなりません。

 今回は、インラインフレームと、そのウィンドウ内で表示する文書を幾つか作
成します。

■インラインフレームを定義するHTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-type" content="text/css">
<title>iframe要素の使用例</title>
<style type="text/css">
<!--
h1 { margin: 1em 5%; 
     padding: 2px; 
     font-size: large; 
     text-indent: 1em; 
     background: #900; 
     color: #000 }

div { margin: 1em 5% }

iframe { float: right ;
         margin-left: 0.5em }

p   { line-height: 130%; 
      letter-spacing: 1px }
-->
</style>
</head>

<body>
<h1>iframe要素の使用例</h1>
<div>
<iframe src="explain_01.html" name="exp" width="350" height="250">
インラインフレーム未対応のブラウザはこちらから
<a href="sample_02.html">インラインフレームなし版</a>
</iframe>
<p>
HTML4.01における「非推奨」といわれるタグには、Javaアプレットを実行する
<a href="explain_02.html" target="exp">applet</a>タグや、フォントの
各種設定を行う <a href="explain_03.html" target="exp">font</a>タグなど
があります。
</p>

<p>
いずれも <a href="explain_04.html" target="exp">XHTML</a> では
廃止されており、HTMLでも、利用を控えるように強く求められています。
</p>
</div>

</body>
</html>

 ここまで入力を終えたら、任意の名前を付けて保存してください。
  なお、保存の際には、拡張子「.html」を名前の後に付けてください。
 例えば、sample.html というようにして保存します。

  なお、インラインフレーム未対応の代替としてのHTML文書は、このHTMLから
 インラインフレーム及び、target属性を削除したものを用意し、その文書を 
 「sample_02.html」として保存してください。

 次に、インラインフレームのウィンドウで表示するための文書を4つ作ります。
  ここでは、保存の際に、それぞれ指定した名前で保存してください。

■explain_01.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>非推奨要素の説明</title>
<style type="text/css">
<!--
body { background: #ffc; 
       color: #000 }

h1   { color: #900; 
       font-size: large; 
       text-align: center }
p    { margin: 1em 5px; 
       line-height: 1.3em; 
       letter-spacing: 1px }
-->
</style>
</head>

<body>
<h1>非推奨要素</h1>
<p>
本来 HTMLは、文書構造を示すマークアップ言語であり、整形処理を
目指したものではありません。そのため、HTML4.01では、そうした
見栄えに特化した整形処理用のタグを「非推奨」として定義しました。
</p>

</body>
</html>


■explain_02.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>appletタグの説明</title>
<style type="text/css">
<!--
body { background: #fcf; 
       color: #000 }
h1   { color: #900; 
       font-size: x-large; 
       text-align: center }

p    { margin: 1em 5px; 
       line-height: 1.3em; 
       letter-spacing: 1px }
-->
</style>
</head>

<body>
<h1>applet</h1>
<p>
Java言語によるアプリケーションを、HTML文書中で実行させるためのタグであり、
非推奨とされています。このタグの代わりに、object要素を使用するように
求められています。
</p>
<p><a href="explain_01.html">戻る</a></p>

</body>
</html>


■explain_03.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>fontタグの説明</title>
<style type="text/css">
<!--
body { background: #cff; 
       color: #000 }

h1   { color: #900; 
       font-size: x-large; 
       text-align: center }

p    { margin: 1em 5px; 
       line-height: 1.3em; 
       letter-spacing: 1px }
-->
</style>
</head>

<body>
<h1>font</h1>
<p>
物理タグの代表であるフォントタグは、ユーザ環境に影響するため、
利用を控えるよう強く求められています。フォントに関する設定は、
スタイルシートで行うようにしましょう。
</p>
<p><a href="explain_01.html">戻る</a></p>

</body>
</html>


■explain_04.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>XHTMLについて</title>
<style type="text/css">
<!--
body { background: #fff; 
       color: #000 }

h1   { color: #900; 
       font-size: x-large; 
       text-align: center }

p { margin: 1em 5px; 
    line-height: 1.3em; 
    letter-spacing: 1px }
-->
</style>
</head>

<body>
<h1>XHTML</h1>
<p>
拡張されたHTMLである XHTMLは、終了タグの省略や、
属性の最小化などは認められておりません。
また、HTMLでの非推奨タグは、すべて廃棄されています。
</p>
<p><a href="explain_01.html">戻る</a></p>

</body>
</html>

 入力が終わりましたら保存します。保存の際、それぞれの構文の冒頭にある名
前で保存してください。違う名前にする場合には、インラインフレームを定義し
たHTML文書内のリンク先の URIを変更してください。

 インラインフレーム実行結果
  http://www.scollabo.com/banban/magazine/mm/sample_73-1.html


◆解説

 ■インラインフレームの定義
 ページの中にウィンドウを埋め込むインラインフレームを定義する場合には、
 iframe要素を使います。

 iframe要素で利用する属性
  width :     インラインフレームの横幅を設定します。
  height:   インラインフレームの高さを設定します。
  src :    初期値としてウィンドウに表示する文書の URIを指定します。
  name :   フレームの名前を付けます。
  marginwidth:ウィンドウ内の左右の余白を設定します。
  marginheight:ウィンドウ内の上下の余白を設定します。
  scrolling  : ウィンドウのスクロールバーの表示/非表示を設定します。
  frameborder: ウィンドウの枠線の設定をします。
  align :      ウィンドウと他のコンテンツの位置関係を設定します。
  longdesc :   インラインフレームで表示するコンテンツに関する詳しい説
         明のある文書の URIを設定します。

  インラインフレームを定義する要素内で示されるコンテンツは、インライン
 フレームに対応したブラウザでは表示されることがありません。

  <iframe 〜 省略 〜 >
   ここには、フレーム未対応のブラウザの代替コンテンツを用意します。
  </iframe>

  フレーム(frame要素)では noframes要素内で記述していましたが、インラ
 インフレームでは、このようにしてインラインフレーム未対応に配慮するよう
 にします。

 ■align属性の機能
 今回作成したサンプルでは、インラインフレームの位置をスタイルシートで指
 定しています。スタイルシートの float: right がそれを示します。
  このスタイルシートの設定ではなく、iframe要素に直接 align属性を指定し
 た場合にも、まったく同じ効果が現れます。
  つまり、インラインフレームの左側に他のコンテンツを回り込ませる手法で
 画像を表示する img要素でも同じように利用されます。
  なお、位置を示す属性を含めた「位置の指定」については、次回「第74号」
 で詳しい解説を予定しています。

 ■target属性の機能
 インラインフレームで示されるtarget属性は、インラインフレームで名付けた
 名前を参照し、インラインフレーム内で表示させるために設定します。
  なお、インラインフレーム内で示される文書からは、インラインフレームを
 定義したページにリンクすることはできません、念のため。

  インラインフレームの文書から他のページにリンクする場合には、target属
 性を以下のように記述します。

  <a href="next.html" target="_top">次のページ</a>  この場合、インライ
 ンフレームからフレームを解除して、新たなページで表示されます。
  target属性がない場合には、そのウィンドウ内で表示されますので注意して
 ください。
  なお、インラインフレームのウィンドウ内で、他のサイトを表示した場合に
 は、著作権の問題が発生しますので、他のサイトの表示はウィンドウを解除し
 てリンクするようにしましょう。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆Tips インラインフレームで設定する幅

 ■ブラウザによって異なるインラインフレームの幅
 インラインフレームで表示するウィンドウの幅は、ピクセル単位のほかに、%
 単位が利用できます。ピクセル単位は、ユーザの画面に表示されるブラウザの
 表示領域をユーザの設定しているピクセル単位が主体となります。
  そのため、画面サイズの小さい環境では、横スクロールが発生する場合もあ
 ります。例えば、ユーザの画面が 800ピクセルの場合、それを超えると横スク
 ロールが発生します。
  また、MSIEでは、ウィンドウの幅よりも大きな幅の画像などを表示した場合
 ウィンドウのフレームサイズが大きくなってしまうという「バグ」が発生する
 ことがありますので、大きさの指定には注意する必要があります。

  ユーザ画面の相対的な長さを設定できるパーセント単位は非常に便利です。
 例えば、ユーザ画面の横幅が 800ピクセルの場合、50%を設定すると、その長
 さは 400ピクセルになります。

  しかしながら、インラインフレームで設定するパーセント単位は、ブラウザ
 が異なると異常な幅を表示することがあります。おそらくバグだと思いますが、
 インラインフレームの横幅設定では、これらの点を踏まえて設計する必要があ
 りそうです。
  MSIEはウィンドウサイズに対する比率で計算し、Mozilla(Netscape含む) で
 は、ウィンドウの中身に対する比率で計算します。本来ならば、MSIEの計算方
 式が正解だと思いますが、ベンダーによる解釈に違いには困ったものです。

  また些細なことですが、ウィンドウ内でのスクロールは、ブラウザ銘柄の違
 いやバージョンによっては、マウスのホイールスクロールができない可能性も
 あります。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆XML初級入門講座(第10回) エンティティ宣言

 エンティティ(ENTITY)とは、日本語では「実体」と呼びます。ある種の文字
列などの内容に「名前」を付けて定義しておき、それ以後は名前を書くだけで容
易に何度でも参照できるようにすることができるのです。

 DTDにおけるエンティティ宣言には2つに分類されます。

 ■1.一般実体
 HTMLでも定義されていますが、特殊な文字には「一般実体」を宣言しなければ
 ならない「記号」が含まれています。ここでは、特に多くの場面で利用される
 エンティティ(実体参照)について説明します。

  <   不等記号(小なり)  lt    エンティティ記号  &#60;
    >   不等記号(大なり)  gt    エンティティ記号  &#62;
    &   アンパサンド     amp   エンティティ記号 &#38;
    '   アポストロフィ    apos  エンティティ記号 &#39;
    "   二重引用符      quot  エンティティ記号 &#34;

  DTDにおける一般実体の宣言
  <!ENTITY lt "&#60;">
  <!ENTITY gt "&#62;">
  <!ENTITY amp "&#38;">
  <!ENTITY apos "&#39;">
  <!ENTITY quot "&#34;">

  一般実体を利用した XMLインスタンス
  <memo>不等記号の小なり、つまり &lt; は、対する数字より小さいことを
  意味します。</memo>       ̄ ̄

  エンティティの XMLインスタンスの書き方は、エンティティ宣言で定義した
 名前の前に アンパサンド & を、末尾にセミコロン ; を記述します。

  一般実体の < や > あるいは & などは、何故 &lt;、&gt; &amp; と宣言で
 きないのか、何故、16進数で記述するのか、その理由があります。
  例えば、以下のエンティティ宣言を見てみましょう。

  <!ENTITY lt "&lt;">

  これはエラーになります。何故なら、名前に lt を利用しているにもかかわ
 らず、参照する文字列がまったく同じでは、定義が循環するという矛盾に陥り
 ます。そのため、名前を変えるか、あるいは16進数で記述するのが妥当という
 わけです。

  HTMLでは、あらかじめ一般実体が定義されているので、このような面倒な作
 業は必要ありませんが、XMLは、すべて自前で定義しなければなりません。
  そこが XMLの難しさでもあり、面白さでもあります。

 ■2.パラメータ実体
 XMLにおけるエンティティ宣言で、最も利用度の高いのが パラメータ実体と呼
 ばれるものです。
  これは XMLインスタンス中で出現頻度の高い文字列をあらかじめ実体の名前
 として定義しておくことで、その名前を記述することで表現できるものです。

 DTDにおけるパラメータ実体の宣言
 <!ENTITY 実体名 "参照される文字列">

 具体的な記述例
 <!ENTITY XML "Extensible Markup Language">

  これは、いわば XML という名前に、「Extensible Markup Language」とい
 う文字列を代入することと同じ働きがあります。

 パラメータ実態を利用した XMLインスタンス
  <memo>XMLは、&XML; の頭文字から、そのように呼ばれています。</memo>
         ̄ ̄
  このように、パラメータ実体を定義しておくことで、何度でも名前を書くだ
 けで、本来の表現したい文字列を参照することが可能です。
  パラメータ実体も一般実体同様、その実体目の冒頭でアンパサンド「&」と、
 文末にセミコロン「;」を記述します。

◆パラメータ実体の属性利用

 前回説明したとおり、属性リスト宣言におけるデータ種別の「型」の中で、エ
ンティティ型を定義した属性には、パラメータ実体で指定されたエンティティを
その属性値に利用することができます。

 ■パラメータ実態の属性利用
 <!ENTITY XML "Extensible Markup Language">
  <!ATTLIST magazine title ENTITY "IMPLIED">

 <magazine title="XML">初級講座</magazine>

  この XMLインスタンスの記述では、memo属性の値が、エンティティ宣言され
 た「実体」をその値として利用するものです。実際の属性値は、XML という値
 で示された "Extensible Markup Language" が当てられます。

 エンティティ宣言では、任意にパラメータ実体を定義することができる、非常
に便利な機能です。まさに XMLが拡張されたマークアップ言語であることを示す
一端であることを、如実に表わしています。


 ※次回の XML初級講座では、XMLの基本について解説します。本来は、一番初
  めに述べるべき内容ですが、編集の際の手落ちがあり、大切な解説が抜け落
  ちていました。XMLの基本中の基本をしっかりと学びたいものです。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆HTML、XHTML属性の解説 --- bgcolor属性

 bgcolorとは、background color を意味し、背景の色を設定するものです。
 ただし、この属性は「非推奨」扱いにされています。

 ■bgcolor属性 任意の背景色を指定します。
 DTD:    Transitional、Frameset で利用可能
 属性値:  色(16進数、または色名)
 記述法:  bgcolor="#ffffff"
 関連要素: body、table、tr、td、th

 XHTMLの制限: XHTML1.0 Transitional 及び Frameset で利用可能。XHTML1.1
        では「廃止」されています。

 比較的簡単に特定の背景色を設定することができるため、非常に多くのサイト
 で利用されています。

  ただし、アクセシビリティの観点から、背景色を設定する場合には、文字色
 も同時に設定するようにします。ブラウザはユーザが個別に文字色や背景色や
 リンクの文字色などを設定できるため、もし、文字がページの背景色と同じで
 は読むことができなくなります。

  同じように、リンクに用いる文字色も合わせて設定する必要があります。ブ
 ラウザの初期値では通常、未訪問を青色、訪問済みを紫色の設定してある場合
 が多く、背景色の設定によっては読みにくくなる可能性があります。

  基本的にこの属性で背景色を設定した場合には、文字色やリンクの文字色も
 一緒に設定することが求められていますので、注意してください。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

今回はここまで、ではでは・・
今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。

 (今週のおさらい)
  http://www.scollabo.com/banban/magazine/review_073.html

 次回は、11月14日に配信を予定しています。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

質問・ご意見ははこちらまで→ banban@scollabo.com

 なお、ご質問の際には、あなたがお使いのOSや Webブラウザ、テキストエデ
ィタなど、なるべく分かりやすく制作環境を明記していただけると回答しやすく
なると思います。
 ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答えて
くれると思います。

発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/  (ID 0000090196)

 誤字・脱字・変換ミス・表現欠乏などには、平にご容赦願います。

バックナンバー こちらで公開しています。
プレーンテキスト  http://www.scollabo.com/banban/magazine.html
各号のおさらい  http://www.scollabo.com/banban/magazine/
アーカイブ    http://www.scollabo.com/banban/daf/archive.html
まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196

配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/top.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

<えでぃた〜ず・る〜む>

 最近の忙しさや睡眠不足もあって少しへばってきました。1日24時間が短く感
じて、その割には何もできていないというジレンマで、より疲れを増長させてい
ます。「光陰矢の如し」とは、昔の人はうまいことを言ったもんだ。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆著作権について
個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
 なお、記事中のスタイルシート、HTML、スクリプトなどをご自分のページ作成
に自由に使っていただいても差し支えありません。

            Copyright(C) 2002-2003  www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□



最新更新日 2003/11/11
Copyright(C) 2002-3003 banban@scollabo.com