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

                毎週金曜日配信 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つの画像の中に複数のリンクを埋め込むことを指し、
 基本的に2つの方法があります。

 □クライアント・サイド・イメージマップ
  作者が用意した画像に、他のプログラムを使うことなくリンクを埋め込むと
  きに利用します。複雑なプログラムを必要としないため応答性が速く、比較
  的簡単に設置できることから広く利用されています。

 □サーバ・サイド・イメージマップ
  主に CGIを利用して使います。サーバに別途 CGIプログラムを置き、閲覧者
  の操作によって、リンクのデータが送信され、イメージマップとして実行し
  ます。欠点は、一旦プログラムによって処理されるため応答性が遅く、閲覧
  者が集中したときには、タイムアウトする危険があります。

  今回のは、前者のクライアント・サイド・イメージマップを中心に解説しま
 す。なお、今回は「教材」を用意しましたので、お手数ですが以下のページか
 らダウンロードしてください。
  受信時間を短縮するため、ファイルは圧縮していますので「解凍」してお使
 いください。なお解凍後、適当なフォルダを作って移動してください。

   教材のダウンロード
   http://www.scollabo.com/banban/daf/material.html

 ■イメージマップの仕組み
 イメージマップは、1つの画像中に幾つかの区切られた領域を指定し、その領
 域にリンクを埋め込むことで実現します。
  領域は、HTMLで定義されている「area要素」で指定しますが、領域の矩形の
 座標を指定します。座標はピクセル単位で行います。

  また、使用する画像に対して、イメージマップとして使う「usemap属性」で
 マップを指定する「map要素」と関連付ける識別子 (ID) を設定します。
 「area要素」は、必ず「map要素」の子要素として使います。

 □map要素
 イマージマップを定義し、指定された画像を関連付けます。この要素の範囲に
 子要素として「area要素」を配置し、領域を指定します。

  map要素の属性
   name 指定された画像で示す「usemap属性」の識別子を指定します。

 □area要素の機能とその属性
 areaとは「エリア」、つまり領域を指す言葉です。この要素内に矩形の領域と
 リンク席を指定します。

  area要素の属性
   shape 領域の形を指定します。形は以下の4つが定義されています。
       rect:四角形、 circle:円形、 poly;多角形、
       default:画像全体

   coords 領域の座標をピクセル単位で指定します。矩形の種類によって座
       標が異なりますので注意してください。

   href  リンク先の URI を指定します。

   alt   画像が表示されない環境のために代替テキストを用意します。

 ■領域と座標の指定
 以下の図を参照してください。1つの画像の中に四角と三角の矩形を示したも
 のです。(テキストベースなのでうまく表示できません。等副フォントでお読
 みください。)

      ┏━━━━━━━━━━━━━━━━━━━━━━━━┓
      ┃ →┌────┐     →│\        ┃
      ┃  │ A  │      │  \       ┃
      ┃  │    │      │ B \     ┃
      ┃  └────┘←    → ───── ←   ┃
      ┗━━━━━━━━━━━━━━━━━━━━━━━━┛

  上記の図は、画像中にAという四角の領域と、Bという三角の領域を表した
 ものとお考えください。また、矢印が付いている点に注目してください。

  最初の四角形視覚系を示す領域を指定するために、area要素の shape属性で
 「rect」を指定します。このとき、座標を決める coords属性には、矢印で示し
 た2つの位置を指定します。
  四角形の座標は、矢印で表した左上の座標と右下の座標を指定します。座標
 はどちらも画像全体のX座標とY座標を指定します。

  X座標とは画像の上からの位置、Y座標は画像の左からの位置をピクセル単
 位で指定します。それぞれの座標をカンマで区切って指定します。

  書式
  coorde="(左上のX座標,左上のY座標,右下のX座標,右下のY座標)

  例文
  <area shape="rect" coords="15,20,170,115" href="index.html">

  三角形の場合にも矢印で表した3つの座標を指定します。三角形のそれぞれ
 の頂点のX座標とY座標を指定することで、領域が決まります。
  なお、三角形を表す場合、shape属性は poly (多角形) を指定します。

  領域が円形の場合 shape属性の値は circle (円形)を指定し、領域は円の中
 心点のX座標およびY座標と、その半径をカンマで区切って指定します。この
 場合もすべてピクセル単位となります。
  なお、画像が表示できない環境に配慮して、イメージマップのほかにテキス
 トベースによるリンクを明示しておくことも大切なことです。

  これらを踏まえて、教材で提供した画像を使ってイメージマップを作ります。
 テキストエディタを起動して、以下の構文をタイプしてください。

