メモ帳で作るWEBページ画像編

画像の挿入

なお、この項では、HTML4.01 Transitional で非推奨とされている
<center>タグ、属性のalign、boder、hspace、vspaceを使用して記述してあります。

バラの花です。

画像を用意する

画像はWord2003のクリップアートから取入れました。フアイル名を「 gazo1.jpg 」にしました。元の画像は、サイズは幅264ピクセル、縦250ピクセル、画像の種類 .wmfだったのですが、画像処理ソフトで縦横サイズを５０％減にし、画像の種類を「.jpg」にして、例えば、マイドキュメント内に「my-homepage」フォルダを作り保存します。

画像の拡張子について

画像の種類を表す拡張子は[.jpg]にして下さい。（拡張子の前に[．]英数文字のピリオド（別名ドット）を忘れずに付けること。）使用ソフトによっては[.JPG] になったりしますので、それに従って下さい。これを間違えると、手元では画像が表示されますが、いざ、インターネットに載せると画像が表示されませんので今から習慣付けが肝要です｡今回私の場合は、使用ソフトの関係で大文字のJPGになっていましたが、jpgに修正しました。｢このことはすべてのフアイル名に共通しています。｣画像処理ソフトに合わせてjpg､JPGのように大文字小文字を正しく使い分けることが重要です。
(但し、将来を見透いてフアイル名、拡張子共に、例えば[gazo-file1.jpg]のように小文字の使用を推奨します。)

<img>タグを使用する。

画像（イメージ）を表示する基本のタグ文は下記です。
<img src="画像フアイル名" alt="画像を説明するテキスト。">

実際にやってみましょう。

先ず、前々回作成しておいた「sample1.html]（html基本構造フアイル）と今回作成した「 gazo1.jpg 」（画像フアイル）を同一フォルダー内に保存します｡
「sample1.html]フアイルを開きます。
同フアイルの「ソ－ス」を開きます。
既に作成済みの画像フアイル名の[gazoi.jpg]を上記基本構造の「画像フアイル」に記述します。（または、コピーして貼り付け）
<img src="gazo1.jpg" alt="バラの花です。">になれば、ＯＫです。
フアイルメニューから、「上書き保存」をクリックします。
「sample1.html]の表示メニューから、「最新の情報に更新」をクリックします。（または、[F5]きーを押します。）
以上で完了です。[sample1.html]フアイルを開いて見ましょう。

いろいろな属性を使用してみる

画像サイズの指定と画像の水平位置変更

前段「IMG要素のDTD」で１２個の属性があることを知りました。その内[src]と[alt]はもう使用済みです。今度は、[width]、[height]、[align]、[hspace]、[vspace]属性を使ってみます。

画像サイズの指定

画像サイズの指定を指定しておくと、ブラウザの読み取りが早まり、表示速度が速くなります。（現在はパソコン進歩し、且つADSL回線の普及で表示速度が、あまり気にならなくなりましたが、その環境にない方のために必要なことです。）　　　　　　　　　　

画像の大きさは横幅を「bbb」ピクセル､縦長さを「ccc」ピクセルとしたたとき「HTML形式」での「画像の表示の一般形」は下記のようになります。
画像挿入タグ<img src="aaa.jpg" width="bbb" height="ccc" alt="テキスト">
この「HTMLタグ」を「HTMLソース」の<body>～</body>間の任意の場所（文章の何行目とか）に貼り付けすることで画像の挿入が出来ます。

画像挿入の位置について

