TOPページ > 画像を表示する/動画/サウンド
画像を表示する/動画/サウンド

画像を表示する/動画/サウンド

基本的な画像の表示方法や、プラグインによる動画・サウンドの再生についてご紹介します。テキストだけでなくイラストや写真でブログも楽しくなります。

だたしファイルはサイズが大きくなると当然表示に時間がかかりますので必要に応じてファイルサイズを圧縮してからアップロードしましょう。

画像を表示する/動画/サウンド 項目一覧

<bgsound>タグを使って、バックグラウンドでサウンドを演奏することができます。このタグは、Netscapeは対応していません。 <bg...

ホームページやブログなどのウェブサイトページ内に、インラインフレームを表示させることができます。インラインフレームとは、ページ内に別のページの内容を埋め込むこ...

<embed>タグで、動画やサウンドファイルを再生することができます。 <embed src="再生するファイルのURL"...

文字や文章、テーブルなどの背景画像にBACKGROUND-IMAGE を使って背景画像を指定した際に、背景画像の表示位置を指定することができます。 <タ...

文章の背景に画像を指定した際に、スクロールバーを操作しても背景画像が一緒にスクロールしない固定表示にすることができます。 <タグ名 style=&quo...

ホームページやブログなどのHTML言語を使用したウェブサイトで 文章の背景に画像を指定した場合、これを繰返し表示(タイリング)させることができます。上下左右にタ...

ホームページやブログなどのウェブサイトに表を 表示させるには、 TABLEタグを使ってテーブルを作成しますが、この表内には 画像やリンクを貼ったり、ボタンを作...

HTML言語を使用して表示する ホームページやブログなどのウェブサイトでは、ブロックタグやインラインタグで括られた文章などの領域の背景に、画像を指定することが...

限られたスペースに縮小して貼った画像をクリックでダウンロードさせて、拡大してみせることができます。 ここに、『./sample/tahiti.jpg 』という...

画像の左右に回り込ませた文章の回り込みを解除することができます。 <br clear="解除する回り込み>" または <...

画像の余白に文字を回り込ませる際に、画像と文字の左右間隔を指定することができます。 <img src="画像URL" align=&...

画像の余白に文字を回り込ませる際に、画像と文字の左右間隔を指定することができます。 <img src="画像URL" align=&...

画像を表示させる際に、左右に余った余白に文章を回り込ませることができます。 <img src="画像URL" aling="...

ブログ内に表示させる画像のレイアウト位置は、通常それ以前のテキストなどの位置指定にしたがって表示されますが、個別に位置を指定することができます。 <im...

ファイルマネージャーや ftp を使って画像をアップロードすれば、ブログ内に画像を表示させることができます。 <img src="画像URL&...

ホームページやブログなどのウェブサイトに アンカータグ( Aタグ)を使って他のページへジャンプするためのリンクを設定する際に、テキストだけでなく 画像にリンク...

2006年02月26日

<bgsound>タグを使って、バックグラウンドでサウンドを演奏することができます。このタグは、Netscapeは対応していません。

<bgsound src="サウンドファイルURL" loop="繰返し回数">

という記述になります。繰返し回数は、回数または『 infinite 』(無限に繰返し)から指定できます。終了タグはありません。

サンプルソースです。

<bgsound src="sample/soundsample.WAV" loop="3">

続きを読む "バックグラウンドでサウンドを演奏する(BGM)" »

2006年02月25日

ホームページやブログなどのウェブサイトページ内に、インラインフレームを表示させることができます。インラインフレームとは、ページ内に別のページの内容を埋め込むことができるフレームです。

