画像の配置

Home>HTML>画像の配置

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

画像の配置には、3種類があります。

img要素を使う

HTMLのimg要素は、画像を配置するための要素です。
基本的には以下のように記述します。

<img src="画像のURL" alt="代替テキスト" height="画像の高さ" width="画像の幅">

この要素は、開始タグと終了タグの間にテキストを書き込む形式の要素ではなく、この要素内に設定した属性に基づいて動作します(このように、閉じるタグがなくタグの間に値をもたない要素のことを空要素といいます)。

src属性―画像までの位置を示す

img要素のsrc属性には、その画像までの位置を記します。
位置(URL)の指定方法には、絶対参照と相対参照があります。

絶対参照とは、そのサイト内の絶対的な位置を記すということで、「http://www.xxx.xxx.com/img/yyy.jpg」のように、URLの頭から記す方法です。
絶対参照を使う利点は、その文書をどこに移動したとしても、参照先のファイルの位置を変更しなければ、参照できるという点にあります。
問題点は、インターネット上のURLを直接指定しているため、まだサーバに公開していないファイルを参照することができないという点です。

相対参照とは、そのHTML文書の置かれている位置から、相対的に場所を指定する方法です。

相対参照による画像の指定方法

src属性における相対参照のURLの記述方法

図のような構造でサイトが構築されているとします。
この図で、bbb、cccはフォルダ、top.htmとbottom.htmはHTML文書ファイル、xxx.jpgは画像ファイルとします。

top.htmにxxx.jpgを表示する場合、top.htm内のimg要素は、図の(1)の方向に参照します。このとき、src属性には、

「 bbb/xxx.jpg 」と記します。

bottom.htmにxxx.jpgを表示する場合、bottom.htm内のimg要素は、図の(2)の方向に参照します。このとき、src属性には、

「 ../bbb/xxx.jpg 」と記します。

つまり、HTML文書から見て、その階層の下方に参照したいファイルがある場合は、フォルダの区切りを半角のスラッシュであらわして、画像の場所まで記述します。
HTML文書から見て、階層が別の場所になる場合は、階層を一度上がってから下がる、という指定方法をします。このとき、階層を一つ上がる指定は、「..」とピリオドを2つ打ちます。

(2)の参照の場合であれば、cccのフォルダより上の階層に上がるため、「../」と打ち、次にbbbのフォルダの下に行くために、「bbb/」と記述しています。

※なお、2階層上がる場合には、「../../」と2回続けます。

alt属性―代替テキストを記す

img要素のalt属性には、代替テキストを記述します。

代替テキストとは、画像を表示できないブラウザ(音声読み上げ式ブラウザ)や、ブラウザの画像を表示する機能をオフにしたときに、画像の代わりに表示されるテキストのことです。

画像を表示できるブラウザでも、読み込みエラーで表示できない場合や、URLの指定間違いで表示できないときには、このテキストが表示されます。
また、画像の上にマウスカーソルを合わせると、ポップアップでテキストが表示されます。

画像に代替テキストを配置することは、その画像が何を示しているかを説明するものであるので、ユーザにとって理解しやすい仕様になっていることを意味します。
これは、SEO(検索エンジン最適化)としても重要ですし、ユーザビリティの高いサイトをつくる際にも重視されるので、必ず画像にはalt属性で説明文を入れましょう。

なお、デザイン目的で透明な画像や意味のない画像を配置する場合にも、alt属性は配置するべきです。そのときは、alt=""と、意味のない画像であることを明示します。
但し、これを利用して、透明な画像にalt属性で関係のない説明文を詰め込んだりすることは、SEOスパムとみなされるので、やめましょう。

height属性、width属性―画像のサイズを示す

img要素のheight属性には画像の高さを、width属性には画像の横幅を、ピクセル単位で記述します。

画像のサイズは、指定しなくても、そのサイズのままでブラウザに読み込まれて表示されますが、読み込みに時間がかかったり、読み込んでいる最中にエラーを起こし上手く読み込めない場合には、画像の表示される場所が確保されずに、サイトのデザインが乱れることがあります。
サイズを予め明示しておくと、画像が読み込まれる前であっても、その分の場所を確保してくれるので、レイアウトが乱れません。

また、本来の大きさの画像サイズよりも、拡大したり縮小したりする場合には、画像サイズを指定すれば、そのとおりに拡大・縮小して表示できます。

画像サイズの指定は、ユーザビリティにおいても重視されるので、必ず指定するようにしましょう。

PageTop

CSSを使う

CSSを使った画像表示とは、画像をHTMLの要素の背景に指定する、ということです。

この方法を利用すると、画像の上に文字を配置することができます。
また、画像をくり返し表示させることができるので、テーブルの枠線を凝った画像で表示したい場合などに利用できます。

例えば、以下のように画像を8つ用意します。

テーブル角(左上) テーブル角(左下) テーブル角(右上) テーブル角(右下) テーブル枠線下 テーブル枠線左 テーブル枠線右 テーブル枠線上

テーブルの枠線にこれらの画像を使う場合、次のようにテーブルを組みます。

     
     
     

このテーブルの真ん中を、テキストを入力する箇所として、それを囲む残りの周囲8箇所に、以下のように画像を配置します(ここではimg要素で配置しています)。

テーブル角(左上) テーブル枠線上 テーブル角(右上)
テーブル枠線左   テーブル枠線右
テーブル角(左下) テーブル枠線下 テーブル角(右下)

これをCSSのbackground-imageプロパティを使って表示すると、以下のようになります。
なお、隅以外の画像には、background-repeatプロパティによりくり返し表示を指定しています。

     
     
     

→詳しくは「CSS:プロパティリファレンス:background-image」をご覧下さい。

→詳しくは「CSS:プロパティリファレンス:background-repeat」をご覧下さい。

PageTop

クリッカブルマップ

クリッカブルマップとは、画像の一部分にリンクが設定してある画像のことです。
クリッカブルマップをつくるには、img要素の他に、map要素とarea要素を使います。

img要素によって画像を表示し、map要素内にarea要素を配置して、リンクを設定する座標を明示します。

クリッカブルマップサンプル HTMLへ移動 CSSへ移動 Dreamweaverへ移動する

上の画像は、1つの画像ですが、3つのリンクを設定しています。
「HTML」は四角形(shape="rect")、「CSS」は円形(shape="circle")、「Dreamweaver」には多角形(shape="poly")を指定して、それぞれ座標を設定しています。マウスカーソルを画像の上に移動させると、その設定した座標内にある場合にクリックすれば、リンク先にジャンプします。

この設定は、以下のようにしています。

→詳しくは「HTML:要素リファレンス:map」「HTML:要素リファレンス:area」をご覧下さい。

関連リンク

よく読まれている記事

UpDate:2009-11-27