CSSを使った画像配置とALTテキストの話

ALTは代替テキストを表示する

HTMLで以下のような記述をしてみましょう。
<img src=test.jpg alt="ここに画像が来ます">
ここで、タグの終わりにくっついている「alt」というのは、画像が表示できないブラウザや、画像の表示をオフにしているブラウザ、あるいはインターネット接続などによってまだ画像が読み終わっていないときに、その部分にテキストを表示するものです。
「alt」と似たようなものに「title」がありますが、たとえば、
<img src=test.jpg title="テストの画像">
などのように記述すれば、画像が読み込まれた後でも、画像のタイトルをツールチップとして表示することができます。なお、この「title」というのは「div」や「a」などのタグにも使うことができますからお試しあれ。

CSSを使って画像を変化させる

スタイルシートで画像の位置を決める方法ですが、たとえば以下のようにします。
<img src=test.jpg style="position:absolute;top:50px;left:50px;width:200px;height:150px">
画面の左上に画像が表示されました。CSSの「postion」に「absolute」を指定してやると、画像は画面上の絶対位置で表示されます。
それに対して、「postion」に「relative」を指定してやることもできます。
A<img src=test.jpg style="position:relative;bottom:50px;left:50px;width:200px;height:150px">
こんどは「A」という文字の右上に画像が表示されました。このように、スタイルシートを使って画像を配置するには、画面上の絶対位置で指定する方法と、何かのオブジェクトからの相対位置で指定する方法との2種類があります。さらにJavaScriptと組み合わせれば、マウスを乗せると拡大する画像など、変幻自在のイメージを作りだすことができます。

ホームページ作成の見積もりは複数の業者に依頼をすることで、費用の相場も判断することが可能になります。