<iframe src="ページのURL" name="フレーム名" width="フレームの幅" height="高さ" marginwidth="左右の余白" marginheight="上下の余白 scrolling="スクロールバーの表示方法" frameborder="フレーム枠の表示方法" align="表示位置">
インラインフレーム未対応ブラウザのための代替表示文章
</iframe>
  1. ページのURL:インラインフレーム内に表示するページのURLを指定します。絶対パスでの指定をおすすめします。
  2. フレーム名:フレームの名前を指定します。省略可能ですが、別にフレームの操作をする場合に識別名が必要になります。
  3. フレームの幅/フレームの高さ:縦横幅を指定します、値は、ピクセル値です。
  4. 左右の余白/上下の余白:フレームに対して余白を設けたい場合に指定します。値は、ピクセル値です。
  5. スクロールバーの表示方法: auto なら自動、yes なら表示、no なら非表示になります。
  6. フレーム枠の表示方法:フレーム枠を表示するかどうかを指定します。yes なら表示、no なら非表示になります。
  7. 表示位置:フレームの表示位置 (テキストなどの回りこみ) を指定します。center なら中央揃え(回り込みなし)、left なら左揃え(左側に回りこみ)、right なら左揃え(左側に回り込み) というふうになります。
  8. インラインフレーム未対応ブラウザのための代替表示文章:閲覧者のブラウザがインラインタグ未対応の場合は、ここに指定した文章などが代わりに表示されます。

サンプルソースです。

続きを読む "インラインフレームを表示する" »

<embed>タグで、動画やサウンドファイルを再生することができます。

<embed src="再生するファイルのURL" volume="音量" width="再生させる領域の幅" height="高さ">
<noembed>プラグイン未対応ブラウザに表示する代替文章</noembed>
</embed>

という形式になります。音量は、0~100までの数値で指定します。数字が大きいほど音量が大きくなります。公共の場でインターネットを使用するケースも増えていますので音量は、ひかえめに。領域サイズの指定は、ピクセル値になります。サンプルソースです。

<embed src=".sample/soundsample.WAV" volume="40" width="150" height="50">
<noembed>

BGMチャイニーズマーチです。プラグイン対応のブラウザでご覧ください。<br>
または、こちらからダウンロードできます(zip形式)
</noembed>
</embed>

続きを読む "プラグインで動画やサウンドを再生する" »

2006年02月04日

文字や文章、テーブルなどの背景画像にBACKGROUND-IMAGE を使って背景画像を指定した際に、背景画像の表示位置を指定することができます。

<タグ名 style="background-position:背景画像表示位置"></タグ名>
  1. タグ名:P や DIV、SPAN タグなどが一般的ですが、他にもほとんどのブロックタグおよびインラインタグが使用可能です。
  2. 背景画像表示位置:背景画像の表示位置を、下記の絶対サイズ、相対サイズまたはキーワードから指定することができます。
    指定方法表示位置
    絶対サイズ、
    相対サイズ
    表示領域の右上から、背景画像の左上までの距離を横距離、 縦距離の順番で指定
    表示領域の各辺から、背景画像の各辺までの距離を、 左右の距離合計に対する左側距離の比率、上下距離の合計に対する上側距離の比率、の順番で指定
    キーワード 左右の配置(left , right , center)、 上下の配置(top , bottom , center)の順番で指定
    絶対サイズ、相対サイズは以下の単位が使用できます。相対サイズは、その場面で使われている書体のサイズが基準です。
    絶対サイズ意味
    inインチ( 1 in = 25.4 mm )
    cmセンチメートル
    mmミリメートル
    ptポイント( 1 pt = 1/72 in)
    pcパイカ( 1 pc = 12 pt )
    pxピクセル(表示上の 1 ドット幅)
    相対サイズ意味
    em基準書体の文字の高さ
    ex基準書体の文字 x の高さ
    %基準書体のサイズに対する百分率
    ※正確にはデバイス依存の相対サイズ

続きを読む "文字や文章、テーブルなどの背景画像の位置を指定する" »

2006年02月01日

文章の背景に画像を指定した際に、スクロールバーを操作しても背景画像が一緒にスクロールしない固定表示にすることができます。

<タグ名 style="background-attachment:固定方法"></タグ名>
  1. タグ名:P、DIV および SPAN タグなどが一般的ですが、ほとんどのブロックタグおよびインラインタグが使用可能です。
  2. 固定方法:下記のキーワードで指定できます。
    キーワード文字のスタイル
    scroll 固定しない。ユーザーがスクロールバーで画面をスクロールすると、それにあわせて背景画面も移動する。
    fixed 固定する。スクロールバーを操作しても背景画像は常に同じ位置に表示される。

続きを読む "文章の背景に画像を固定表示する" »

ホームページやブログなどのHTML言語を使用したウェブサイトで 文章の背景に画像を指定した場合、これを繰返し表示(タイリング)させることができます。上下左右にタイリング、縦方向のみの繰返し、横方向のみの繰返しから選択できます。

