Sony Style(ソニースタイル)   Challenge HP
HP作成 スタイルシート apeskin サーバー HP作成ソフト アフィリエイト リンク BBS top
HPあれこれメニュー
はじめに
知っておきたい事
テーブル
フレーム
レイアウト
画像
色々なこと
HTML4.01要素一覧
XHTML
テンプレート
エイプスキン
サイトマップ
 
IEツールバー
Googleツールバー
Infoseekツールバー
Yahoo!ツールバー
Windowsをお使いでしたら、IEツールバーを利用すると検索に便利。 ブラウザに組み込まれ、キーワード検索できます。






■ リンクにマウスを乗せて音
リンクにマウスが乗ると「ピコッ」などといった音がするリンクがありますが、IEのみ鳴らせるのは簡単に出来ます。

[ スタイルシート ]  [ エイプスキン ]  [ レンタルサーバー ]  [ HP作成関連ソフト ]


<a href="css/" onMouseover="bgm.src='image/robot.wav'">[ スタイルシート ]</a>
<a href="ape.html" onMouseover="bgm.src='image/robot.wav'">[ エイプスキン ]</a>
<a href="server.html" onMouseover="bgm.src='image/robot.wav'">[ レンタルサーバー ]</a>
<a href="item.html" onMouseover="bgm.src='image/robot.wav'">[ HP作成関連ソフト ]</a>
<bgsound src="#" id="bgm" loop="1" autostart="true">

onMouseover というのがありますが、それが「マウスを乗せた時」と言う意味になります。
上の例は1つの音しかありませんが、各リンク事に音を変える事も出来ます。

ただしbgsound タグはIEしか認識しないので、ネットスケープやオペラでは音は鳴りません。 認識しないだけでエラーになる訳ではないので、興味のある方は使ってみるのも良いかもしれないですね?

ちなみにサンプルの音源は、Windowsに付属するwavファイルを使いました。もちろんmidiでも同じように鳴ります。
■ <map> <area>
1枚の画像に複数のリンクを貼る事をクリッカブルマップと言います。
下は画像の中に4つのリンクを貼っています。

マップ アフィリエイト レンタルサーバー HP作成ソフト エイプスキン

<img src="image/map.gif" alt="マップ" usemap="#map" border="0">
<map name="map">
<area shape="rect" coords="15,15,142,60," alt="リンク先の説明" href="URL">
<area shape="circle" coords="215,39,27," alt="リンク先の説明" href="URL">
<area shape="polygon" coords="45,128,97,160,70,100," alt="リンク先の説明" href="URL">
<area shape="rect" coords="125,118,225,165," alt="リンク先の説明" href="URL">
</map>


・ マップにする <img> に usemap="#マップの名前" を入れる。
・ <map> の name="名前" に <img> に入れた名前を入れる。
・ <area> でリンクする範囲を決める。alt属性も入れる。


リンクの形は 四角形・円形・多角形 の3種類有ります。

四角形 shape="rect" coords="左上横軸,左上縦軸,右下横軸,右下縦軸,"
四角形は2点の位置を決める事で作れます。

円形 shape="circle" coords="円中心の横軸,円中心の縦軸,円の半径,"
円形は中心1点の位置と、円の半径を決める事で作れます。

多角形 shape="polygon" coords="横軸,縦軸,横軸,縦軸,横軸,縦軸,
多角形は、角のなる点を3つ以上それぞれ決めていきます。


サンプルとしてこちらで用意した上のクリッカブルマップは、悪い例になります。 画像を見ただけではリンクと気がつかないし、行き先もマウスを乗せないと分かりません。 クリッカブルマップは上手く作らないと訪問者に嫌われます。
■ ファビコン
ブラウザのアドレスの部分やお気に入り登録した時に、作ったアイコンを表示させる事が出来ます。 IEでは認識したりしなかったりと不安定なものですが、ネットスケープではアドレスなどにしっかりアイコンが表示されます。

例えば Challenge HP のトップページをお気に入りに登録すると、 この画像が表示されると思います。 もし表示されないとしたら、既にお気に入りに登録していたか、またはPCの環境がファビコンを無視しているなどでしょう。

ファビコンはアイコンなので、アイコンを作るソフトやBMP画像をアイコンに変換するソフトが必要になります。 自分の場合はWindows付属のペイントで16px×16pxの画像を描いて、それをアイコンに変換するソフトを使いました。 また名前は favicon にした方が良いと思います。

Be! to I...ドラッグ&ドロップでBMPなどの画像ファイルをお好きな設定でアイコンにします。
白昼夢〜CloudCastle〜 DL Square → OnlineSoft と進みます。

ファビコンのHTMLへの取り込みは link タグで、<head> 〜 </head> の間に書き込みます。

<link rel="SHORTCUT ICON" href="http://www.est.hi-ho.ne.jp/gaia/hp/favicon.icn">

ファビコンについてはファビコンで検索すれば詳しいサイトが幾つもあります。またアイコンを作成するソフトもベクターなどで検索すれば たくさん出てくると思います。
■ <fieldset> <legend>
ホームページ作成 Q&A でたまに回答してたりするのですけど、 時々面白い話が舞い込みます。今回はその1つの<fieldset> <legend>の事例についてちょっと書いてみます。

<fieldset> と <legend> は本来フォームのグループ化のためにある要素なのですけど、それほど多くは利用されていません。 しかし <fieldset> と <legend> を引用などに用いる方がいるのですが、それが今後メジャーな使い方になりそうな気配さえあったりします?

パソコンソニーバイオPC
ソーテックPC

テレビ液晶テレビ
プラズマテレビ


<fieldset style="padding:10px;width:150px">
<legend>パソコン</legend>
・ <a href="*****.html">ソニーバイオPC</a><br>
・ <a href="*****.html">ソーテックPC</a>
</fieldset>


上はリンクをグループ化してみました。このような表示はテーブルを使わないと出来ないのですが、<fieldset> と <legend> で簡単に出来てしまいます。ただし本来の使い方ではないのでそれによって問題があったとしても自己責任ですね。 ブラウザによっては正しく表示できない可能性もある訳ですし。

で、Challenge HP でこれを紹介するかどうか悩んだのですけど、NN7とオペラ7でもIEとほぼ同じように表示できるので紹介してみました。 本来の目的とは違う使い方をHTMLではよくある事なのですが、利便性の高いものはそれはそれで仕方ないですね。
 you style Copyright (C) 2003-2004 Challenge HP, All rights reserved.