home  >>  パソコンで楽しむ  >>  HTML Project2 を使う 2 >> HTML Project2 を使う 2 印刷用  HTML Project2 を使う

HTML Project2 を使う 2

写真を入れたWebページを作る

目次
準備するもの
enmadou.htmlの編集 写真情報の作成 付録
1 別のページに地図を表示する

2 ページの背景に画像を使う
3 自分専用のポータルページ
4 メールアドレスを書かない
5 画像の特定部分からリンク

このテキストは、「HTML Project2 を使う」を一応終了した人が、更にWebページを自分の感性で自由に作られるように作るつもりです。そのためにこのテキストでは、詳細な操作手順をなるべく書かないようにいたします。
 手順に行き詰まったら前回の「HTML Project2 を使う」を読み返してください。きっと解決のヒントがあると思います。
 もし、書かれていないような新しいタグや機能のことでしたら、一先ず自分が出来るやり方で作っておいて、更に詳しい情報を入手して解決してください。Web上には沢山の有益な情報があります。また、既に公開されているWebページのソースを見て理解できる場合もあります。

準備するもの

ページを作る内容により準備するものは違いますが、ここでは一例として地域の文化財の資料と写真を用意します。

写真は公開されているものでしたら、自分で撮影して来ます。公開されていないものでしたら管理者に事情を話して(Webに公開することも話す)撮影の許可を得てから撮影します。既に撮影済みの写真の提供してもらえる場合もあります。写真を画像処理してWebページに掲載できるような画像ファイル(jpg、gif、pngなど)にしておきます。

資料は自治体などで発行している印刷物などで調べます。専門的な知識があればなお良いのですが、その文化財を自分が納得できる程度の内容に編集します。ページを作る人がその内容に関心を持って調査してページを作れば、出来上がったページは見る人に感動を与えることが出来ると思います。

このテキストで使う資料

資料
市指定・史跡
閻魔堂(えんまどう)
東本町2丁目7−40
閻魔市(エンマ市)のお堂。
 戦国の頃まで半田村にあったと伝えられる。
 現在地は町の東の「木戸」の門外で、旅人や浮浪者の宿に利用されていたという。
 江戸中期には下町にあった馬市がこの周辺に移っていたが、天保頃から馬市にかわって旅商人、見せ物、博徒の集う季節市となった。
 縁日は6月14日〜16日、現在のお堂は土蔵造で明治29年4代目篠田宗吉によって建てられた。
以上 柏崎市教育委員会 編集・発行 「柏崎市の文化財」1982/2/15 より
写真
 1枚
 enmadou.jpg 53,124b 450X338ピクセル

ここでは既にWeb上に公開されているページの資料を使って説明します。
実際に公開されてあるものは内容は教育委員会主管課のチェックを受けてありますが、HTML Project2 を使って作成されていませんし、あまり良い出来ではありませんのでソースは参考にしないでください。
HTML4.01 Transitional としてAnother HTML-lint (HTML Project2 のツールにあるフリーのサイト)で文法をチェックすると43個のエラーがありました。

 
Topへ

フォルダとファイル

作業の最初は、HTMLファイルと関連するファイルを入れるフォルダを作ります。

[bunkazai]というフォルダを作り、更にその中に[enmadou]というフォルダを作ります。HTML Project2 のファイルリストの上部に[エクスプローラーの起動]のアイコンがあり新しいフォルダを作ることが出来ます。

次に、編集画面の[新規]を[enmadou.html]というファイル名をつけて[enmadou]フォルダに保存します。
画像ファイルを[enmadou]フォルダに保存します。

enmadou.htmlの編集

文章の入力

用意した資料をenmadou.htmlの編集画面に入力します。キーボードから一字ずつ入力してもよいし、ファイルになっていれば開いて文章を選択してコピー&貼り付けても出来ます。この画面からドラッグしてもコピー&貼り付けが出来ます。

HTMLファイルの形態にします

入力した文章の中にカーソルを置いて、マクロツールバーの[html]をクリックするか、メニューの[ページ設定][HTMLファイルの初期設定]をクリックするとページの基本的なタグが文章全体の前後に入力されます。ここではマクロを使った説明をします。

<title>要素にタイトルを入力

省略できないタイトルを◆の替わりに「閻魔堂(えんまどう)」と入力します。これがブラウザのタイトルバーに表示され、お気に入りに登録されたときに表示されます。

スタイルシートの設定

今回は外部のCSSファイルを呼び出す方法ではなく、このページだけに適用されるHTML文書内に埋め込む方法を使ってみます。

<head>
<style type="text/css">
<!--
-->
</style>

既に<head>要素に入力されている外部のCSSファイルを呼び出すリンク<link rel="stylesheet" type="text/css" href="style.css">を削除します。

削除したところにカーソルを置いたままにして、メニューバーの[スタイル][スタイル情報<style>]をクリックすると[スタイル情報<style></style>: (ヘッダ情報)]が開きます。ここでこのページに適用するスタイルを入力するのですが後で説明することとし、一先ずそのまま[OK]ボタンをクリックすると右のように入力されます。