<タグ名 style="background-repeat:繰返し方法">背景画像を表示する文章</タグ名>
  1. タグ名: P や DIV、SPAN などが一般的ですが、その他にもほとんどのブロックタグおよびインラインタグが使用可能です。
  2. 繰返し方法:繰返し方法は、下記の中から指定できます。
    キーワード繰返し方法
    repeat上下左右にパターンを繰り返す(通常の繰返し)
    repeat-x左右にパターンを繰り返す
    repeat-y上下にパターンを繰り返す
    no-repeat繰り返さない

サンプルソースです。元画像は、この50x50ピクセルの小さな画像ですが、これを y(上下)方向に繰返し表示させます。

続きを読む "文章の背景に指定した画像を繰返し表示する" »

2006年01月29日

ホームページやブログなどのウェブサイトに表を 表示させるには、 TABLEタグを使ってテーブルを作成しますが、この表内には 画像やリンクを貼ったり、ボタンを作成したり、テーブル外と同様に自由に扱うことができます。

サンプルの画像を 3つ用意しました。

これで表をつくってみます。

とりいぬねこ

ソースは、こんな感じになります。普通に画像を貼るのとなんら変わりません。

<table border="1">
<tr>
<td><img src="./sample/bird.gif" width="50" height="50"></td>
<td><img src="./sample/dog.gif" width="50" height="50"></td>
<td><img src="./sample/cat.gif" width="50" height="50"></td>
</tr>
<tr><td>とり</td><td>いぬ</td><td>ねこ</td></tr>
</table>

続きを読む "テーブルに画像やボタンを表示する" »

2006年01月26日

HTML言語を使用して表示する ホームページやブログなどのウェブサイトでは、ブロックタグやインラインタグで括られた文章などの領域の背景に、画像を指定することができます。

<タグ名style="background-image:url(背景画像URL)">背景色を指定する文章</タグ名>
  1. タグ名:P や DIV、SPAN タグなどが一般的ですが、ほとんとのブロックタグおよびインラインタグが使用可能です。
  2. 背景画像URL:背景画像URLを相対パスまたは絶対パスで指定します。URLは、'(シングルクォート)または ”(ダブルクォート)で括っても構いません。

続きを読む "文章の背景画像を指定する" »

2006年01月25日

限られたスペースに縮小して貼った画像をクリックでダウンロードさせて、拡大してみせることができます。

ここに、『./sample/tahiti.jpg 』というjpgファイルが用意してありますが、このファイルの大きさは 640x512 ピクセルです。ブログではちょっとこのまま貼るわけにもいきません。

そこで、サイズを指定したIMGタグを、画像URLへ直リンクさせるアンカータグ(Aタグ)の中に 入れ子にしましょう。

<a href="./sample/tahiti.jpg" target="_blank" title="タヒチの青空">
<img src="./sample/millenario.jpg" width="160" height="120" alt="タヒチの青空">
</a>

このソースは、青字部分でサイズを指定して貼り付けますが、その画像に元画像をリンクさせていますので、新しいウィンドウにダウンロードして大きな画像を見せることができます。
※ウィンドウのサイズを指定しないで開いているので、画像が大きすぎるなど、場合によっては ブラウザで適当に縮小されます。

↓Clickで拡大↓
タヒチの青空

もし、本当に原寸の画像サイズで表示させたい場合は、次のようにしてもよいでしょう。

続きを読む "画像をクリックで拡大させる" »

画像の左右に回り込ませた文章の回り込みを解除することができます。

<br clear="解除する回り込み>"
または
<タグ名 style="clear:解除する回り込み">

という記述になります。改行して次の行からは回り込ませたくない、という場合はbrが便利ですし、タグ名には ほとんどのインラインタグやブロックタグが使えますので、次の段落からは回り込みを解除したい、という場合はタグ内のスタイル指定でclearを指定すると良いでしょう。

解除する回り込みは、『left』(右側への回り込みの解除)、『right』(左側への回り込みの解除)または『both』(両方の解除)が指定できます。

