TOP > Back > Place > Next

テキストと画像回り込みの解除

・回り込みを解除する

フロート要素を利用することで、ページデザインの自由度はかなり向上します。ところが、どこまで回り込みが行われるかは、あなた自身が決めることです。回り込みを終わらせるには、そこで忘れずに回り込みを解除する処理を行う必要があります。
これを、怠ると指定以降のテキストは延々回り込み指定のままです。


下の画像はMOMO's pageさんより、戴いた画像です。

ソース:通常は、罫線の場所に“文字列”と思ってください。

<IMG SRC="horse-hansei.gif" alt="サンプル" style="float:RIGHT">
<HR>
<HR>
<HR>
<HR>
<HR>
<HR>

表示結果:画像を右寄せして、単に横に5本の罫線を引いてみたものです。

サンプル





左右のフロート要素(回り込み)を、終わるには、STYLE="CLEAR : 値 "を使い解除します。(左、または右側のみの回り込みの解除をする「LEFT/RIGHT」も指定できます)
回り込みを利用した場合、回り込みの終了位置には必ず「<要素 STYLE="CLEAR : BOTH">」を忘れないようにしましょう。

・<要素 STYLE="CLEAR : BOTH">
左右の回り込み、全てを解除
・<要素 STYLE="CLEAR : LEFT">
FLOAT : LEFT の左側の回りこみを解除
・<要素 STYLE="CLEAR : RIGHT">
FLOAT : RIGHTの右側の回りこみを解除

ソース:3本目の罫線までは画像を回り込ませ、4本目からは画像の下にした場合の「CLEAR属性」を利用します。
<IMG SRC="cat-home.gif" ALT="サンプル" style="float:RIGHT"> <HR> <HR> <HR> <HR STYLE="CLEAR : RIGHT"> <HR>

表示結果:サンプル





回り込みを解除したいと思った場合、解除したい要素<開始タグ>内にstyle="clear:のスタイルシートに設定します。

例えば:
<P>
<IMG SRC="abc.gif" style="float:left">のように回り込みを指定し <P>テキスト(文字列)幾つかの要素の後、 <P>テキスト(文字列)</P>ココまで回り込みと思った!とします。 すぐ後の要素に「STYLE="CLEAR:値"」を記述します。(値は、LEFT/RIGHT/BOTH) <P style="clear:left">テキスト(文字列)</P>
使用例:



・イメージマップ?・・・クリッカブルマップって?・・・

一枚の画像で、それぞれにクリック出来るのを見かけます。それが、イメージマップ(クリッカブルマップ)です。一枚の画像に複数のリンクボタンを作り指定した範囲にURL(URI)を指定するだけなのですが、少し厄介なもので「三つの要素」、「5個の属性」、「8個以上の属性値」と「リンクの数だけの座標計算」の使い分けが必要になります。
座標計算は、その手のソフトがあります。Webページでも、簡単に教えてもらえるところもあります。(下記にイメージマップ用のフリーソフト紹介)

イメージマップには、「クライアントサイド」と「サーバーサイド」があります。通常、プロバイダのサーバー(一部分)を借ている私達が使用するのは「クライアントサイド・イメージマップ」です。
「サーバーサイド・イメージマップ」は、指定方法が違うので会社やプロバイダ又は個人で、サーバー自体を持っている方に限ります。

簡単に説明しましょう。まず、用意するタグは3種類
おなじみの「<IMG SRC="ファイル名" USEMAP="#マップ名">」(SRC="ファイル名")に、クライアントサイド・イメージマップを使用する USEMAP 属性指定をし、半角英数で任意の名前「"#マップ名"」(USEMAP=#任意の名前)を#の後に記述します。
例:<IMG SRC="nihonn-zu.jpg" USEMAP="#jp-map" alt="日本地図">

「<MAP NAME="マップ名">〜〜</MAP>」、クライアントサイド・イメージマップ画像を定義し「NAME="マップ名"」は、イメージマップ画像を関連付けるために「"#マップ名"」でつけた任意の名前を記述します。
例:<MAP NAME="jp-map">リンクの数だけの<AREA>要素が入ります。</MAP>

リンクの数だけの、「<AREA HREF="リンク先のURL" SHAPE="範囲の形" COORDS="X座標(px),Y座標(px)の数">」
さて、ココからが本領発揮して下さい。

・SHAPE="範囲の形"
SHAPE属性は領域の形を決めます。
  • 円="CIRCLE"
  • 矩形(四角形・長方形)="RECT"(必ず角度が90度のもの)
  • 三角形以上の多角形="POLY"
  • 画像全体="DEFAULT"
・COORDS="X座標(px),Y座標(px)の数"
SHAPE="範囲の形"によって座標の指定数は変ります。座標は全て「px=ピクセル」で座標ごとに「, =カンマ」で区切ります。(因みに、SRC="ファイル名"の左上が0pxです。)
  • "CIRCLE"の場合、円の中心の「"X座標,Y座標,R半径"」
  • "RECT"の場合、「左上端の"X座標,Y座標,右下端の"X座標,Y座標,」の順番です。
  • "POLY"の場合、全ての角(頂点)の"X座標,Y座標,の順(右回りでも左回りでもよい)で計算し最初の"X座標,Y座標,の同じ値を再び最後に記述します。(普通は時計回り)
    例:三角形の場合「"A,B,C,D,E,F,A,B"」 五角形の場合「"A,B,C,D,E,F,G,H,I,J,A,B"」です。
  • "DEFAULT"は、もちろん、座標指定なしです。

他に<AREA>要素に入る属性は「TITLE="説明"」「TARGET="ウィンドウ"」「ACCESSKEY="ショートカットキー"」「TABINDEX="領域の選択順序"」等・・・
もし、<AREA>要素の領域が重なった(重複)したときは、ブラウザによって違いますが、最初にマウスポインタが通過している領域や<AREA>指定の上位を優先します。

製作が簡単な、フリーウエア製作ソフトもあります。Win用ですが、クリッカブルマップエディタ「C-MAP(シーマップ)」「Map Maker AZUKI」「Client Side Image Map Editor」です。

私はシェアウエアですが、上記の中で一番のお勧めは、Map Maker AZUKI です。
Map Maker AZUKI の使い方を私なりに解説した「Map Maker AZUKI Support Page.」もあります。


タグ解説


IMG

image:画像:

<IMG SRC="URL" >で、SRC属性で指定したURIの画像を貼り込みます。
空要素です。

以下の属性が指定できます。

SRC="URL"
貼り込む画像のURIを指定します。IMG要素の中で必ず指定します。
ALT="文字列"必須属性
画像が表示されないときの、代替情報となる文字列を指定します。
TITLE="文字列"
表示画像に対しての短い説明文。
WIDTH="数値"
横幅をピクセル数、または親要素からの比率で指定します。
HEIGHT="数値"
縦の幅をピクセル数、または親要素からの比率で指定します。
STYLE="FLOAT : LEFT/RIGHT"画像の左右位置をフロート要素で指定します。
STYLE="VERTICAL-ALIGN : LEFT/RIGHT"
画像とテキストの上下位置
(top/middle/baseline/middle/sub/super/bottom/text-top/text-bottom/n%/数値単位)
STYLE="BORDER : 数値px"
周囲の枠線の幅を指定します

 【←BACKNEXT→

Copyright (c) Producer by System KS. 2001 All rights reserved.