フリー素材を使う際に利用するHTMLタグ
フリー素材をサイト内のワンポイントのデザインとして使う場合は、
- <img src="フリー素材のファイル名（jpgやgifなど）" width="画像ファイルの横幅" height="画像ファイルの高さ" alt="画像ファイルの説明" />
のタグをHTMLの<body>～</body>タグの中に記述するのが基本です。
- srcは、画像ファイルのある場所を示すタグ
- widthは、画像ファイルの横幅をピクセル(px）で入力
- heightは、画像ファイルの高さをピクセル（px）で入力
- altは、画像ダイルの説明文などを入力します。
altタグは、万が一、画像が表示されない場合であっても説明文を表示することでユーザーさんに非表示になっているのが画像ファイルであるということを示す役割を持っています。
- <a href="リンク先URL" target="_blank"><img src="フリー素材のファイル名（jpgやgifなど）" width="画像ファイルの横幅" height="画像ファイルの高さ" alt="画像ファイルの説明" /></a>
と記述した場合、画像のまわりに紫色のボーダーが付いてしまいます。
このボーダーを非表示にしたい場合は、スタイルシートに、
a img {
border-style: none;
}
と記述するとボーダーが非表示になります。
- <a href="リンク先URL" target="_blank"><img src="フリー素材のファイル名（jpgやgifなど）" width="画像ファイルの横幅" height="画像ファイルの高さ" alt="画像ファイルの説明" border="0" /></a>
と記述する方法もありますが、最近ではスタイルシートへ記述して対応することを推奨されています。
ページの背景としてフリー素材を使う場合は、スタイルシートに、
body {
background: 色 url(画像ファイル名) 画像を表示する位置;
}
と記述します。
[ 例 ]
body {
font: 13px/1.6 Verdana, Geneva, sans-serif;
color: #666;
background: #F6E6E7 url(images/body_bk.jpg) repeat-y left;
}
bodyの中に記述すると、ページ全体の装飾の命令が実行できます。
- repeatは、背景に画像を敷き詰めるか否か。repeat-yは縦に画像を繰り返し表示する。repeat-xは横に画像を繰り返し表示する。no-repeatは、画像を1枚だけ表示する。repeatは、ページの背景全体に画像を敷き詰める。
- leftは左寄せ、rightは右寄せ、centerはページの中央、bottomはページの下部、topは、ページの上部。
- urlは、画像ファイルのある場所を示します。