<img src="./sample/volans.jpg" width="160" height="120" align="left" alt="タイリクモモンガ">
■タイリクモモンガ(Pteromys volans)<br>
齧歯目 リス科<br>
体長:15~16cm<br>
体重:100~120g<br>
分布:フィンランド~朝鮮、日本(北海道) <br clear="left">
【その他】夜行性で樹上に巣を作ります。前肢と後肢の間には発達した皮膜があり、木から木へと滑空します。

これを表示させると、次のようになります。

タイリクモモンガ ■タイリクモモンガ(Pteromys volans)
齧歯目 リス科
体長:15~16cm
体重:100~120g
分布:フィンランド~朝鮮、日本(北海道)
【その他】夜行性で樹上に巣を作ります。前肢と後肢の間には発達した皮膜があり、木から木へと滑空します。

画像の余白に文字を回り込ませる際に、画像と文字の左右間隔を指定することができます。

<img src="画像URL" align="画像表示位置" vspace="画像と文字の上下間隔">
  • 画像表示位置:『left』(文章を右に回り込ませる)または『right』(文章を右に回り込ませる)から指定できます。
  • 画像と文字の上下間隔:数値で指定します。値はピクセルになります。
<img src="./sample/millenario.jpg" width="160" height="120" align="left" vspace="20" alt="東京ミレナリオ2006">
■2006年1月1日■<br>
東京ミレナリオ2005-2006を見てきました。来年から東京駅の工事に伴い休止となってしまうそうです。<br>
再開の目処はたっていないとのことだったので、今回見ることができてよかったです。<br>
12月31日の21:00にいったん消灯し、1月1日の0:00~3:00まで再点灯するのですが、ミレナリオでのカウントダウンにたくさんの人が集まり、たいへんにぎやかな雰囲気でした。

このソースを表示させると、次のようになります。わかりやすいように少し大げさ( 20 ピクセル)に間隔を指定してみました。

東京ミレナリオ2006■2006年1月1日■
東京ミレナリオ2005-2006を見てきました。来年から東京駅の工事に伴い休止となってしまうそうです。
再開の目処はたっていないとのことだったので、今回見ることができてよかったです。
12月31日の21:00にいったん消灯し、1月1日の0:00~3:00まで再点灯するのですが、ミレナリオでのカウントダウンにたくさんの人が集まり、たいへんにぎやかな雰囲気でした。

ただし この指定は、画像の上下に余白を設けるものなので、ご覧のとおり上側にも20ピクセルの余白が生まれます。上側にも間隔が空いてしまうのが好ましくない場合は、vspace属性ではなく、スタイル指定で余白(マージン)を設けるのがよいでしょう。

続きを読む "画像と文字の上下間隔を指定する" »

画像の余白に文字を回り込ませる際に、画像と文字の左右間隔を指定することができます。

<img src="画像URL" align="画像表示位置" hspace="画像と文字の左右間隔">
  • 画像表示位置:『left』(文章を右に回り込ませる)または『right』(文章を右に回り込ませる)から指定できます。
  • 画像と文字の左右間隔:数値で指定します。値はピクセルになります。
<img src="./sample/millenario.jpg" width="160" height="120" align="left" hspace="20" alt="東京ミレナリオ2006">
■2006年1月1日■<br>
東京ミレナリオ2005-2006を見てきました。来年から東京駅の工事に伴い休止となってしまい、再開の目処はたっていないとのことだったので、今回見ることができてよかったです。<br>
12月31日の21:00にいったん消灯し、1月1日の0:00~3:00まで再点灯するのですが、ミレナリオでのカウントダウンにたくさんの人が集まり、たいへんにぎやかな雰囲気でした。

このソースを表示させると、次のようになります。わかりやすいように少し大げさ( 20 ピクセル)に間隔を指定してみました。

東京ミレナリオ2006■2006年1月1日■
東京ミレナリオ2005-2006を見てきました。来年から東京駅の工事に伴い休止となってしまい、再開の目処はたっていないとのことだったので、今回見ることができてよかったです。
12月31日の21:00にいったん消灯し、1月1日の0:00~3:00まで再点灯するのですが、ミレナリオでのカウントダウンにたくさんの人が集まり、たいへんにぎやかな雰囲気でした。

