| 画像を表示する ↓ |
|
指定した場所に画像を表示させます
画像を表示する場合は、必ず alt属性を指定しましょう（下記参照）
<img src="★">
<p>
<img src="画像URL">
</p>
|
サンプル
画像を使用する場合は、
画像ソフトなどを使用して
色数を落としたり圧縮率を上げたりして
ファイルサイズを小さくしましょう
|
| 画像が表示されないときにテキストを表示する ↓ |
|
画像の代わりに表示されるテキストを alt属性を記述して指定します
ブラウザで画像を読み込まない設定にしていたり、
画像が読み込まれるまでの時間や
読み込みに失敗した場合にもテキストが表示されます
<img src="★" alt="★">
<p>
<img src="画像URL" alt="テキスト">
</p>
|
サンプル
代わりのテキストが必要ない場合は
alt="" としておきましょう
|
| 画像のサイズを指定する ↓ |
|
width属性とheight属性で画像の表示サイズを指定します
画像のサイズを直接指定する場合はピクセルで、
ウィンドウのサイズに対する割合で指定する場合はパーセントで指定します
何も指定しない場合は、本来の画像サイズで表示されます
<img src="★" width="★" height="★" alt="★">
<p>
<img src="画像URL" width="200" height="267" alt="">
<img src="画像URL" width="70" height="280" alt="">
<img src="画像URL" width="20%" height="15%" alt="">
</p>
|
サンプル
|
| 画像の枠線を指定する ↓ |
|
通常、画像に枠線は引かれませんが枠線で囲みたい場合は
border属性を記述してピクセルで線の太さを指定できます
画像でリンクするときに表示される枠線の有無や太さも
border属性で指定できます
※枠線の色は指定できません
<img src="★" border="★"alt="">
<p>
<img src="画像URL" border="0" width="100" height="200" alt="">
<img src="画像URL" border="5" width="100" height="200" alt="">
<img src="画像URL" border="10" width="100" height="200" alt="">
</p>
|
サンプル
|
| 画像とテキストの並び方を指定する ↓ |
|
align属性で画像とテキストの並べ方を指定します
<img src="★" width="★" height="★" align="★" alt="">
top→画像とテキストの上を揃える
middle→画像の中央とテキストを揃える
bottom→画像とテキストの下を揃える
<p>
<img src="css/sg01.gif" width="100" height="100" align="top" alt="">
これは top
</p>
<p>
<img src="css/sg01.gif" width="100" height="100" align="middle" alt="">
これは middle
</p>
<p>
<img src="css/sg01.gif" width="100" height="100" align="bottom" alt="">
これは bottom
</p>
|
サンプル
|
| 画像にテキストを回り込ませる ↓ |
|
align属性で画面の端に画像を指定すると、
画像の反対側にテキストが表示されます
<img src="★" align="★">
left→画像を左、テキストを右
right→画像を右、テキストを左
サンプル
テキストに対してテーブルの位置を指定するを参照
※別窓で開きます
|
| 画像に対しての回り込みを解除する ↓ |
|
テキストの回りこみを解除して、
それ以降のテキストを画像の下から続けたいときに
brタグに clear属性を記述します
<br clear="★">
サンプル
テーブルに対してテキストの回りこみを解除するを参照
※別窓で開きます
|
| 画像とテキストの間隔を指定する ↓ |
|
画像の周りにスペースを空けたい場合、
vapace や hspace をピクセルで記述します
<img src="★" vspace="★" hspace="★">
vapace→画像に対して上下の余白
hspace→画像に対して左右の余白
<p>
<img src="画像URL" width="30%" height="50%" align="left"
vapace="30" hspace="50" alt="テキスト">
コメント〜
</p>
|
サンプル
|
画像の周りにスペースを空けたい場合、vapace や hspace をピクセルで記述します。vapace→画像に対して上下の余白、hspace→画像に対して左右の余白。
こんな感じになりました。サンプルは画像に対して上下30、左右50です。
|
|
| BGMを鳴らす ↓ |
|
WEBページで音楽を鳴らすには<bgsound>タグを記述します
対応しているファイル形式は、(.mid)(.wav)(.au)(.aif)などです
loop属性で曲を繰り返す回数を指定します
loop="3"なら、3回サウンドが繰り返されます
無制限に繰り返すには、loop="infinite"と記述します
※<bgsound>タグはInternet Explorerのみ対応
<bgsound src="音楽ファイルのURLかファイル名" loop="回数">
または、
<a href="音楽ファイルのURLかファイル名">BGM演奏</a>
サンプル
BGM演奏
BGM by 海でひろったオルゴール
※パソコンにインストールされている音楽プレイヤーなどのソフトが起動します
|
| プレイヤーでBGMを鳴らす ↓ |
|
プレイヤーを使って任意で音楽を鳴らします
<embed src="midiファイルのURL" width="100" height="40" autostart="false" repeat="true" loop="true">
サンプル
|