大阪のSEO対策会社クレアネットWebクリエイターのブログ

1月, 2012

クリッカブルマップとは?

クリッカブルマップは、画像の中に複数のリンク先を設定し、クリックした場所によって決められたリンク先に移動することができる機能のことです。
イメージマップとも呼ばれます。

地域別リンクで見かけることが多いです。

サンプル:

HTML:

<img src="http://www.sonimori.com/wp-content/uploads/2012/01/map.jpg" alt="クリッカブルマップテスト" width="440" height="267" usemap="#Map" />
<map name="Map" id="Map">
    <area shape="circle" coords="78,78,61" href="#" />
    <area shape="rect" coords="282,32,406,156" href="#" />
    <area shape="circle" coords="215,162,27" href="#" />
    <area shape="rect" coords="83,190,141,248" href="#" />
    <area shape="rect" coords="347,208,388,249" href="#" />
</map>

パンくずリストとは?

パンくずリストは、現在サイトのどの位置にいるのかを階層で表示するもので、
見ている人がサイト内で迷子にならないようナビゲーションする役割を持っています。

このパンくずリストという名前、「ヘンゼルとグレーテル」で、主人公が森で迷子になるのを防ぐためにパンくずをまきながら歩いていたのが由来だそうです。

ローカルナビゲーションとは?

ローカルナビゲーションは、表示しているページと同じ階層のコンテンツに移動するためのサブメニューを指します。
細かいページ移動を容易にするために設置されることが多く、ページの左右にあることが多いです。

グローバルナビゲーションとは?

グローバルナビゲーションは、Webサイト内の主要コンテンツに案内するためのメニューを指します。

通常、サイト全体で共通して表示されているため、ユーザーはどのページに移動しても常に目的の情報やコンテンツにすばやくアクセスすることができます。

ロールオーバーとは?

ロールオーバーは、マウスカーソルを画像などの上に載せた時に、
画像が切り替わる動作のことを指し、マウスオーバーとも呼ばれます。

ロールオーバーをつけることにより、その画像にリンクが貼っていることを視覚的に知らせることができます。

ベクター画像とラスター画像

ラスターイメージは、小さな点で構成された画像です。
jpg,png,gifなどが分類されます。

ベクターイメージは、直線や曲線を数式に置き換え描かれた画像です。
Flashで使用するイラストなどによく用いられています。


ベクターは拡大してもきれいなままなのに対し、
ラスターは点で構成されているため、拡大すると荒くなってしまいます。

マルチパート配信とは?

マルチパート配信は、HTMLメールとテキストメールを1つのメールで送信できる配信形式です。
HTMLメールを受信できる方にはHTMLメールを、受信できない方にはテキストメールで表示させることができます。

解像度とは?

解像度は、1インチあたりにどれだけのドット、ピクセルが入るか、つまり、画像の密度をあらわします。
単位はdpi … ドットパーインチ です。

Webページを印刷するとき画像が荒くなるのは、この「解像度」が低いためです。
一般的に印刷物には、300dpi以上の解像度をもつことが多いのですが、
Webページ用の画像は72dpiで作成されることが多いため荒くなってしまうのです。

画像形式の違い:png

■ PNG
png画像には、PNG-8,PNG-24,PNG-32という3つの規格が存在します。

PNG-8
…gifと同じ256色以下を扱うことができ、1色の透過ができます。

PNG-24
…フルカラーを扱うことができます。

PNG-32
…フルカラーかつアルファチャンネルという複数色の透過処理が扱えます。
…(古いブラウザでは対応していません)

画像形式の違い:gif

■ GIF
gif画像は色数の少ない画像を保存するのに適しています。
背景の透過やアニメーションにすることができるため、主にボタンやアイコンなどといったWeb素材で活躍しています。
色数が256色までなので、注意が必要です。

「デコ絵文字」の多くもgif画像です

Previous Posts