<head>
<style type="text/css">
<!--
body {background-color:#ccffcc;}
h1 {color:red;text-align:center;}
h2 {color:#0033ff;text-align:center;}
p {line-height:150%;}
-->

</style>

試しに<!---->の間に空白行を作って、語り継ごう柏崎の知恵袋で使った[style.css]を開いて、その内容をコピーしてこの空白行に貼り付けます。

<!---->の間に書かれた文字はブラウザで表示されないコメントとして使われます。ここではスタイルシートに対応していないブラウザでも表示されないように使っています。

左のように入力されて、このページで使われるタグにスタイルシートが適用されます。

ページの背景色はbody {background-color:#ccffcc;}で決まります。この#ccffccを変更すると背景色を変えることが出来ます。見出しの文字の色や説明文の色を自分好みの色に設定してみてください。

ここではページの両端に余白を設定してみます。[body]の値の[{]と[}]の間にカーソルを置いて、スタイルの再編集のダイアログボックスを開きます。ボックスの[margin]のテキストボックスに[0 10%]と入力します。これでmargin:0 10%;と入り上下の余白はなく両端の10%が余白になります。

このように編集画面で直接スタイルシートを設定することが出来ますが、メニューバーの[スタイル][スタイル情報<style>]をクリックして[スタイル情報<style></style>: (ヘッダ情報)]ダイアログボックスで、タグを入力してから右クリックして表示される[登録されたスタイル]のなかから選択して、タグごとに設定することが出来ます。

[登録されたスタイル]は、[スタイル編集]ボタンをクリックして出る[スタイルの編集&登録]ダイアログボックスで登録出来ます。

 
Topへ

ページの見出し

「閻魔堂(えんまどう)」がこのページの主題ですから一番目立つ見出し<h1>を使います。画像処理ソフトでロゴを作る方法がありますが、ファイルサイズを少しでも小さくするためや、デスプレイの解像度の変化に対応しやすくするために、フォントで表示しますが、スタイルシートで枠線や背景色に変化をつけて少し目立たせてみます。

<head>要素の<style>要素の中でh1のスタイルを書いてある[{]と[}]中にカーソルを置いて、メニューバーの[スタイル][スタイルの再編集]をクリックすると、[スタイルの再編集]ダイアログボックスが開きます。colorがredにtext-alignがcenterに設定されています。

[スタイルの再編集]ダイアログボックスの下の[新規]ボタンをクリックして設定してあるものを取り消てから、次のスタイルの設定をします。

項目属性説明
色と背景color#009900見出しの文字の色
色と背景background-color#33ff00見出しの背景色
テキストtext-aligncenterh1のボックス内の文字の横位置
テキストvertical-alignmiddleh1のボックス内の文字の縦位置
ボックスmargin2px 20%h1のボックスの上下2px左右20%の余白
ボックスborder-styleoutset枠線を浮き上がったように表示
ボックスborder-widththick枠線の幅を太くする
ボックスheight1emh1のボックスの高さを1文字分にする

以上の設定が終わると「閻魔堂(えんまどう)」の見出しが浮き上がったように見えます。ここの文字はフォントですから選択して貼り付けることが出来ます。ウインドウの幅との関係は相対的になっていますから、ウインドウを狭くしたりディスプレイの解像度を低くしたりすると文字を2段に表示します。色の値を変えると自分の好みの色合いに出来ます。 ルビをつけるには?質疑応答へ移動

段落のタグを入れる

見出し以外の文章全部に段落のタグ<p>を入れてみます。

段落ごとに空白行が出来て間延びした感じになります。ブロックレベルのタグの殆どは前後に改行が入ります。「江戸中期には・・・」の折り返した段落の中には空白行はありません。<p>のスタイルに[line-height:150%]と設定してあるので少し行間が空いています。150%を200%に変更すると1行分の行間が空きます。

<body>の余白を外し<p>に余白を設定します

左右に余白を設けるのは、文章が横長一杯に広がって読みにくいからです。写真は余白の部分にかかっても読み難くはなりませんので、先ほどスタイルシートの設定で設定した<body>の余白margin:0 10%;を選択して切り取り、次に、段落<p>のスタイルシートにmargin:0 10%;を貼り付けます([;]セミコロンで区切られていることを確認してください)。これで上下の余白が[0]になったので、段落間の空白行がなくなり、左右の余白は10%ずつ取ってあります。

 
Topへ

画像を貼り付けます

画像を入れる所(例えば「<p> 戦国の頃まで・・・」の前)にカーソルを置いて、ファイルリストから画像ファイルenmadou.jpgをドラッグ&ドロップします。メニューで[imgタグを挿入-SP対応]をクリックすると<img src="enmadou.jpg" alt="" height="338" width="450">が入力されます。(Susiのプラグインが入っている場合これが出来ます)

<img>タグの属性の[alt=""]は、ブラウザで画像を表示しない設定をしているときに、画像の代わりに表示する代替文字を指定するところで、HTML4.01 では必須の属性です。ダブルコーティションの中に「閻魔堂」と入力します。

<img>要素はインライン要素ですからこのまま<body>要素の中に入れることはできませんので、スタイルコンテナ<div>要素の中に入れます。<img src="enmadou.jpg" alt="閻魔堂" height="338" width="450">が一行の改行間になっていることを確認して(<img>要素と同じ行に次の<p>要素があるときは、<img>要素の後で改行します)、この中にカーソルを置いて、マクロバーの[div]をクリックします。

<div>タグの中にカーソルを置いてタグの再編集・スタイルの編集で、
[style="padding-right:10px;float:left"]を設定します。

style="padding-right:10px は、画像の右側に10ピクセルの余白を設けます。

padding はボーダーの内側の余白。

magin  はボーダーの外側の余白。

float:left は画像を左側に置き、下の説明文を右側に回り込ませます。

その他のレイアウト

以上で大体の構造が出来上がりました。次の4つの文字列の修飾を適当にします。

市指定・史跡
見出しに掛かる文字ですから、<h1>の左上に適当な色と大きさフォントにします。
東本町2丁目7−40
所在地ですから「所在地:」などと書き加えて、右側に配置します。
閻魔市(エンマ市)のお堂
閻魔堂の説明ですから、<h3> にしてインラインのスタイルシートで適当な色にします。
以上 柏崎市教育委員会 編集・発行 「柏崎市の文化財」1982/2/15 より
資料の出典です。フォントサイズを少し小さくして、目立たない色にします。

次に「語り継ごう柏崎のちえぶくろ」のときに設定したように、リンクと水平線・<address>を設定して完成です。

<address>を写真より下に表示させたい。?質疑応答へ移動

もう一枚写真を入れてみる

別の写真を1枚用意してenmadouフォルダに保存します。

この例では[enmadou1.jpg 450X337ピクセル 36,836b]です。

ファイルリストにある[enmadou1.jpg]をドラッグして<div style="padding-right:10px;float:left"><img src="enmadou.jpg" alt="閻魔堂" height="338" width="450">の後ろ(</div>の前)にドロップします。

メニューで[imgタグを挿入-SP対応]をクリックすると<img src="enmadou1.jpg" alt="" height="337" width="450">が入力されます。

前回と同じくalt=""の[""]の中に「十王仏」と入力します。

ブラウザで確認すると、写真が横に2枚並んで説明文は右に回りこめなくて下に表示されています。

<img src="enmadou.jpg" alt="閻魔堂" height="338" width="450">の後ろ(<img src="enmadou1.jpg" alt="十王仏" height="337" width="450">の前)に<br>と改行を入れると、写真が縦に並び説明文が右に回りこみます。

しかし、写真がつながった写真に見えますので、間隔をあけます。

<img src="enmadou1.jpg" alt="十王仏" height="337" width="450">の中にカーソルを置いて[タグの再編集]から[スタイルシートの編集]ダイアログボックスで[style="padding-top:10px"]と入力します。これで上下の写真の間に10ピクセルの間隔が空きます。

 
Topへ

文法をチェックする

このHTML Project2 にはHTMLファイルの文法をチェックするサイトへのリンクがあります。

ここで作った「閻魔堂」をチェックしてみます。

インターネットに接続できる状態で、メニューバーの[ツール][Another HTML-lint]をクリックすると、[Another HTML-lint gateway]のサイトが開きます。ページの中の[File]ラジオボタンを選択して、参照ボタンでenmadou.htmlをテキストボックスに表示させて、上の[チェック]ボタンをクリックします。(ウイルスセキュリティ2005を使っている環境では、ファイアウォールを外さないと通信が出来ないようです。)

しばらくしてチェック結果が表示されます。12個のエラーがあり-15点で「がんばりましょう」のハナマルでした。どこにどんなエラーがあるかを表示し、解説へのリンクもあります。

検討すると2つの問題に絞られます。

  1. スタイルシートを使うときに
    <head>要素に<meta http-equiv="Content-Style-Type" content="text/css">
    とベースとなるスタイル言語を明示しておくことが必要。
  2. <h3>の使用方法が好ましくない。見出しなら<h1>の次は<h2>にすべきところ。文字の大きさを定めるだけなら見出し(<hn>)を使わない。

1については<head>要素に<meta http-equiv="Content-Style-Type" content="text/css">を<head>要素の中で<style type="text/css">の前に入力すればよいのですが、スタイルシートは常に使うのでマクロの[html]で使っている登録タグの中に記述しておきます。

メニューの[登録タグ][タグの登録]をクリックして、[登録名称]の[html]の[前方タグ]をクリックし、下部に表示された<head>要素の中に上記の<meta>要素を入力します。

2についてはサブ見出しの意味もあるので<h2>に変更します。

以上の修正をして再び文法チェックすると2個の減点されないエラーがありますが、「よくできました」のハナマルで、採点は100点になります。減点されないエラーはリンクとメールに関するものです。

100点のソースです。参考にしてください。

<!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">
<style type="text/css">
<!--
body {background-color:#ccffcc;}
h1 {color:#009900;background-color:#66ff99;text-align:center;vertical-align:middle;margin:2px 20%;
  border-style:outset;border-width:thick;height:1em}
h2 {color:#00cc99;text-align:center}
p {line-height:150%;margin:0 10%}
-->
</style>

<title>閻魔堂(えんまどう)</title>
</head>
<body>
<p style="font-size:small">ホーム>>文化財>>閻魔堂</p>
<p style="color:green;font-size:large;font-weight:bold">市指定・史跡</p>
<h1>閻魔堂(えんまどう)</h1>
<p style="text-align:right">所在地:柏崎市 東本町2丁目7−40</p>
<h2 style="color:#339999">閻魔市(エンマ市)のお堂</h2>
<div style="padding-right:10px;float:left"><img src="enmadou.jpg" alt="閻魔堂" height="338" width="450"><br>
<img src="enmadou1.jpg" alt="十王仏" height="337" width="450" style="padding-top:10px"></div>

<p> 戦国の頃まで半田村にあったと伝えられる。</p>
<p> 現在地は町の東の「木戸」の門外で、旅人や浮浪者の宿に利用されていたという。</p>
<p> 江戸中期には下町にあった馬市がこの周辺に移っていたが、天保頃から馬市にかわって旅商人、見せ物、博徒の集う季節市となった。</p>
<p> 縁日は6月14日〜16日、現在のお堂は土蔵造で明治29年4代目篠田宗吉によって建てられた。</p>
<p style="color:#33cc66;font-size:x-small;margin:0 0;padding-top:3em">以上 柏崎市教育委員会 編集・発行 「柏崎市の文化財」1982/2/15 より</p>
<hr style="clear:left">

<address>2005/4/20 UP NET・陽だまり</address>
</body>
</html>
 
Topへ

写真情報の作成

数枚の写真を表示する場合は上記の「文化財」の例を応用しても良いのですが、多数の写真を表示するときはレイアウトが崩れないように表に入れるため、テーブル<table>要素を使います。

注記:ここで使っている table 要素は本来「表」に使用されるもので、この例のようにレイアウトのために使うのは間違っています。table要素を使わないで同じ様に表示させる方法を別途[table 要素を使わない方法]を用意します。

ページ全体の説明

柏崎市街地の桜は数日前から満開で、赤坂山公園には夜雪洞が灯されている。
 かつての観桜会の名所で賑わった水源地はどんな具合か行って見た。

suigenti1.jpg(浄水場)の説明

昭和12年に完成して初めて柏崎市民に上水道を供給した、柏崎市内川内の水源地の桜は、市街地より少し遅く4月20日ころが見ごろになりそう。
くぼ地にある浄水場には桜が咲いていた。
このあたりは5月初旬に八重桜がきれいだったと記憶している。

suigenti2.jpg(貯水池)の説明

2級河川「前川」を川内ダムにより堰き止め蓄えられた貯水池。
265,000立方メートル貯水して、1日6,000立方メートル取水するという。
現在は使用量が多くなり、主役は赤岩ダム・谷根ダムで蓄えられ赤坂山浄水場で処理される上水道になっている。
水面に伸びる桜がやがて咲くはず。

suigenti3.jpg(花見会場)の説明

かつての花見会場。
現在は市街地に近い赤坂山公園に移りここを訪れる人は少なくなった。
でも桜の花は毎年咲いている。

suigenti4.jpg(咲き始め)の説明

日当たりの良い枝に桜の花が咲き始めていた。

suigenti5.jpg(枝垂れ桜)の説明

貯水池東側の滝の上広場に平成7年に植えられた枝垂桜がある。
今年の重い雪のためか1本が傾斜していた。
池の周囲にも太い枝が折れていた木があった。

suigenti6.jpg(枝垂れ桜の蕾)の説明

枝垂桜に赤い蕾がついていた。
この木が大きく育った見事な光景を想像する。

suigenti7.jpg(水面の水鳥)の説明

貯水池の水面に水鳥が泳ぐ。
水際の枝に極彩色のカワセミがとまっていた。
カメラを用意する間に水面近くをなぜるようにして飛んでいった。
わずかな間だったが、初めて実物のカワセミを見た。

表示する写真とその説明文を準備する

例としてここでは、suigenti1.jpg 〜 suigenti7.jpg の7枚の写真を準備しました。いずれも大きさは320X240ピクセルとしました。

画像を縦に並べて表示するには横幅を揃えると見やすくなります。また横に並べるときは高さを揃えます。1ページに多数の写真を並べると回線の種類によっては全部の画像を表示するのに時間がかかります。ファイルサイズに注意します。

ページ全体の説明とそれぞれの写真について文章で説明します。写真で表現できない情報を補足します。

ファイルを保存するフォルダを用意します。例えば[photo]フォルダを作りその中に[20040415]と日付をフォルダ名にしたフォルダを作ります。

用意した7個の画像ファイルを[20040415]フォルダに保存します。

HTMLファイルを作り編集する

HTML Project2 のツールバー1の[新規作成]で、マクロバーの[html]をクリックしてHTML文書の初期設定をしてファイル名[suigenti.html]で[20040415]フォルダの中に保存します。

<head>要素の中に <title>水源地</title> とタイトルを入れ、<body>要素の中に <h1>水源地 2003/4/15</h1> と見出しを入れます。

見出しの次に全体の説明を入力して、段落<p>とします。

写真7枚を縦に並べて、それぞれ右横にその写真の説明文を入れるのですから、2列7行の表を作ります。

  1. 表を入れる場所(全体の説明の後)にカーソルをおきます。
  2. ツールバー2の[テーブル]かメニューバーの[タグ][テーブル][テーブル]をクリックします。
  3. ダイアログボックスの[セル]タブをクリックします。
  4. [行数]を7に[列数]を2に設定します。
  5. [OK]ボタンをクリックします。

<table>
<tr>
<td></td><td></td>
</tr>
.....
</table>

<table>要素の中の<tr>要素が、[行]を表わします。

<tr>要素の中の<td>要素が行の中の[列]を表わします。

2列の表ですから、それぞれの行の中に<td>要素が2個あります。

7行の表ですから、<tr>要素が7個あります。

次に画像ファイルを入れます。

各画像の説明をそれぞれの<tr>要素の中の右側の<td>要素の前方タグと後方タグの間に入力します。

<hr>要素と<address>要素とリンクを設定してページの構造が出来ます。

<address>要素のなかに連絡先として、陽だまりコーナーへメールを送られるようリンクを次のように設定します。
<a href="mailto:hidamari@city.kashiwazaki.niigata.jp">連絡はここをクリック</a>
mailto:以下はキーボードから入力します。

 
Topへ

スタイルシートの設定

今回はスタイルシートを別ファイル(.css)で作ってみます。

body  {background-color:#ffffcc}
h1   {color:#ff6600;background-color:#ffcc99;
     text-align:center;vertical-align:middle;
     margin:2px 25%;border-style:outset;
     border-width:thick;height:1em}
p    {line-height:150%;text-indent:1em;}
p.inset {background-color:#ccffcc;margin:10px 17%;
     border-style:inset}
table  {line-height:150%;margin:0 10%;}

同じように[photo.css]に、h1 p table についても入力・設定します。

全体の説明文は HTML Project2を使うーWebページ作成ーで作った[語り継ごう柏崎の知恵ぶくろ]のように border-style:inset; と凹んだ感じに段落を設定します。

  1. [photo.css]に普通の段落 p のほかに、行を変えて p.inset {} と入力します。(insetは任意の識別するための文字列)
  2. { と } の間にカーソルを置いて、スタイルの再編集ダイアログボックスを出します。
  3. border-style:inset を含めた、この段落に必要なスタイルの設定をします。(既に<p>に設定してあるスタイルは変更するもののみ設定します。)
  4. suigenti.htmlの編集画面で<p>の中にカーソルを置いてタグの再編集をします。
  5. <p>の再編集ダイアログボックスの中で、汎用属性の[class−分類名]をクリックして、右の[...]ボタンをクリック。
  6. [inset]をクリックします。(この場合のinsetは1で入力した[p.inset]です)

以上の[class]を使った方法は、同じタグ(この場合<p>)を識別子(この場合inset)で違うスタイルシートに使い分けることが出来ます。

説明文と写真との間が狭いので少し間隔を空けたいと思います。方法は色々あると思いますが、ここではインラインのスタイルシートを使ってみます。

写真の説明文の<td>タグの中にカーソルを置いて、[タグの再編集]の[スタイル−style]で style="padding-left:1em" を設定します。説明文の左側に1文字分の余白を設けます。7枚の写真の説明文の<td>タグの中にコピー&貼り付けをすれば簡単に入力出来ます。

 
Topへ

サンプルファイル

<!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">

<link rel="stylesheet" type="text/css" href="../photo.css">
<title>水源地</title>
</head>
<body>
<a href="../../index.html">ホーム</a>>>写真情報>>水源地
<h1>水源地 2003/4/15</h1>
<p class="inset">柏崎市街地の桜は数日前から満開で、赤坂山公園には夜雪洞が灯されている。<br> かつての観桜会の名所で賑わった水源地はどんな具合か行って見た。</p>
<table>
<tr>
<td><img src="suigenti1.jpg" alt="浄水場" height="240" width="320"></td><td style="padding-left:1em">昭和12年に完成して初めて柏崎市民に上水道を供給した、柏崎市内川内の水源地の桜は、市街地より少し遅く4月20日ころが見ごろになりそう。<br>
くぼ地にある浄水場には桜が咲いていた。<br>
このあたりは5月初旬に八重桜がきれいだったと記憶している。</td>
</tr>
<tr>
<td><img src="suigenti2.jpg" alt="貯水池" height="240" width="320"></td><td style="padding-left:1em">2級河川「前川」を川内ダムにより堰き止め蓄えられた貯水池。<br>
265,000立方メートル貯水して、1日6,000立方メートル取水するという。<br>
現在は使用量が多くなり、主役は赤岩ダム・谷根ダムで蓄えられ赤坂山浄水場で処理される上水道になっている。<br>
水面に伸びる桜がやがて咲くはず。</td>
</tr>
<tr>
<td><img src="suigenti3.jpg" alt="花見会場" height="240" width="320"></td><td style="padding-left:1em">かつての花見会場。<br>
現在は市街地に近い赤坂山公園に移りここを訪れる人は少なくなった。
でも桜の花は毎年咲いている。</td>
</tr>
<tr>
<td><img src="suigenti4.jpg" alt="咲き始め" height="240" width="320"></td><td style="padding-left:1em">日当たりの良い枝に桜の花が咲き始めていた。</td>
</tr>
<tr>
<td><img src="suigenti5.jpg" alt="枝垂れ桜" height="240" width="320"></td><td style="padding-left:1em">貯水池東側の滝の上広場に平成7年に植えられた枝垂桜がある。<br>
今年の重い雪のためか1本が傾斜していた。<br>
池の周囲にも太い枝が折れていた木があった。</td>
</tr>
<tr>
<td><img src="suigenti6.jpg" alt="枝垂れ桜の蕾" height="240" width="320"></td><td style="padding-left:1em">枝垂桜に赤い蕾がついていた。<br>
この木が大きく育った見事な光景を想像する。</td>
</tr>
<tr>
<td><img src="suigenti7.jpg" alt="水面の水鳥" height="240" width="320"></td><td style="padding-left:1em">貯水池の水面に水鳥が泳ぐ。<br>
水際の枝に極彩色のカワセミがとまっていた。<br>
カメラを用意する間に水面近くをなぜるようにして飛んでいった。<br>
わずかな間だったが、初めて実物のカワセミを見た。</td>
</tr>
</table>
<hr>
<address>2003/4/16 UP NET・陽だまり 写真撮影:甲野 乙子 作成:南川 北郎 <a href="mailto:hidamari@city.kashiwazaki.niigata.jp">連絡はここをクリック</a></address>
</body>
</html>
 
Topへ

テンプレート

この「HTML Project2」ではテンプレートで保存する事が出来ます。

次回ページを作るときに差し替える部分に「◆」などの記号を入れてテンプレートを作っておくと便利です。例えば「HTML Project2」の編集画面で次のようなページにして、メニューの[ファイル][テンプレートとして保存]で「HTML Project2」フォルダの中の[Template]フォルダ(フォルダがない場合は作る)に適当な名前をつけて「.htt」という拡張子で保存します。ファイルはテキストファイルですからメモ帳などのエディタで見ることも出来ます。

このテンプレートを利用するときは、[ファイル][テンプレートを開く]で編集画面へ呼び出して◆のところへ入力して編集します。写真のスタイルの height="240" width="320" はデジタルカメラで撮った写真の縦横比になっています。トリミングなどして縦横比が変わったときは修正しないと歪んで表示されます。

<!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">

<link rel="stylesheet" type="text/css" href="../photo.css">
<title>◆</title>
</head>
<body>
<a href="../../index.html">ホーム</a>>>◆>>◆
<h1>◆ ◆</h1>
<p class="inset">◆</p>
<table>
<tr>
<td><img src="◆1.jpg" alt="◆" height="240" width="320"></td><td style="padding-left:1em">◆</tr>
<tr>
<td><img src="◆2.jpg" alt="◆" height="240" width="320"></td><td style="padding-left:1em">◆</td>
</tr>
<tr>
<td><img src="◆3.jpg" alt="◆" height="240" width="320"></td><td style="padding-left:1em">◆</td>
</tr>
<tr>
<td><img src="◆4.jpg" alt="◆" height="240" width="320"></td><td style="padding-left:1em">◆</td>
</tr>
<tr>
<td><img src="◆5.jpg" alt="◆" height="240" width="320"></td><td style="padding-left:1em">◆</td>
</tr>
<tr>
<td><img src="◆6.jpg" alt="◆" height="240" width="320"></td><td style="padding-left:1em">◆</td>
</tr>
<tr>
<td><img src="◆7.jpg" alt="◆" height="240" width="320"></td><td style="padding-left:1em">◆</td>
</tr>
</table>
<hr>
<address>◆ UP NET・陽だまり 写真撮影:◆ 作成:◆ <a href="mailto:hidamari@city.kashiwazaki.niigata.jp">連絡はここをクリック</a></address>
</body>
</html>

table 要素を使わない方法(追補)

photo.css は次のようになります。
body{
	background-color:#ffffcc;}
h1{
	color:#ff6600;
	background-color:#ffcc99;
	text-align:center;
	vertical-align:middle;
	margin:2px 25%;
	border-style:outset;
	border-width:thick;
	height:1em;}
p{
	line-height:150%;
	text-indent:1em;
	margin-top:0;
	margin-bottom:0;}
p.inset{
	background-color:#ccffcc;
	margin:10px 17%;
	border-style:inset;}
div.center{
	margin:5px 10%;
	clear:both}
div.img{
	margin-right:10px;
	float:left;}
hr{
	clear:both;}

この文書は、冒頭に<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">と宣言していて、[strict.dtd]で書かれています。推奨されないタグではなくても、table 要素は本来「表」に使用されるもので、この例のようにレイアウトのために使うのは好ましくありません。table要素を使わないで同じ様に表示させる方法を検討します。

写真とその説明を一組としてdiv要素で囲み、スタイルシートでレイアウトします。

<img src="suigenti1.jpg" alt="浄水場" height="240" width="320">と文章(テキスト)「昭和12年に完成して初めて柏崎市民に上水道を供給した、柏崎市内川内の水源地の桜は、市街地より少し遅く4月20日ころが見ごろになりそう。」をそれぞれdiv要素で囲み、2つのdivを更にdivで囲みます。

この2つのスタイルコンテナ(div要素)を入れ子にしたスタイルコンテナを写真の数だけ作り、div要素のスタイルシートを工夫してレイアウトを整えます。次はHTML Project2による手順の例です。いろいろ試してみてください。

  1. <table>〜</table>を選択して、メニューの[編集][選択部分の変換][タグを消去]をクリックする。
  2. 説明文だけ残りますから、それぞれの段落をp要素で囲みます。
  3. それぞれの説明文の上の行の先頭にカーソルを置き、ファイルリストから該当のイメージファイルを編集画面にドラッグし、[imgタグを挿入]をクリックします。[alt属性]を記入する。
  4. photo.css ファイルを開いて変更します。
  5. イメージのタグの中にカーソルを入れて、マクロの[div]をクリックし、ダイアログボックスの[class]の中の[img]を選択して[OK]ボタンをクリック。
  6. 説明文のテキストの段落群を選択して、ツールバー2の[スタイルコンテナー<div>]をクリック、そのままダイアログボックスの[OK]ボタンをクリック。
  7. 上の 5,6 二つの[div要素]を選択して、ツールバー2の[スタイルコンテナー<div]をクリック、ダイアログボックスの[class]の中の[center]を選択して[OK]ボタンをクリック。
  8. 表示を確認して必要なスタイルシートを修正します。
<table>〜</table>は次のように変更されます。
<div class="center">
	<div class="img">
		<img src="suigenti1.jpg" alt="浄水場" height="240" width="320">
	</div>
	<div>
		<p>昭和12年に完成して初めて柏崎市民に上水道を供給した、柏崎市内川内の水源地の桜は、
		市街地より少し遅く4月20日ころが見ごろになりそう。</p>
		<p>くぼ地にある浄水場には桜が咲いていた。</p>
		<p>このあたりは5月初旬に八重桜がきれいだったと記憶している。</p>
	</div>
</div>
<div class="center">
	<div class="img">
		<img src="suigenti2.jpg" alt="貯水池" height="240" width="320">
	</div>
	<div>
		<p>2級河川「前川」を川内ダムにより堰き止め蓄えられた貯水池。</p>
		<p>265,000立方メートル貯水して、1日6,000立方メートル取水するという。</p>
		<p>現在は使用量が多くなり、主役は赤岩ダム・谷根ダムで蓄えられ赤坂山浄水場で処理される
		上水道になっている。</p>
		<p>水面に伸びる桜がやがて咲くはず。</p>
	</div>
</div>
<div class="center">
	<div class="img">
		<img src="suigenti3.jpg" alt="花見会場" height="240" width="320">
	</div>
	<div>
		<p>かつての花見会場。</p>
		<p>現在は市街地に近い赤坂山公園に移りここを訪れる人は少なくなった。</p>
		<p>でも桜の花は毎年咲いている。</p>
	</div>  
</div>
<div class="center">
	<div class="img">
		<img src="suigenti4.jpg" alt="咲き始め" height="240" width="320">
	</div>
	<div>
		<p>日当たりの良い枝に桜の花が咲き始めていた。</p>
	</div>
</div>  
<div class="center">
	<div class="img">
		<img src="suigenti5.jpg" alt="枝垂れ桜" height="240" width="320">
	</div>
	<div>
		<p>貯水池東側の滝の上広場に平成7年に植えられた枝垂桜がある。</p>
		<p>今年の重い雪のためか1本が傾斜していた。</p>
		<p>池の周囲にも太い枝が折れていた木があった。</p>
	</div>
</div>
<div class="center">
	<div class="img">
		<img src="suigenti6.jpg" alt="枝垂れ桜の蕾" height="240" width="320">
	</div>
	<div>
		<p>枝垂桜に赤い蕾がついていた。</p>
		<p>この木が大きく育った見事な光景を想像する。</p>
	</div>  
</div>
<div class="center">
	<div class="img">
		<img src="suigenti7.jpg" alt="水面の水鳥" height="240" width="320">
	</div>
	<div>
		<p>貯水池の水面に水鳥が泳ぐ。</p>
		<p>水際の枝に極彩色のカワセミがとまっていた。</p>
		<p>カメラを用意する間に水面近くをなぜるようにして飛んでいった。</p>
		<p>わずかな間だったが、初めて実物のカワセミを見た。</p>
	</div>
</div>

この場合画像の大きさが決まっているから簡素に作ってありますが、一般にはスタイルシートでdiv要素の大きさを指定する必要があります。また「clear:both」「float:left」などをうまく利用してください。(この項2007/1/11 追加UP)

あとがき

以上で「写真を入れたWebページを作る」のテキストは一先ず終了します。

説明文が少ない場合は、写真を横に2〜3枚並べて、その下の行に説明文を入れる等、変更することが出来ます。

また、写真情報だけでなく、写真と説明文を組み合わせたページに利用出来ます。

タグやスタイルシートは沢山ありますので、すべてを覚えることは出来ません。新しいタグやスタイルを多用するよりも、先ず自分の知っている(使ったことのある)タグやスタイルで出来ないか検討してみて、思うように出来なかったときに新しいものを試してみると良いと思います。

 
Topへ

付録 1 別のページに地図を表示する

<a>でリンクを設定すると別のページにジャンプしますが、元のページを表示したままにして別のウインドウを開いて、地図を表示します。別のウインドウには大きさを指定して必要ないツールバーは表示させないようにします。

地図を表示させるHTMLファイルを作って、「××.html」というファイル名(××は地図を表わす適当な名前)で保存します。

Java Script を使いますので次の<meta>情報を<head>の中に書きます。

<meta http-equiv="Content-Script-Type" content="text/javascript">

コピーして貼り付けても良いのですが、HTML Project2 の機能で入力する場合は次のようにします。

  1. 入力する位置にカーソルを置きます。
  2. メニューの[ページ設定][Meta メタ情報 -<meta>]をクリック。
  3. [メタ情報<meta>: ヘッダ要素(空要素)]のウインドウで、一番上の[http-equiv-HTTPリソースヘッダ名]をクリックして、右の[▼]ボタンをクリック。
  4. [Content-Script-Type]をクリック。
  5. [content-関連付け情報]をクリック。
  6. [text/javascript]をクリックして、[OK]ボタンをクリック。

次に入力したメタ情報以降の<head>の中に次のように入力します。

<SCRIPT type="text/javascript">
<!--
function wopen1(){
window.open("○○/××.html","WindowOpen1","status=yes,
menubar=yes,scrollbars=yes,resizable=yes Width=880 Height=630") }
function wopen2(){
window.open("○○/△△.html","WindowOpen2","status=yes,
menubar=yes,scrollbars=yes,resizable=yes Width=880 Height=630") }
//-->
</SCRIPT>

ここでは○○フォルダの××.htmlというファイルと△△.htmlを開くことにしています。今作業している呼び出すファイルと同じフォルダにあるときはフォルダ名は不要です。

function wopen1() と WindowOpen1の数字は、後でボタンで操作する動作を区別しています。

status=yes
ステータスバーを表示させます。
menubar=yes
メニューバーを表示させます。
scrollbars=yes
スクロールバーを表示させます。
resizable=yes
リサイズボックス(ウインドウの大きさを変えられる?)
Width=880 Height=630
開くウインドウの大きさをピクセルで指定します。

ダブルコーティション[ " " ]で囲んだり、コンマ[ , ]で区切ったり、半角スペースで区切ったりしています。

次は、ボタンの設定です。(画像にも設定できますが、)ボタンを表示するところに

<INPUT onclick=wopen1() type=button value="所在地地図の表示">

と入力します。

wopen1()
○○/××.htmlのページを開きます。
wopen2()
○○/△△.htmlのページを開きます。
value="所在地地図の表示
ボタンに表示します。

ボタンの色とか形は変えることが出来ません。

小さい画像(サムネール)をクリックする場合は、パソコンお助け情報で紹介しています。
  http://www.city.kashiwazaki.niigata.jp/hidamari/help/hp/hp0002.html

 
Topへ

付録 2 ページの背景に画像を使う

今まではページの背景色は<body>要素のスタイルシートで色を指定していました。この方法はサーバーにHTMLファイルを要求するだけでページの背景をブラウザの機能で表示出来ますので、一番負荷の少ない方法です。

でも背景色はページのイメージに大きく影響を及ぼしますから、拘ってみたいと思う人が多いと思います。単色ではなく画像を背景に使うことが出来ます。

背景に使う画像に大きい画像を使うとダウンロードに負荷が大きくなりますから、なるべく小さい画像をページ全体に敷き詰める方がよいと思います。素材集などで適当な画像を探すのが簡単ですが、とことん拘るのなら自分で背景画像を作ることも出来ます。

背景画像の作成

例えばフリーソフトのPixiaで花の写真の花弁の色で背景画像を作ります。

背景画像は小さい画像を敷き詰めますので、画像の周辺の色に差があるとつなぎめが目立ちますので、いろいろ試してください。

また、文字や写真が明瞭に見えるような背景画像を作るようにしてください。

背景画像の設定

<body>要素のスタイルシートで、background-image属性の値に背景画像を指定すれば、ページ全体に背景画像が敷き詰められます。

具体的使用例、body {background-image:url(yyyy/xxxx.jpg);}

HTML Project2 では、メニューバーの[ページ設定][style-スタイル] で、[background-image]で画像ファイルを指定します。

小さい画像を敷き詰めるだけでなく、大きい画像を縦(横)に並べたり、中央に置いたり出来ますが、一般的ではありません。

 
Topへ

付録 3 自分専用のポータルページ

Maicrosoft Internet Explorer では、起動して最初に開くページを「ホームページ」と言います。ブラウザを使う人の元になるページだからでしょう。普通はサイトの最初のページをホームページと言います。しかし、日本ではWebページのことをホームページと言います。

まぎらわしいのでここでは、ブラウザを開いたときに最初に現れるページを、「ポータルページ」と言います。ポータル(portal)は入り口という意味です。

パソコンを買って来たばかりのときは、ブラウザを起動するとパソコンメーカーのサイトか、マイクロソフトの MSN Japan のサイトが最初に現れると思いますが、それを自分だけのポータルページに変更するのがこの付録の目的です。

ここで作る My Portal Page は、お気に入りに登録してあるような時々開くWebページのリンク集のようなものです。

人に見せるためのページではなく、自分だけが使うページですから、使いやすければよいのですが、ブラウザを起動したときに何時も表示させるのですから、自分好みのデザインにしてください。

My Portal Page のHTMLファイルは、ローカルのパソコンの中(ハードディスク)から呼び出すのですから、多少重くなっても早く表示しますし、HTMLの文法が少しぐらいいい加減でも問題ありません。また、コンテンツの知的所有権も普通の扱い(Webに載せない)なら問題にならないでしょう。

My Portal Page の作り方

前置きが長くなりましたが、作り方は簡単です。自分が利用するサイトのトップページや特定のページのタイトルを入力して、ハイパーリンクを設定すれば終わりです。

ハイパーリンクは、インターネットに接続して目的のWebページを表示させて、そのページのURLをクリップボードにコピーしておいて、HTML Project2 の編集画面でそのWebページのタイトルのテキスト(文字)を選択して、ツールバー3のハイパーリンクをクリックすると、<a href= と入力されてショートカットメニューが出ます。そのままクリップボードから貼り付けて、Enterキーを押すと、
 <a href="URL">タイトルのテキスト</a>
 とハイパーリンクが設定されます。

ページのレイアウトは、普通のHTMLファイルと同様に作りますが、URLのグループごとに整理してグループの名前を表示し、HTMLファイルの中で何処に何があるか判り易くしておくと、追加・削除のときに楽になります。

グループ分けのときに必要なら<table>を使うのも一つの方法です。

サイトの中にはリンクのためにバナーの画像を用意しているところがあります。ダウンロードしてタイトルのテキストの代わりに使うことが出来ます。

Java Sprict を使ってプルダウンメニューを表示させURLのグループを整理しやすくしたり、検索機能を使う方法がありますが、Windows XP のSP2の場合ファイルを開くたびに情報バーが現れて面倒になりますから、<h3>・<h4>などの見出しでグループ分けする方が無難です。

検索サイトの検索窓

ブラウザのツールバーに検索サイトの検索機能を表示で来ますが、ツールバーが広くなりページを表示する部分が狭くなります。

My Portal Page にYahoo! JAPAN の検索窓を自分のサイトに入れることが出来ますから、My Portal Page にも入れられます。次のページからソースをコピーしてMy Portal Page に貼り付ければ、機能します。
http://help.yahoo.co.jp/guide/jp/ysearch/searchbox/instructions.html
Google の検索窓は次のページです。
http://www.google.co.jp/intl/ja/searchcode.html

参考 リンク集

陽だまり関係

柏崎関係

Pixia関係

HTML 関係

 
Topへ

付録 4 メールアドレスを書かない

Webページには、誰が作ったページか閲覧した人にわかるようにメールアドレスを書かなければならないという決まりはありませんが、書いてあった方がその情報に対する責任のようなものを明らかに出来ますし、必要があるときに連絡してもらうことが出来ます。

Webページは提供されている(書かれている)情報を受け取るもので、それ以上の情報を得たいときには別のページを探すべきで、質問・調査依頼ができるのは情報提供者がそれを認めている場合やそのサイトが求めている場合だと思います。

でも、「情報を共有したい」「新しい情報がある」「感想・意見」など、ページの作者に伝いたいときにメールアドレスがあると手軽に交流が出来ます。

<address> <a href="mailto:♥♥♥@xxx.yyyy.ne.jp">♥♥♥@xxx.yyyy.ne.jp</a> </address>

普通ページの最後に上のようにメールアドレスを入れますが、最近の迷惑メールはこのメールアドレスを収集して使用しているそうで、Webページにメールアドレスを書かないで交流が出来る方法がいろいろ考えられています。

私のこのページでは「御連絡はメールでお願いします。」として、postmail.htmlというページへ行き、そこでフォームの中に入力してもらって、メールで受け取る仕組みになっています。メールのアドレスはHTML文書の中には書いてなく、CGIファイルに書いてあります。CGIファイルは自分で作ったのではなく、フリーソフトで提供されているものを使わせていただいています。

CGIが使えない場合は、HTML で使える文字実体参照を使う方法でメールアドレスを書き換えることが出来ます。上記の♥♥♥は、「&」「#」「9」「8」「2」「9」「;」で♥を表しています。

文字実体参照の一覧表は
http://www.ne.jp/asahi/minazuki/bakera/html/reference/charref
一つずつ拾うのが面倒という方は変換できます。
http://kinran.jp/bbsmail/index.html
JavaScript で別ファイル(.ja)にアドレスを書く場合
http://www.ne.jp/asahi/hokkaido/swanbay/nospam/NoSpam.html#JAVASCRIPT
(文字実体参照と組み合わせて使うことが出来ます。)

こういう対策をしても私の場合はすでにアドレスが迷惑メール業者の間で流通しているようで、効果がありません。

メールアドレスを文字参照で書くことが多い場合、HTML Project2 では、[お気に入り語句]に登録しておいて、呼び出すことが出来ます。

[お気に入り語句]に登録
お気に入り語句を選択して(コピーして)メニューの[編集][お気に入り語句の登録][選択中のテキスト]([クリップボード内容])をクリック。[お気に入り言葉の挿入]ウインドウで、言葉を確認して追加ボタンをクリックする。
[お気に入り語句]を挿入
挿入する場所にカーソルを置いて、メニューの[編集][挿入][お気に入り語句]をクリック。[お気に入り言葉の挿入]ウインドウで、リストボックスの右側のボタンをクリックしてリストから挿入する言葉を選んで、追加ボタンをクリックする。

(この項 2006/5/7 UP)

 
Topへ

付録 5 画像の特定部分からリンク(イメージマップ)

クリッカブルマップともいわれていますが、画像の複数の場所にリンクを埋め込むことが出来ます。HTML Project2 にはリンクエリアの座標を簡単に設定できる機能があります。

見映えの良いリンクが出来ますが、「画像が重くなる」「画像が表示されない場合はリンクが使えない」「リンク出来るエリアがわかりにくい」など欠点もあります。

作業手順は

リンク元の画像を用意する。
リンク出来るエリア(マウスポインタがリンクの動作する領域)の見当をつけておきます。リンクしやすい大きさが必要です。
リンク先のページを作る。
閲覧し終わったら、「元のページに戻る」などのナビゲーションを用意しないと、ブラウザの「戻る」機能を使うことになります。既にあるページを使う場合はURLを調べておきます。
リンク元のページを作る。
イメージマップの画像(img要素)とマップデータの設定(map要素)を行います。リンクのできるエリアを説明して欠点を補います。

具体的には、次のようになります。

xxxx.jpg
  イメージマップの画像ファイル名
usemap="#yyyy"
  イメージマップに名前をつける
href="zzzz.html"
  リンク先のページ
shape="rect"
  リンク領域の形(矩形の場合)
coords="aa,bbb,ccc,ddd"
  リンク領域の画像内の座標
<div>
<img src="xxxx.jpg" alt="????" usemap="#yyyy" width="???" height="???" border="0">
</div>
<map name="yyyy">
<area href="zzzz.html" alt="????" shape="rect" coords="aa,bbb,ccc,ddd">
<area href="wwww.html" alt="????" shape="rect" coords="ee,fff,ggg,hhh">
</map>

イメージマップの画像の名前 [usemap="#yyyy"] には[#]をつけて、[<map name="yyyy">]にはつけません。名前は半角英数文字。[name]属性はXHTML1.1では[id]属性を使います。

[shape="rect"]は矩形の場合で、[coords="aa,bbb,ccc,ddd"]で左上の座標をaa(x軸、画像の左辺からの距離)bbb(y軸、画像の上辺からの距離)、右下の座標をccc,dddで決めます。

[shape="rect"]矩形の他に、[circle]円、[polygon]多角形があります。[circle]では、[coords="aa,bbb,ccc"]で中心の座標をaa,bbb、半径をcccで決めます。[polygon]ではそれぞれの頂点の座標を順に決めます。

area要素は複数設定できます。

HTML Project2 を使って

リンク元のページを作る際に HTML Project2 の機能を使うと、座標の入力などを簡単に出来ます。

  1. img要素、map要素を入力する所にカーソルを置いて、メニューバーの[タグ][リンクと画像]をポイントし、[エリア]をクリック。([画像マップ]もあるが[エリア]でmap要素も入力できる)
  2. [画像とクリッカブルマップの設定]ダイアログボックスで、[画像ファイル]の右にあるフォルダのアイコンをクリックし、リンク元の画像を選択。(右に画像が表示される。)
  3. [<map>と<area>設定]タブで、[マップ名]に上記の yyyy に相当する名前を入力。
  4. [shape]を右のスピンボタンを開いて選択。(上の例では[rect])
  5. [リンク先URL名]を右にあるフォルダのアイコンをクリックして選択するか、入力する。
  6. ダイアログボックスの右の画像の中で、リンク出来るエリアを選択する。([rect]は左上から右下へドラッグ、[circle]は円の中心から円周へドラッグ、[polygon]はそれぞれの頂点をクリック。[coords]に座標が入る。)
  7. [alt]にリンク出来るエリアの代替文字を入力する。(この文字がマウスポインタがリンク出来るエリアに載った時に表示される。)
  8. [<img>も同時に挿入][<map>も同時に挿入]のチェックボックスにチェックを入れる。(画像がすでに入力済みのときは、[<img>も同時に挿入]にチェックしない。)
  9. 必要により[<img>設定]タブに必要事項を入力する。
  10. [OK]ボタンをクリックすると <img> <map> <area> が入力されます。(area要素は1回1個だけ)

リンク出来るエリアを複数設定するには、area要素を追加します。

追加箇所にカーソルを置いて、上記手順の[8. [<img>も同時に挿入][<map>も同時に挿入]のチェックボックス・・・]のチェックを入れないで、[OK]ボタンをクリックします。(2007/3/3 追加)

 
Topへ

2005/4/21 UP 御連絡はメールでお願いします。