「<img>タグ」で何も指定しなければ画像は｢左寄せ｣で表示されます。
「中央」の場合は、align属性で「align="center"> 」
「右寄せ」の場合は､align属性で「align="right>」を「<img>タグ」に追加すれば良いのです。
文字を回り込みさせる場合、文字との間隔（マージン)も設定できます｡但し「中央」の場合には使用できません。｢右寄せ｣｢左寄せ｣に限られます。
[vspace="ddd"」 [hspace="eee"] この属性と値を「<img>タグ」に追加すればすれば良いことになります。

例題１

画像のデータ：画像名aaa＝gazo1.jpg　幅bbb=150ピクセル縦ccc=100ピクセルマージンを縦横それぞれ15ピクセルとしました。
上の「画像挿入タグ」の各項目に数値等を入れると下記になります。
<img src="gazo1.jpg" width="150" height="100" vspace="15" hspace="15" alt="テキスト">
上の、html文では、「align」属性の指定がありませんのでデフォルト（初期設定）で左側に下図のように挿入されます。

例題２

上記に「align="right"」の属性と値を追加し、width="264" height="250"に訂正

バラの花です。「align」属性と「値」を「right」に、また、vspace="0"に指定しました。画像が右端になり、左側に「文字列」が並びます。

インターネットで見つけた複製配布可能なサイトがありましたので、その文章の一部を紹介させていただきます。
「９割近いと言われる、InternetExplorer5 または 6 のユーザーは、その設定を変更することによって、HTMLで作られたホームページを自分好みのデザインで表示させることができます。詳しくは当サイト内、ユーザースタイルシートのススメをご覧ください。

では、どうすれば良いのか、つまり、ホームページを誰の目にも自分の思う通りに表示させることは不可能です。私たちにできるのは、文書の構造をしっかり記述しておくことだけです。構造がしっかりしていれば、閲覧者がどのような環境でも分かりやすく表示されるものです。そしてそのような表示は、目的を持った閲覧者にとって読みやすいものになります。HTMLは、文書の基本的な構造を明示ための言語です。
尚、以下では正確を期す為、これ以降はホームページではなくウェブページ、あるいはウェブサイトと表現します。」

例題３

画像に枠をつけます。属性[border]に[属性値０～数値]を与えて枠幅を替えるか、色を付けるのみです。
ここでは、スタイルシートを使って、枠種の変化を楽しみたいと思います。サンプルのため四辺夫々に異なった「値」を使用しました。少し見ずらくなったかと思いますがご勘弁ください。

解説

画像挿入の基本形の<img src="gazo1.jpg" alt="バラの花です。">に align属性を追加[align="right"]して、以下style属性を使用します。
style属性の頭と尾の部分は「style=""」で他と変わりありません。「""」間がスタイルシート記述に変わっただけですから、記述法さえ覚えればそんなに難しいことではありません。記述法は下記のとりです。
今回は、前と同じく画像を右端に配置しましたが、文字の回り込みを<br clear="right">で禁じてあります。下記二重点線間をコピーして、html基本フアイルのソースの<body>間に貼り付けると再現できます。

カラーを変えたり、枠幅を変えたり、枠のスタイルを変えてお試しください。枠の種類には、 [solid：１本線]、[ridge：立体的に中凸線]、[inset：上左側が暗く下右側が明るい]、[outset：上左側が明るく下右側が暗い]、枠無しの[none]と下記記載の４種があります。枠線の太さは、数値か、単語で指定します。単語では、[thin：細い] [medium：普通] [thick：太い]があります。

この枠のスタイルは、テーブルの枠にも、また、大抵の要素の領域枠にも共通して使用できます。
（大抵の要素とは：ブロックレベル要素は勿論です。しかし、インラインレベル要素である[img]と[span] で実証済みです。）

スタイルシートを使用するに当たっては<head>部に
<meta http-equiv="Content-Style-Type" content="text/css">
と、メタタグで、指定しておかなければなりません。しかし、それが無くてもブラウザは表示してしまいます。

使用した「html基本フアイルのソース」は下記です。
<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<img src="gazo1.jpg" align="right" alt="バラの花です。" 
style="
border-top-style:dotted;　　　 /*上枠のスタイル　丸点線*/
border-left-style:dashed;　　　/*左枠のスタイル　隙間あり棒線*/
border-right-style:groove;　　 /*右枠のスタイル　立体的に中凹み線*/
border-bottom-style:double;　　/*下枠のスタイル　二重線*/
border-top-color:green;　　　　/*上枠の色　緑色*/
border-left-color:blue;　　　　/*左枠の色　青色*/
border-right-color:red;　　　  /*右枠の色　赤色*/
border-bottom-color:#ff00ff;　 /*下枠の色　桃色*/ /*最下段　四辺の枠幅*/
border-width:10px;">     
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

HTML4.01 Strictによる記述

「<p><img src="">」の形でブロックレベルタグ（例えば<p>、<div>タグ、または、テーブルにあっては、<td>タグ等）の後にイメージタグ<img>を入れ子にすることになります。

DTDについて

DTD（Document Type Definitionの略）とは文書型定義のことで、文書中における要素, 属性, その他のデータがどのように定義され, 論理的に関連付けられるかを表す規則を定義するものです。

現在世界で最も使用されていると思われる「HTML4.01」では、使用する要素や属性の種類に応じて以下の３種類の「DTD」が利用可能です。

HTML4.01 Strict DTD
廃止予定の要素や属性とフレーム関連を除く、すべての要素と属性が定義されています。
HTML4.01 Transitional DTD
フレーム関連を除き、廃止予定の要素や属性を含んだすべての要素と属性が定義されていて、「移行期のDTD」と呼ばれています。
HTML4.01 Frameset DTD
フレーム関連と廃止予定の要素や属性を含むすべての要素と属性が定義されています。

以下はW3C勧告のHTML最新（最終か？）版（24 Dec. 1999）です。

W3C HTML 4.01 Specification　[URL] http://www.w3.org/TR/html401/（参照）　
  第21項　Document Type Definition                 　(Strict DTD)
  第22項　Transitional Document Type Definition     　(Loose DTD)
  第23項　Frameset Document Type Definition      　(Frameset DTD)
内容　　　　
========= Imported Names ===================
========= Character mnemonic entities ======
========= Generic Attributes ===============
========= Text Markup ======================
========= HTML content models ==============
========= Document Body ====================
========= The Anchor Element ===============
========= Client-side image maps ===========
========= The LINK Element =================
========= Images ===========================
========= OBJECT ===========================
========= Horizontal Rule ==================
========= Paragraphs =======================
========= Headings =========================
========= Preformatted Text ================
========= Inline Quotes ====================
========= Block-like Quotes ================
========= Inserted/Deleted Text ============
========= Lists ============================
========= Forms ============================
========= Tables ===========================
========= Document Head ====================
========= Document Structure ===============
以上、２３のグループについて定義されています。

文書型定義(DTD)は『パラメータ実体』『要素宣言』『属性定義』などから成り立ちます。
文書型定義（DTD）には、「文書インスタンス＝文書」で使用される要素や属性の名前、要素の親子関係（どの要素にどの要素を含むことができるか）や出現すべき順序、出現可能な回数）などが定義されています。

第１回 img 要素のDTD

今回はimg要素の場合を例にとりDTDの説明をいたします。img要素はsrc属性が指し示す画像に置き換わる（置換要素という）IMG 要素を配置した箇所に、画像を埋め込むという意味を持っています。

IMG要素のDTD（HTML4.01 Transitional DTDの場合）は下記のとおりです。(前文、後文省略)

<!ELEMENT IMG - O EMPTY               -- Embedded image -->
!ELEMENT(要素)、IMG(要素名)、-(開始タグ必須)、o(終了タグ省略可(Omit))、EMPTY(空要素)、--メモ書き--
<!ATTLIST IMG　（!ATTLISTは属性宣言、IMG要素に対する）
  %attrs;  （%attrs;はパラメータ実体参照）      -- %coreattrs, %i18n, %events （は、メモ書き）--
  src         %URI;       #REQUIRED   -- URI of image to embed --
　　　　　　　　　　　　　　　　　　　　 埋め込むイメージのURI記述を要求　（必須）
                                    　　 (#REQUIREDは属性値必須を表します。）
  alt         %Text;      #REQUIRED   -- short description --
　　　　　　　　　　　　　　　　　　　　 代替えテキスト-短い記述-　 （上同様必須）
  longdesc    %URI;       #IMPLIED    -- link to long description  (complements alt) --
　　　　　　　　　　　　（alt属性を用いて説明尽くされない場合、長文説明へのリンクを指定します。）　　　　　　　　　　　　　　　　　　　　 
　　　　　　　　　　　　　　　　　　 （#IMPLIEDは、[値]省略の場合はアプリケーションが決めます。）                                        
  name        CDATA       #IMPLIED    -- name of image for scripting --
　　　　　　　　 （当該要素に名前をつけ、スタイルシートやスクリプトから参照できるようにします。）
  height      %Length;    #IMPLIED    -- override height --　　　　画像・オブジェクトの高さ寸法 
  width       %Length;    #IMPLIED    -- override width --　　　 　画像・オブジェクトの幅寸法
  usemap      %URI;       #IMPLIED    -- use client-side image map --クライアント側イメージマップ
  ismap       (ismap)     #IMPLIED    -- use server-side image map --　サーバー側イメージマップ
  align       %IAlign;    #IMPLIED    -- vertical or horizontal alignment -- 水平方向の位置指定
  border      %Pixels;    #IMPLIED    -- link border width --                領域枠幅 
  hspace      %Pixels;    #IMPLIED    -- horizontal gutter --                水平方向のスペース
  vspace      %Pixels;    #IMPLIED    -- vertical gutter --                  垂直方向のスペース
>

上記DTDから、「実際に使用する場合」について整理すると下記になります。画像の表示関係(属性の書き順は、順序不同ですが、私の場合は大抵下記順で書いています。)

<img src=""> 画像を表示する場合には、ためらわずに、ここまで一気に記述します。
その後に、[""]間に[uri]を入れます
<img src="uri" width="数値" height="数値"> 画像のサイズをピクセルで指定します。
<・・・半角スペース空けて align="center"> 画像の表示位置を中央に指定します。
枠線を付けたい場合
<・・・半角スペース空けて border=""> 画像の枠幅を指定します。
そして、最後に必須属性の[alt]です。
<・・・半角スペース空けて alt=""> 画像の代わりになるテキストを指定します。

画像の側面に文字を並べて表示したい場合

align="center"以外の場合です。 <・・・半角スペース空けて align="">""間に[left]か[right] と画像の位置を指定します。
画像と文字間にスペース（マージン）も設けたいので
<・・・半角スペース空けて vspace="" hspace=""> 画像の縦方向、水平方向に空白帯を取ります、
<br clear="">""内は[left],[right],[all] のいずれかを入れ、文字の回り込みを解除します。
<img src="後表示の大画像の[uri]" lowsrc="先表示の小画像の[uri]"> 画像を２段階で表示させます。

下記の場合、詳しくは「画像編３」を参照ください。

クライアントサイドイメージマップ
<img src="uri" usemap="#マップ名"><map name="マップ名"><area ・・・></map> 画像内に複数リンクを指定します。

要素宣言

要素宣言の記述は下記の方法です。

<!ELEMENT 要素型名 - - (内容モデル) 　-- コメント -->

例えばIMG要素の場合を例に説明いたします。

<!ELEMENT IMG - O EMPTY -- Embedded image -->

「<」で開始します。
キーワード『!ELEMENT』で宣言されている『要素型』は[IMG]であることを表します。
[-]ハイフンとその後ろの[O(Omitの略)]は、[終了タグ]が省略可能なことを示しています。
しかし、この要素型の（内容モデル）のキーワード『EMPTY（空要素）』」で、この要素型のインスタンスが内容を持ってはいけないことを意味します。必然的に、ここでは終了タグが省略されなければならないことになります。
「-- 　--」間はコメントで、IMG 要素型の使用法を解説しています。DTDのコメントは参考情報に過ぎません。
「>」で終了します。

属性定義

キーワード『!ATTLIST』が属性定義。続いて属性を定義する要素の名前[IMG]と書かれてます。
以下属性のリストです。

属性リスト

キーワード『%attrs;』は属性リストの「～を見よ」参照です。（%はDTD前段で予め定義済の[%(半角空行)attrs;]項を参照せよの意味です。）

パラメータ実体参照

殆どの要素に共通してある属性は、同一DTDに別途一括で定義されていて、パラメータ実体と呼びます。
記述法は

<!ENTITY 実体名 "置換実体文">

となります。DTD内部で参照するパラメータ実体の場合は、宣言において実体名の前に%を加え、
パラメータ実体参照時に「 %実体名; 」の形で表示されます。img の例では「 %attrs; 」がそれです。私は「～を見よ」参照と考えております。

パラメータ実体宣言

キーワード「<!ENTITY」で始まります。

<!ENTITY 実体名 "置換実体文" >

となります。img の例では「<!ENTITY % attrs " ">」がそれになります。
[" "]内に、更にパラメータ実体参照が複数個盛り込まれています。

そのパラメータ実体を宣言している部分を見てみますと、
「<!ENTITY % attrs "%coreattrs; （基本的なもの）%i18n;（internationalization の略称） %events;（本的なイベント属性で全てscript使用）">」となっていて、また、３っつ「パラメータ実体参照」することになります。実際に展開して見ると下記になります。

<!ENTITY % coreattrs　　　　　　　　　（coreattrsに分類されている、実体宣言）
 "id     　　 ID             #IMPLIED  -- document-wide unique id --
　　　　　　　　　　　　　　　　　　　　要素に名前を割り当てる。（文章中で一意:１箇所のみ使用可）
  class       CDATA          #IMPLIED  -- space separated list of classes --
　　　　　　　　　　　　　　　　　　　　要素に1つのクラス名を割り当てるか、複数のクラス名指定も可能
  style       %StyleSheet;   #IMPLIED  -- associated style info --
　　　　　　　　　　　　　　　　　　　　要素のスタイル情報を指定する。CDATE使用
  title       %Text;         #IMPLIED  -- advisory title --"
　　　　　　　　　　　　　　　　　　　　要素に関する助言的情報
  >

<!ENTITY % i18n　　　　　　　　　　　 （i18nに分類されている、実体宣言）
 "lang        %LanguageCode; #IMPLIED  -- language code --　
　　　　　　　　　　　　　　　　　　　　要素の属性値及び内容テキストの基本言語を指定
  dir         (ltr|rtl)      #IMPLIED  -- direction for weak/neutral text --"
　　　　　　　　　　　　　　　　　　テキストの方向を指定する。 (ltr：左から右へ、rtl：右から左へ) 
  >

<!ENTITY % events　　　　　　　　　　 （eventsに分類されている、実体宣言）
 "onclick     %Script;       #IMPLIED  　マウスをクリック時のイベント
  ondblclick  %Script;       #IMPLIED  　マウスダブルクリック時のイベント 
  onmousedown %Script;       #IMPLIED  　マウスが押された時のイベント 
  onmouseup   %Script;       #IMPLIED  　マウスが離された時のイベント 
  onmouseover %Script;       #IMPLIED  　マウスが要素の上に移動した時のイベント
  onmousemove %Script;       #IMPLIED  　マウスが要素の上を移動した時のイベント
  onmouseout  %Script;       #IMPLIED  　マウスが要素の上から離れた時のイベント
  onkeypress  %Script;       #IMPLIED  　マウスが要素の上から離れた時のイベント
  onkeydown   %Script;       #IMPLIED  　マウスが要素の上から離れた時のイベント
  onkeyup     %Script;       #IMPLIED  　キーが離された時のイベント--"
  >
のように記述されていました。

{src}以下も属性リストです。参照記述でなく直接記述になっています。

CDATAとは「実体参照も含む文字データ」で前後の空白は無視され、途中のタブ・改行コードなどは空白に置き換えられます。
#REQUIRED は「省略不可」です。
#IMPLIED　は「省略された場合はブラウザ（アプリケーション）に依存します。」
dir 属性は「値」に ltr か rtl を伴います。 (ltr|rtl)は「（　）」でグループの範囲を示します。「 ltr|rtl 」で、[ltr]と[rtl]のいずれかがが出現しなければならない。双方同時に出現してはならないことを表しています。「ltr：left to right」「rtl:right to left」のことで、文字列の方向性を指示します。
{src}以下[IMG]の取り得る[属性]が記述され、同行に[値]が記述されています。
属性は「% attrs」以外、上記１２個が挙げられていましたが、HTML4.01 Strict DTDでは下段４個が削除され下記になりました。
[src] ：uri 画像の所在を指定しています。値は画像フアイル名です。gif、jpg、pngの画像が使用できます。
通常はsrc属性が指し示す画像と行の中で置き換えられるが、左寄せや右寄せにされた画像は行外に配置されます。

HTML4.01 Strict DTD（HTML4.01の中にあって厳格仕様、XHTMLに通じる仕様）

<!ELEMENT IMG - O EMPTY               -- Embedded image -->
<!ATTLIST IMG
　%attrs;　　　　　　　　　　　　　　-- %coreattrs, %i18n, %events --
　src　　　　 %URI;　　 #REQUIRED　 埋め込むイメージのURI記述を要求　（必須）
　alt　　　　 %Text;　　#REQUIRED　 代替えテキスト-短い記述-　 　　　（必須） 
　longdesc　　%URI;　　 #IMPLIED　　長い記述へのリンク
　name　　　　CDATA　　 #IMPLIED　　name属性でスクリプトから参照できるようにする
　height　　　%Length;　#IMPLIED　　画像・オブジェクトの高さ寸法 
　width　  　 %Length;　#IMPLIED　　画像・オブジェクトの幅寸法
　usemap　　　%URI;　　 #IMPLIED　　クライアント側イメージマップ
　ismap　　　(ismap)　　#IMPLIED　　サーバー側イメージマップ

トップへ戻るスタイルシート目次へ戻る
 メモ帳で作るWEBページリンク編・画像編２ body要素のDTD、a要素のDTDへ進む

メモ帳で作るWEBページ 画像編