T,N,O〜タダでネットでお小遣い ＞＞ タダでインターネットでお小遣い稼ぎ！

画像・BGM

前のページへ

画像・BGM

画像を表示する   ↓ 前のページへ

指定した場所に画像を表示させます。 画像を表示する場合は、必ず 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="★">   サンプル テーブルに対してテキストの回りこみを解除するを参照 ※別窓で開きます

このページの上へ

画像とテキストの間隔を指定する   ↓ 前のページへ

テキストの回りこみを解除して、 それ以降のテキストを画像の下から続けたいときに brタグに clear属性を記述します。 <br clear="★">   サンプル 画像の周りにスペースを空けたい場合、 vapace や hspace をピクセルで記述します <img src="★" vspace="★" hspace="★">   vapace→画像に対して上下の余白 hspace→画像に対して左右の余白   <p> <img src="画像URL" width="150" height="200" align="left" vapace="10" hspace="20" alt="テキスト"> コメント〜 </p>   サンプル 画像の周りにスペースを空けたい場合、vapace や hspace をピクセルで記述します。vapace→画像に対して上下の余白、hspace→画像に対して左右の余白。 こんな感じになりました。サンプルは画像に対して上下10、左右20です。

このページの上へ

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">   サンプル BGM by 海でひろったオルゴール プルダウン式 <bgsound id=bgm loop=infinite> <select onchange="bgm.src= this.options[selectedIndex].value"> <option selected>BGM</option> <option value="音楽ファイルのURLかファイル名"> 曲名 1</option> <option value="音楽ファイルのURLかファイル名"> 曲名 2</option> <option value="音楽ファイルのURLかファイル名"> 曲名 3</option> </select> BGM 曲名 1 曲名 2 こんな感じ   曲を追加する場合は、 <option value="音楽ファイルのURLかファイル名">曲名</option>を追加

このページの上へ