ホームページ制作鹿児島｜成果をあげるwebマーケティング

HTMLの基礎 画像を入れてみよう

Tweet

前回は<p>や<strong>など、よく使うフォント関連タグをご説明しました。

どうですか？つまづかずに活用できていますでしょうか？

『よゆーよゆー』
 

おぱんだ様は余裕のようですね。ではおぱんだ様、改行のタグは？！

『</br>だろ』
 

残念！<br />でした。スラッシュの位置が違いましたね。

『なんだよ！ちょっと間違えただけだろ！そんなすぐ覚えられるか！』
 

ごもっとも。そうですね。

よく覚えていないなぁ…というときは、前の講座をさかのぼって見てみてくださいね。

さて、今回は画像を表示するためのタグをご紹介します。

--------------------

<img src="画像ファイルURL" alt="画像コメント" width="画像の横幅" height="画像の縦幅"/>

--------------------

『コピペすりゃあいいんだろ』
 

上のタグそのままは使用できませんよ。日本語が入っています。

画像によってファイル名や大きさが変わりますから、その都度入力する必要があります。

例えばおぱんだ様の場合、

<img src="img/panda.jpg" alt="おぱんだ様" width="100" height="82"/>

　↓

<img src="img/panda.jpg" alt="おぱんだ様" width="100" height="82"/>

このようになります。

img/画像というのは、imgという名前のルートフォルダに画像が入っているという意味です。

alt属性は、画像の上にマウスポインタをもっていくとコメントが表示されるようになっています。

このalt属性、入力しなくても画像は表示されるのですが、入力しておくと音声ブラウザなどに優しいサイトになります。

すべての人に優しいサイト作りを心がけるならば、入力しておくと良いと思いますよ。

『俺はすべての人類に優しいパンダだからな。alt属性入れまくる』
 

かといってあまりにも長文は逆効果ですよ。簡潔にわかりやすく書きましょう。

『了解した』
 

今回はここまでです。次回は「リンクをはろう」です。

『お楽しみに！』

2010年01月08日