img要素は画像を表示するタグです。src属性・alt属性



基本形
<img src="パス" alt="代替テキスト">

サイズ指定
width="横幅" height="高さ"




※説明のために「<」と「>」が全角になっています。ご注意下さい


img属性画像を表示するためのインライン要素になります。

基本形は以下の通り
<img src="パス" alt="代替テキスト">
ご覧の通り終了タグが不要の空要素です。

src属性にはファイルのパスを、alt属性には文字列を記述します。

alt属性を省いて画像表示させることも可能ですが、HTMLの規則ではalt属性を入れるのが決まりなので必ず入れるようにして下さい。代替テキストが不要な場合は『alt=""』のように記述します。


また、代替テキストを説明文代わりに利用している人もいますが、本来の目的は画像が表示されない時に表示するためのテキスト文章です。

代替テキストサンプル


ブラウザによっては画像にカーソルを合わせると代替テキストが表示されますが、表示されないブラウザもあるので間違った使い方をしないように注意して下さい。(音声ブラウザでは、画像の代わりに代替テキストが読み上げられます)。




画像のサイズ指定にはwidth属性とheight属性を使用します。

width="横幅" height="高さ"

単位には数値か%(パーセント)を指定します。数値にはpx(ピクセル)数を記述します。※pxの単位は不必要です。この画像のサイズ設定ですが、設定しておくとブラウザの読み込みが速くなるというメリットがあります。画像のサイズは画像ファイルを右クリックして、プロパティを選択すれば確認出来ます。ぜひ設定するように心がけて下さい。

例えば横幅100px高さ200pxの画像の場合
width="100" height="200" となります。

%(パーセント)の場合は領域の相対指定になります。あまり使うことはありません。

横幅50%の相対指定





画像の位置指定を行う「align属性」やボーダーの幅を設定する「border属性」がありますがこれらはW3C非推奨の属性です。ブラウザによっては反応しない場合もあります。位置指定やボーダーの設定はスタイルシートで設定するようにしましょう。




カテゴリ | HTML | このブログの読者になる | 更新情報をチェックする

About Site(サイト案内) 概要

アクセスアップ方法・アクセスアップツールを中心に紹介しています。出来るだけ易しいサイト作りを目指したいと思います。まだまだコンテンツが少ないですが確実なアクセスアップ方法を紹介しますのでどうぞ宜しくお願いします。アクセスアップ記事以外にもWeb製作のことやiPhoneのこと。ニュースなども取り上げていきます。


◆リンク
http://secretaccess.seesaa.net/
タイトルは『Digital Life -デジタルライフ-
(テキストリンクのみです)
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。