ただし この指定は、画像の左右に余白を設けるものなので、ご覧のとおり画像右側に文字を回り込ませた場合でも左側にも20ピクセルの余白が生まれます。回り込ませた文字の逆側にも間隔が空いてしまうのが好ましくない場合は、hspace属性ではなく、スタイル指定で余白(マージン)を設けるのがよいでしょう。

続きを読む "画像と文字の左右間隔を指定する" »

画像を表示させる際に、左右に余った余白に文章を回り込ませることができます。

<img src="画像URL" aling="画像表示位置">
回り込ませる文章

という記述になります。画像表示位置は、『left』(文章を右に回り込ませる)または『right』(文章を右に回り込ませる)から指定できます。

<img src="./sample/cherry.jpg" width="150" height="120" align="right" alt="桜の花の写真">
■20XX年4月12日■<br>
桜を見にいってきました。携帯のカメラで撮影したので画像が良くありませんが、本当にきれいでした。

このソースを表示させると、次のようになります。

桜の花の写真■20XX年4月12日■
桜を見にいってきました。携帯のカメラで撮影したので画像が良くありませんが、本当にきれいでした。

ブログ内に表示させる画像のレイアウト位置は、通常それ以前のテキストなどの位置指定にしたがって表示されますが、個別に位置を指定することができます。

<img src="画像URL" align="画像の表示位置">

という記述になります。画像の表示位置は、『left』(左詰めで表示)、『right』(右詰めで表示)、『center』(表示領域の中央に表示)から指定できます。

<img src="./sample/flower_orange.jpg/" align="right" widht="160" height="120" alt="オレンジ色の花画像">

これを実際に表示させると次のようになります。

オレンジ色の花画像

ファイルマネージャーや ftp を使って画像をアップロードすれば、ブログ内に画像を表示させることができます。

<img src="画像URL" width="画像の表示幅" height="画像の表示高さ" alt="画像の説明文書">

という形式になります。

  • 画像URL:絶対パスまたは相対パスで指定できます
  • 画像の表示幅/画像の表示高さ:省略すると、アップロードした画像サイズで表示されます。
  • 画像の説明文書:画像非対応のブラウザでは代替文字として表示されます。また、たいたいのブラウザでは画像にマウスを重ねたときチップアップヘルプのように文書が表示されます。省略しても画像の表示には差し支えありません。

ここに、あらかじめ『 ./sample/flower_pink.jpg 』というjpgファイルがアップロードしてあります。これをブログ内に表示させるソースは、こんな感じです。

<img src="./sample/flower_pink.jpg" width="160" height="120" alt="ピンク色の花の画像>

これを実際に表示させると次のようになります。

ホームページやブログなどのウェブサイトに アンカータグ( Aタグ)を使って他のページへジャンプするためのリンクを設定する際に、テキストだけでなく 画像にリンクを貼ることもできます。あらかじめ、画像をアップロードしておいてください。

<a href="ジャンプ先URL" target="ウィンドウの指定">
<img src="画像URL" width="画像の横幅" height="画像の高さ" border="枠の太さ">
</a>
  1. 画像URL:リンクを設定する画像のURLを、絶対パスまたは相対パスで指定します。
  2. 画像の横幅/高さ:画像の表示寸法を指定します。原寸でなくても構いません。省略すると、だいたいは原寸で表示されます。
  3. 枠の太さ:画像の枠の太さを指定します。値は、ピクセル値になります。省略すると ブラウザやスタイルシートの設定によっては 5ピクセル程度の青枠が付いてしまうことが多いので、枠線を表示させたくない場合は、0 に指定しましょう。
  4. ジャンプ先URL:リンクでジャンプさせるページのURLを、絶対パスまたは相対パスで指定します。
  5. ウィンドウの指定:リンク先のページを表示するウィンドウまたはフレームを指定します。下記の中から選択できます。省略すると、『_self 』扱いとなります。現在表示中のページを残したいときは『_blank 』にするとよいでしょう。
    _top 今のフレームのトップページ(フレームが属するウィンドウ)
    _blank 新しいウィンドウを開いて表示
    _self 今のフレームまたはウィンドウ
    _parent 今のフレームを取り囲む一つ上の親フレーム
    任意名称 フレームを使用していなければ新しいウィンドウが開く。 フレームを使用していてフレームの名前と一致している 場合、そのウィンドウ。

サンプルです。

続きを読む "画像にリンクを貼る" »

IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス