毎週金曜日配信 What's New 2004年5月28日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
┏┏┏┏ 初心者のためのホームページ作り/Web for beginner
┏┏┏ http://www.scollabo.com/banban/
┏┏
┏ ＜第94号＞
banban@scollabo.com
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格
的な Webページ作成に役立つことを目的に配信されております。
当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となって
います。なお、このマガジンは等幅フォントでお読みいただくと快適に読める
ようになります。
今週のコンテンツ
■ HTML講座 第35回 --- イメージマップ
■ CSS講座 第14回 --- 浮遊コンテンツ
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆HTML講座 （第35回） イメージマップの作成
イメージマップとは、1つの画像の中に複数のリンクを埋め込むことを指し、
基本的に２つの方法があります。
□クライアント・サイド・イメージマップ
作者が用意した画像に、他のプログラムを使うことなくリンクを埋め込むと
きに利用します。複雑なプログラムを必要としないため応答性が速く、比較
的簡単に設置できることから広く利用されています。
□サーバ・サイド・イメージマップ
主に CGIを利用して使います。サーバに別途 CGIプログラムを置き、閲覧者
の操作によって、リンクのデータが送信され、イメージマップとして実行し
ます。欠点は、一旦プログラムによって処理されるため応答性が遅く、閲覧
者が集中したときには、タイムアウトする危険があります。
今回のは、前者のクライアント・サイド・イメージマップを中心に解説しま
す。なお、今回は「教材」を用意しましたので、お手数ですが以下のページか
らダウンロードしてください。
受信時間を短縮するため、ファイルは圧縮していますので「解凍」してお使
いください。なお解凍後、適当なフォルダを作って移動してください。
教材のダウンロード
http://www.scollabo.com/banban/daf/material.html
■イメージマップの仕組み
イメージマップは、１つの画像中に幾つかの区切られた領域を指定し、その領
域にリンクを埋め込むことで実現します。
領域は、HTMLで定義されている「area要素」で指定しますが、領域の矩形の
座標を指定します。座標はピクセル単位で行います。
また、使用する画像に対して、イメージマップとして使う「usemap属性」で
マップを指定する「map要素」と関連付ける識別子 (ID) を設定します。
「area要素」は、必ず「map要素」の子要素として使います。
□map要素
イマージマップを定義し、指定された画像を関連付けます。この要素の範囲に
子要素として「area要素」を配置し、領域を指定します。
map要素の属性
name 指定された画像で示す「usemap属性」の識別子を指定します。
□area要素の機能とその属性
areaとは「エリア」、つまり領域を指す言葉です。この要素内に矩形の領域と
リンク席を指定します。
area要素の属性
shape 領域の形を指定します。形は以下の４つが定義されています。
rect：四角形、 circle：円形、 poly；多角形、
default：画像全体
coords 領域の座標をピクセル単位で指定します。矩形の種類によって座
標が異なりますので注意してください。
href リンク先の URI を指定します。
alt 画像が表示されない環境のために代替テキストを用意します。
■領域と座標の指定
以下の図を参照してください。１つの画像の中に四角と三角の矩形を示したも
のです。（テキストベースなのでうまく表示できません。等副フォントでお読
みください。）
┏━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ →┌────┐ →│＼ ┃
┃ │ Ａ │ │ ＼ ┃
┃ │ │ │ Ｂ ＼ ┃
┃ └────┘← → ───── ← ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━┛
上記の図は、画像中にＡという四角の領域と、Ｂという三角の領域を表した
ものとお考えください。また、矢印が付いている点に注目してください。
最初の四角形視覚系を示す領域を指定するために、area要素の shape属性で
「rect」を指定します。このとき、座標を決める coords属性には、矢印で示し
た２つの位置を指定します。
四角形の座標は、矢印で表した左上の座標と右下の座標を指定します。座標
はどちらも画像全体のＸ座標とＹ座標を指定します。
Ｘ座標とは画像の上からの位置、Ｙ座標は画像の左からの位置をピクセル単
位で指定します。それぞれの座標をカンマで区切って指定します。
書式
coorde="(左上のＸ座標,左上のＹ座標,右下のＸ座標,右下のＹ座標)
例文
<area shape="rect" coords="15,20,170,115" href="index.html">
三角形の場合にも矢印で表した３つの座標を指定します。三角形のそれぞれ
の頂点のＸ座標とＹ座標を指定することで、領域が決まります。
なお、三角形を表す場合、shape属性は poly (多角形) を指定します。
領域が円形の場合 shape属性の値は circle (円形)を指定し、領域は円の中
心点のＸ座標およびＹ座標と、その半径をカンマで区切って指定します。この
場合もすべてピクセル単位となります。
なお、画像が表示できない環境に配慮して、イメージマップのほかにテキス
トベースによるリンクを明示しておくことも大切なことです。
これらを踏まえて、教材で提供した画像を使ってイメージマップを作ります。
テキストエディタを起動して、以下の構文をタイプしてください。
<!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: #fff;
color: #000;
margin-left: 6%;
margin-right: 6% }
h1 {
background: #069;
color: #fff;
font-size: 1.2em;
padding: 2px;
text-indent: 1em }
.cent {
text-align: center }
-->
</style>
</head>
<body>
<h1>イメージマップの作成</h1>
<p class="cent">
<img src="map.png" width="367" height="273" alt="" usemap="#banban">
</p>
<map name="banban">
<area shape="poly" alt="お問い合わせ"
coords="196,143, 197,223, 124,250, 74,187, 119,120"
href="mailto:banban@scollabo.com">
<area shape="circle" alt="更新情報" coords="273,90,68"
href="what.html">
<area shape="rect" alt="ホームに戻る" coords="27,24,175,105"
href="index.html">
</map>
<p class="cent">
<a href="index.html">Home</a> / <a href="what.html">更新情報</a> /
<a href="mailto:banban@scollabo.com">Mail</a>
</p>
</body>
</html>
(注意)
メールマガジンの横幅制限のため、幾つか改行して表現しています。HTMLを
コピーして利用する際には、余分な余白を削除してからお使いください。
サンプル実行結果
http://www.scollabo.com/banban/magazine/ms/sample_94-1.html
◆解説
（スタイルシートから）
■body { background: #fff; color: #000; margin-left: 6%;
margin-right: 6% }
コンテンツを配置する body要素の背景色を白色、文字色を黒色に設定。
また、左右の余白をブラウザの比率で６％としました。
■h1 { background: #069; color: #fff; font-size: 1.2em; padding: 2px;
text-indent: 1em }
第一見出し要素の文字色を白色、文字サイズを通常の２割り増し、背景色を
ややくすんだ青色としまし。また、とうそ内の余白を上下左右とも２ピクセル
とし、テキストのインデント (字下げ) を１文字分にしています。
■.cent { text-align: center }
centというクラス名を設定し、このクラスで指定されたようそのコンテンツ
を中央ぞろえで表示させます。
（HTMLから）
■<p class="cent">
<img src="map.png" width="367" height="273" alt="" usemap="#banban">
</p>
段落を示す p要素は、スタイルシートのクラス「cent」を適用します。画像
をあらわす img要素には、イメージマップの識別子「banban」に対して、ハッ
シュマークをつけて指定します。イメージマップを形成する上で、この識別子
は map要素の「名前」と一致しなくてはなりません。
alt属性を「空」にしたのは、area要素で示す alt属性と混同させないために
あえて何も指定しませんでした。
■<map name="banban"> 〜 </map>
map要素は、クライアント・サイド・イメージマップを定義するために使いま
す。この要素内に、イメージマップの領域に関する設定を行う area要素を配置
します。
name属性は、img要素内で指定した usemap属性の識別子と一致させなければ
なりません。
■<area shape="poly" alt="お問い合わせ"
coords="196,143, 197,223, 124,250, 74,187, 119,120"
href="mailto:banban@scollabo.com">
area要素は、閲覧者の操作に反応してリンクするための領域を設定します。
ここでは領域の矩形が多角形であることを示し、各頂点の角の座標を設定して
います。座標は２つの座標を組にして全部で５つの頂点角を指定します。
最初の 196,143, は、上から 196ピクセルの位置、左から 143ピクセルの位
置という具合に設定しています。それぞれの頂点を線で結ぶと多角形が形成さ
れます。
また alt属性で示されるテキストは、画像表示ができない環境を考えて必ず
設定するようにします。href属性はリンク先を指定します。
なお area要素は「空タグ」なので、終了タグは必要ありません。
■<area shape="circle" alt="更新情報" coords="273,90,68"
href="what.html">
この alea要素では領域が円形 (circle) を示しています。その座標は画像
全体の上から 273ピクセル、左から 90ピクセル、半径が 68ピクセルであるこ
とをあらわしています。
■<area shape="rect" alt="ホームに戻る" coords="27,24,175,105"
href="index.html">
この area要素では、領域が四角形 (rect) を示しています。座標は左上と
その対角である右下の位置を指定します。
■<p class="cent">
<a href="index.html">Home</a> / <a href="what.html">更新情報</a> /
<a href="mailto:banban@scollabo.com">Mail</a>
</p>
ここでも段落要素にクラス (cent) を適用しています。クラスは１つのペー
ジで何度の繰り返し利用することが可能です。
イマージマップを利用するとき、それに対応していない環境に配慮して、テ
キストベースの代替リンクを用意するように心がけましょう。
◆まとめ
イマージマップを作成する場合、画像の中で配置する得よう域の座標を求め
ることはとても難しいものです。今回のサンプルを作成する際、イメージマッ
プの座標の設定は、アドビ社の ImageReady CS) で作成しました。
高機能な画像ソフトは高価ですのでお勧めすることはできませんが、フリー
のイメージマップ作成ソフトが幾つかリリースされていますので、参考にして
ください。
■Windows向けソフト
まっぷエディタ（す〜のお家）
http://www3.to/su-house （フリー）
Client Side Image Map Editor（本気でフリーソフト）
http://hp.vector.co.jp/authors/VA001944/freesoft/index.html
UseMap（あすかぜ factory）
http://www.asukaze.net/soft/index.html （フリー）
■Macintosh向けソフト
RGB&HexColorPicker++
http://www.kenjikojima.com/ （シェアウェア）
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆CSS講座（第２回） 浮遊コンテンツ
ある要素の右、あるいは左側に他の要素を回り込ませることを「浮遊：フロー
ト」と呼び、スタイルシートでは float属性によって定義されています。
浮遊コンテンツを実現するのには、スタイルシート以外にも可能です。非推
奨属性ながら align属性を使うことで、他の要素を左右に回り込ませることが
できます。
以下はその例文です。
<body>
<p><img aligh="left" src="niagara.jpe" width="250" height="180"
alt="ナイアガラの滝">
ナイアガラの滝は、アメリカとカナダの国境に位置し、(以下省略）
</p>
サンプル実行結果
http://www.scollabo.com/banban/magazine/ms/sample_94-2.html
このように align属性を使うだけで浮遊コンテンツの表現がが可能となって
います。ただし、この場合の文書型定義は Transitional にする必要がありま
す。また、Strictな厳格仕様には使うことができません。
スタイルシートを使うことのメリットは、受信環境を選ばず、ブラウザ銘柄
を指定する必要がありません。言い換えれば、どのような閲覧環境にも対応で
きる利点があります。
今回は、スタイルシートを使った多彩な浮遊コンテンツについて解説します。
■浮遊コンテンツを利用する意味
ブロックレベル要素を２つ横に並べたり、ある画像の横に説明文を配置したり
その用途はさまざまです。一般に要素を横に並べるという手法にテーブルを利
用するケースがありますが、テーブルにはそれなりのデメリットがあるので、
レイアウトに用いることは推奨されておりません。
当メールマガジンの Webサイトにおけるトップページでは、一見するとテー
ブルを使っているように見えますが、実は浮遊という手法を用いています。
浮遊コンテンツの手法は、テーブルでは表せない効果的な利用法があります。
まさにスタイルシートを利用した実にダイナミックな表現といえるのではない
でしょうか。
■スタイルシートによる浮遊コンテンツの利用法
先ほども述べたとおり、スタイルシートによる浮遊コンテンツは float属性を
使います。ある要素に対して浮遊させるために用います。
□ float属性の値とその機能
浮遊するときの値は以下のとおりです。基本的に左か右を選択しますが、中
央に配置することはできません。
left 指定した要素を左側に配置しその右側に他の要素を配置する
right 指定した要素を右側に配置しその左側に他の要素を配置する
none 左右への回り込みをしない (デフォルト値)
□ 書式
要素を浮遊させる具体的な書式は以下のとおりです。
img { float: left }
画像を表す img要素に対して左側に浮遊する設定です。この要素に続く他の
要素が右側に配置されます。
float属性を利用したサンプル (float属性を２つ使っています)
http://www.scollabo.com/banban/magazine/ms/sample_94-3.html
□ floatの解除
float属性を解除しない限り、設定した要素の反対側に回り込もうとします。
そのため、作者の意図しない表示になる場合があります。
float属性を解除しないサンプル
http://www.scollabo.com/banban/magazine/ms/sample_94-4.html
そこで、浮遊状態を解除するために、スタイルシートの clear属性を使いま
す。これによって回り込もうとする浮遊を解除します。
clear属性の値は、以下の３つが定義されています。
left float属性で left を指定した場合に解除します。
right float属性で right を指定した場合に解除します。
both left、right に関わらず両方の回り込みを解除します。
□書式
以下は、罫線を表示する hr属性に浮遊の解除を行います。
hr { clear: left }
■実戦的な浮遊コンテンツの作成
浮遊を設定する要素にあらかじめ横幅を指定し、複数の浮遊コンテンツを横に
並べることで、テーブルで表現するようなレイアウトを構築することも可能に
なります。
テーブルでは、データをすべて受信しなければ表示が開始できないという独
特の欠点があります。そうした欠点を補い、閲覧者にストレスを感じさせない
ページ作りは、ある意味重要なことでもあります。
こうした実戦的な浮遊コンテンツの作成についての詳しい解説は本誌「第49
号」で掲載しましたので参考にしてください。当サイトのトップページの手法
が解説されています。
「第49号」今週のおさらい
http://www.scollabo.com/banban/magazine/review_049.html
「第49号」プレーンテキスト版
http://www.scollabo.com/banban/magazine/magazine_049.html
このページでの解説は XHTMLが主体となっておりますが、記述法に注意しな
がら HTMLを作成してください。XHTMLでは「空タグ」の行末にスラッシュがあ
りますので、それを削除してお使いください。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆メールマガジン配信についてのお願い
このメールマガジンを配信して丸２年になります。おかげさまで「まぐまぐ」
の「殿堂入りメールマガジン」にも推薦されるようになりました。
今まで「毎週金曜日」という配信間隔でお届けしてきましたが、個人的な都
合により「隔週金曜日」に変更させていただきたくお願いします。
昨年末に長年勤めた会社を辞め、現在は独立して小さいながらも自分の会社
を設立しました。会社といっても従業員などは１人もなく、妻や古い友人に手
伝ってもらう程度の吹けば飛ぶような「零細企業」です。
業務のほとんどを私１人で行っており、極めて多忙の日々を送っています。
納期を確保するため土日も出勤し、ほぼ毎日深夜に帰宅しています。わずかな
時間の中で Webサイトの運営とメールマガジンの原稿を作成しているのが現状
です。
メールマガジンの廃刊も選択肢としてありましたが、多くの読者の励ましも
あり何とか続けていきたいと考えています。かかる状況をご理解いただき、配
信における変更を伏してお願いいたします。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
今回はここまで。
今週のおさらいは Webページにも掲載しましたので、是非参考までに見ておい
てください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明
しています。あわせて過去の記事のおさらいも掲載しています
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_094.html
次回配信は、6月11日を予定しています。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな
ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなる
と思います。
ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答え
てくれると思います。
発行者 ばんばん
協力 スズキ・コラボレーション 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
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
＜えでぃた〜ず・る〜む＞
気がつけば５月も終わろうとしています。今年ほど季節感のない日々を過ごす
のは初めてです。時間ばかりに追いかけられ、気が休まる暇もありません。
１日が24時間しかないことに腹を立てたり焦ったり、そうした中で精神状態
がおかしくなってくることを時折自覚します。おまけに一生懸命がんばっても
それに見合う収入の少なさに愕然とします。
それでも仕事にあるうちはマシです。仕事がなくなったらどうしようか、と
いう恐怖もあります。
そのうちきっといいことがある、というかすかな希望を抱いて自分を励まし
ています。そう、きっといいことあるさ、でなけりゃやってらんないよね。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応
じておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、スクリプト、HTMLをご自分のページ作成に
自由に使っていただいても差し支えありません。
Copyright(C) 2002-2004 www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
最新公開日 2004年6月8日
Copyright(C) 2002-2004 banban@scollabo.com