Home | 第64号 | 第65号 | 第66号 | 目次

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

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

＜第65号＞ 今週のおさらい
　　　　　　　　　　　　　　　　　   毎週金曜日配信　What's New 2003/9/5
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
　　　■ HTML講座  第12回 --- 余白を使いこなす（画像の利用）
　　　■ XML講座　第３章 --- DTDの作成
◆ HTML講座 --- 余白を使いこなす
余白を自在にコントロールすることは、ページのレイアウトデザインを設計する上で欠かすことのできない大変重要な役割を持っています。
余白は、単にコンテンツの周りにスペースを設定するだけでなく、文字情報さえもコントロールすることができます。また、画像や色を設定する場合も、余白の効果は抜群です。
特にスタイルシートでは、ほとんどの要素内容に余白を設定することが可能で、任意に自由な余白スペースを与えられます。
例えば、サンプル とするよりも、サンプル の方がコンテンツに余裕が生まれ、閲覧者も見やすくなります。
■ 余白をコントロールする
スタイルシートにおける余白のコントロールには、２つの方法があります。 
  margin   コンテンツの外側の余白
　padding  コンテンツの内側の余白
つまり、

margin と padding の相違を示した図左の図では、クリーム色の部分が margin で、灰色の部分が padding となります。

この図でお分かりのように、margin は、コンテンツより外側の余白を示し、padding は、コンテンツを含めた内側の余白を表わします。

つまり、padding は、コンテンツの１部として解釈でき、白の部分のコンテンツを含めた「コンテンツ全体」ということができます。

margin で設定した余白は、単に余白としてページ上ではスペースが表現され見ることができません。しかし、padding はコンテンツの１部であるため、背景色が設定されていた場合には、背景色を維持してスペースが表現されます。
■ 文字間の余白
文字のも余白を設定することにより、閲覧者が読みやすくなる環境を与えることができます。スタイルシートでは、文字と文字との間隔、行間の間隔などを設定することができます。
  lette-spacing  文字と文字とのスペースを指定
　line-height    行間のスペースを指定
このページでは、letter-spacing では 1px、line-height の指定は 130% としています。もし、文字間隔や行間が設定していなかった場合には、次のような結果になります。

ここでは、一切のスペースを指定していません。そのため文字同士が近すぎて何となく読みづらい感じがするハズです。文字間隔や行間指定は、文字情報を提供する場合には、非常に重要なキーワードとなることでしょう。こうした設定は、スタイルシート以外では実現することができません。

■ 画像の扱い
Web上で利用される静止画像は、JPEG、GIF、PNG の３つのフォーマット形式に代表されます。
ただし、PNG形式は古いブラウザではサポートされておらず、GIF形式では特許の問題があることを考慮してください。
画像を配置した Webサイトは多くで見かけられます。画像を利用する難点は、ファイルサイズが大きいことに他なりません。適切な容量に加工して利用することをお勧めします。
画像を表示するタグは、img です。
<img src="sample.jpg" width="150" height="80" alt="サンプルの花の絵">
画像を利用する場合には、必ず alt属性を利用して、代替のテキストを用意しなければなりません。何らかの理由で画像が表示されないトラブル時や、画像を見ることができない非視覚系ブラウザへ配慮として、画像のない要素示した代替のテキストを用意することは、「絶対にしなければならない」、必須の項目です。

余白、画像を利用したページ　（詳しいHTMLは、今週のマガジン 「第65号」 を参照してください。）

PageTop
◆ XML初級講座 --- DTDの作成
DTD (Document type Definition)：文書型定義とは、要素や属性の配列に関して、正しい並び方と間違った並べ方をコンピュータ言語として明確に記述し定義するという、スキーマ言語の１種です。
もし、XML文書に DTDが存在しなかった場合、そのデータを扱うプログラムは、要素の型をどのように扱ったらいいのか分からなくなってしまい、エラーを発生させます。つまり、XMLデータは他の多くのアプリケーションで再利用することが前提となっているのです。そのためにも DTD はなくてはならない必須の構文といえるでしょう。
今回は、要素の配列などを定義する、要素型宣言を中心に DTDを作成します。
ここに、前回作成した XMLインスタンスを紹介します。この文書に基づいて DTDを作成します。
  <?xml version="1.0" encoding="UTF-8"?>
    <magazineinfo>
　　　<magazine>
        <book>初心者のためのホームページ作り</book>
        <author>ばんばん</author>
        <content>XML初級講座</content>
      </magazine>
    </magazineinfo>
DTDで要素型宣言を記述する前に、文書中に DTD宣言を行わなければなりません。DTD宣言は、ルート要素（最上位要素）を指定して行います。上記 XMLインスタンスに置けるルート要素は magazineinfo要素となります。
  <!DOCTYPE ルート要素名 [ …… 要素型宣言 ……  ]>
最初のエスクラメーション（！）は、宣言を表わしています。続いてルート要素名を記述し、その中で要素型宣言を行います。
要素型宣言を行うのには、次のように記述します。 
 <!ELEMENT 要素名(子要素名)>
なお、配置すべき子要素がない場合は、子要素は宣言しません。これに基づいて全体の DTDは、以下のように作成することができます。
　<!DOCTYPE magazineinfo [
　　<!ELEMENT magazineinfo (magazine)>
　　<!ELEMENT magazine (book,author,content)>
　　<!ELEMENT book (#PCDATA)>
    <!ELEMENT author (#PCDATA)>
    <!ELEMENT content (#PCDATA)>
　　]>
記述した DTDは、XML宣言後に配置して、そのあとに XMLインスタンスが続きます。これで、「検証済みXML文書」が完成しました。
「検証済みXML文書」とは、XMLを扱うことのできるプログラム（XMLパーサ）によって、メモリに展開し、他のアプリケーションで処理することができます。

検証済みXML文書を視覚系ブラウザで表示した図ただし、Webブラウザではまだ正確な表示はできません。

右の図のように、XMLインスタンスのソースコードが表示されるだけで、本来の表示させたい意図とは異なります。いずれ、講座では XMLを Webブラウザで表示させるスタイルシートについて、詳しく解説する予定です。

（Windows2000、MSIE6.0で表示）

次回も、DTDについて、別の角度から解説します。
This page is Valid HTML 4.01! Copyright（C） 2002-2003 初心者のためのホームページ作り臨時制作委員会 wfb-org@jcom.home.ne.jp