Web Material Cafe

素材利用FAQ-画像に関するHTML/CSS

画像に関するHTML/CSS

画像に関するHTMLを少し説明します。

画像を呼び出す基本形
<img src="画像のURL" alt="画像の説明文" width="○○" height="○○" border="0" >

img:画像を呼び出す為のタグ
src:呼び出す画像のurlを指定
alt:代替テキスト
width:画像の横幅
height:画像の縦幅
border:画像の枠サイズ

画像サンプル
上の画像を呼び出すタグを書いてみます。
まず画像のurl、サイズ(画像を右クリックしてプロパティを参照)
http://wmc.to/mfaq/img/wmc.gif

<img src="http://wmc.to/mfaq/img/wmc.gif" width="124" height="15" alt="画像サンプル" border="0">

borderは画像の周りを枠で囲みます。今は分かりやすくする為に書きましたがW3CはHTML内に書くことを推奨していません。
特に全ての画像に枠が必要ないときはスタイルシートで補います。
<head></head>内に

<style type="text/css">
<!--
img {border: 0;}
-->
</style>

上記を記入するとborderを記入する必要はありません。
(外部CSSに書くのが一番いいかも)

altはどんな時に使われるのか?
実は私もよく省略してしまったりします。
画像の変わりに表示される代替テキストですが、障害をもっている方にとって内容を知る上でのとても重要な属性となります。
alt属性を指定する習慣を付けた方がいいですね。


背景に関するHTML

背景を呼び出す基本形
<body background="画像のURL">

壁紙サンプル
body内に直接書きます。
CSSを使うことでさまざまなレイアウトも可能になります。
上の画像を使用して色々と実験してみます。→実験ページ
実験ページ以上に組み合わせで色々できるので試してみてください。

Since 12.April.2001. Japanese fonts required to view this site
Copyright (C) 2001-2006 Web Material Cafe All rights reserved.