タダでインターネットでお小遣い稼ぎましょう!

タダでインターネットでお小遣いを稼ぎましょう!

スポンサードリンク
 

画像・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>
 
曲を追加する場合は、
<option value="音楽ファイルのURLかファイル名">曲名</option>を追加

 

このページの上へ