Home | 第93号 | 第94号 | 第95号 | 目次

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

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。

なお文中、疑問点や分からない点がありましたら、ご遠慮なく当方まで メールにてご質問ください。

＜第94号＞ 今週のおさらい
　　　　　　　　　　　　　毎週金曜日配信　What's New 2004年5月27日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
　  ■ HTML講座  第35回 --- イメージマップの作成
　　■ CSS講座　第14回 --- 浮遊コンテンツ
◆ HTML講座 --- イメージマップの作成
イメージマップとは、１枚の画像の中に閲覧者の操作に反応する複数のリンクを埋め込む手法を指します。画像の中で、特定の領域を設定しその場所をクリックすると、目的のページに移動させます。
交通情報 ホーム 天気予報
例えば、右のヘタクソな絵で示したように、ポインティング・デバイス (マウスなど) でなぞってみると、幾つかのリンクが埋め込まれている様子がお分かりになるでしょう。
このように、イメージマップは画像と関連したリンク先を設定することで、視覚的なナビゲーション効果を得られる利点があります。特別なスクリプトやプログラムなしに作成することができることから、多くの Webサイトで利用されています。
画像の中の領域を指定するためには、イメージマップを定義する map要素の中で配置する area要素を使います。
■ イマージマップを構成するための要素
画像にイマージマップを設定するためには、当然画像が必要です。そして以下の要素とその属性を用いて、画像にリンクを埋め込みます。
イメージマップを構成する要素とその属性
要素名 属性 意味
map クライアント・サイド・イメージマップを定義する (終了タグ必須)
name 画像の識別子を指定する
area マップの領域を定義する (空要素)
shape 領域の矩形を指定する (四角、円形、多角形など)
coords 領域の座標をピクセル単位で指定する
href リンク先の URI を指定する
alt リンク先を簡潔に述べた代替テキストを用意する
リンクを埋め込む領域は、さまざまな形が想定されます。そのため、shape属性 shape属性で定義されている矩形の形を選びます。
以下は、shape属性の値を示したものです。
こうした要素と属性を踏まえて、具体的なイメージマップを作成します。
イメージマップのサンプル
(詳しい HTML構文は、今週のメールマガジン「第94号」をお読みください。)
■ イメージマップ利用の注意点
冒頭で説明したとおりイメージマップは画像を使います。 (必ずしも必須ではないが) そのため、画像表示を「オフ」にしている、または非視覚系ブラウザを利用している環境に配慮する必要があります。
マップ領域を指定する shape属性 では alt属性が定義されていますので、リンク先の情報を簡潔にまとめたテキストを用意するようにしましょう。
また、イマージマップ以外にもテキストベースでナビゲーションを提示することも忘れないようにしましょう。アクセシブルな環境を提供するためにも大変重要なことです。
PageTop
◆ CSS講座 --- 浮遊コンテンツ
このページで描かれている画像は、いずれも「浮遊」という手法を使い、画像の反対側にテキストを回り込ませています。
画像に何らかの説明を提示する場合、結構便利な機能でサイト内のいたるところで採用しています。
また、浮遊を指定するコンテンツに横幅を指定することで複数の浮遊コンテンツを横に並べ、まるでテーブルで作成したようなレイアウトさえも実現可能です。当サイトのトップページでも採用しています。
■ 浮遊をコントロールする
浮遊を設定するスタイルシートは floatプロパティを使います。また、浮遊を解除するためには clearプロパティを使います。
浮遊コンテンツを作成するプロパティとその値
CSS 値 意味
float 浮遊を定義する
left 浮遊を左に配置し、その右側に他の要素を回り込ませる
right 浮遊を右に配置し、その左側に他の要素を回り込ませる
none 浮遊させない (デフォルト値)
clear 浮遊を解除する
left 左に配置した浮遊を解除する
right 右に配置した浮遊を解除する
both 右、あるいは左、あるいは両方の浮遊を解除する
This page is Valid HTML 4.01! 初版公開日 2004年5月27日
Copyright（C） 2002-2004 banban@scollabo.com