<!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要素の背景色を白色、文字色を黒色に設定。
 また、左右の余白をブラウザの比率で6%としました。

 ■h1 { background: #069; color: #fff; font-size: 1.2em; padding: 2px; 
         text-indent: 1em }

  第一見出し要素の文字色を白色、文字サイズを通常の2割り増し、背景色を
 ややくすんだ青色としまし。また、とうそ内の余白を上下左右とも2ピクセル
 とし、テキストのインデント (字下げ) を1文字分にしています。

 ■.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要素は、閲覧者の操作に反応してリンクするための領域を設定します。
 ここでは領域の矩形が多角形であることを示し、各頂点の角の座標を設定して
 います。座標は2つの座標を組にして全部で5つの頂点角を指定します。
  最初の 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) を適用しています。クラスは1つのペー
 ジで何度の繰り返し利用することが可能です。
  イマージマップを利用するとき、それに対応していない環境に配慮して、テ
 キストベースの代替リンクを用意するように心がけましょう。

◆まとめ

  イマージマップを作成する場合、画像の中で配置する得よう域の座標を求め
 ることはとても難しいものです。今回のサンプルを作成する際、イメージマッ
 プの座標の設定は、アドビ社の 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講座(第2回) 浮遊コンテンツ

 ある要素の右、あるいは左側に他の要素を回り込ませることを「浮遊:フロー
 ト」と呼び、スタイルシートでは 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な厳格仕様には使うことができません。

  スタイルシートを使うことのメリットは、受信環境を選ばず、ブラウザ銘柄
 を指定する必要がありません。言い換えれば、どのような閲覧環境にも対応で
 きる利点があります。
  今回は、スタイルシートを使った多彩な浮遊コンテンツについて解説します。

 ■浮遊コンテンツを利用する意味
 ブロックレベル要素を2つ横に並べたり、ある画像の横に説明文を配置したり
 その用途はさまざまです。一般に要素を横に並べるという手法にテーブルを利
 用するケースがありますが、テーブルにはそれなりのデメリットがあるので、
 レイアウトに用いることは推奨されておりません。
  当メールマガジンの Webサイトにおけるトップページでは、一見するとテー
 ブルを使っているように見えますが、実は浮遊という手法を用いています。

  浮遊コンテンツの手法は、テーブルでは表せない効果的な利用法があります。
 まさにスタイルシートを利用した実にダイナミックな表現といえるのではない
 でしょうか。

 ■スタイルシートによる浮遊コンテンツの利用法
 先ほども述べたとおり、スタイルシートによる浮遊コンテンツは float属性を
 使います。ある要素に対して浮遊させるために用います。

  □ float属性の値とその機能
  浮遊するときの値は以下のとおりです。基本的に左か右を選択しますが、中
  央に配置することはできません。

   left  指定した要素を左側に配置しその右側に他の要素を配置する
   right  指定した要素を右側に配置しその左側に他の要素を配置する
   none  左右への回り込みをしない (デフォルト値)

  □ 書式
  要素を浮遊させる具体的な書式は以下のとおりです。

   img { float: left }

  画像を表す img要素に対して左側に浮遊する設定です。この要素に続く他の
  要素が右側に配置されます。

  float属性を利用したサンプル (float属性を2つ使っています)
  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属性の値は、以下の3つが定義されています。

   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では「空タグ」の行末にスラッシュがあ
 りますので、それを削除してお使いください。

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

◆メールマガジン配信についてのお願い

 このメールマガジンを配信して丸2年になります。おかげさまで「まぐまぐ」
 の「殿堂入りメールマガジン」にも推薦されるようになりました。
  今まで「毎週金曜日」という配信間隔でお届けしてきましたが、個人的な都
 合により「隔週金曜日」に変更させていただきたくお願いします。

  昨年末に長年勤めた会社を辞め、現在は独立して小さいながらも自分の会社
 を設立しました。会社といっても従業員などは1人もなく、妻や古い友人に手
 伝ってもらう程度の吹けば飛ぶような「零細企業」です。

  業務のほとんどを私1人で行っており、極めて多忙の日々を送っています。
 納期を確保するため土日も出勤し、ほぼ毎日深夜に帰宅しています。わずかな
 時間の中で 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

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

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

 気がつけば5月も終わろうとしています。今年ほど季節感のない日々を過ごす
 のは初めてです。時間ばかりに追いかけられ、気が休まる暇もありません。

  1日が24時間しかないことに腹を立てたり焦ったり、そうした中で精神状態
 がおかしくなってくることを時折自覚します。おまけに一生懸命がんばっても
 それに見合う収入の少なさに愕然とします。
  それでも仕事にあるうちはマシです。仕事がなくなったらどうしようか、と
 いう恐怖もあります。

  そのうちきっといいことがある、というかすかな希望を抱いて自分を励まし
 ています。そう、きっといいことあるさ、でなけりゃやってらんないよね。

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

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

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


This page is Valid HTML 4.01! 最新公開日 2004年6月8日
Copyright(C) 2002-2004 banban@scollabo.com