基本的な画像の表示方法や、プラグインによる動画・サウンドの再生についてご紹介します。テキストだけでなくイラストや写真でブログも楽しくなります。
だたしファイルはサイズが大きくなると当然表示に時間がかかりますので必要に応じてファイルサイズを圧縮してからアップロードしましょう。
<bgsound>タグを使って、バックグラウンドでサウンドを演奏することができます。このタグは、Netscapeは対応していません。
という記述になります。繰返し回数は、回数または『 infinite 』（無限に繰返し）から指定できます。終了タグはありません。
サンプルソースです。
ホームページやブログなどのウェブサイトページ内に、インラインフレームを表示させることができます。インラインフレームとは、ページ内に別のページの内容を埋め込むことができるフレームです。
サンプルソースです。
<embed>タグで、動画やサウンドファイルを再生することができます。
という形式になります。音量は、0～100までの数値で指定します。数字が大きいほど音量が大きくなります。公共の場でインターネットを使用するケースも増えていますので音量は、ひかえめに。領域サイズの指定は、ピクセル値になります。サンプルソースです。
文字や文章、テーブルなどの背景画像にBACKGROUND-IMAGE を使って背景画像を指定した際に、背景画像の表示位置を指定することができます。
| 指定方法 | 表示位置 |
|---|---|
| 絶対サイズ、 相対サイズ |
表示領域の右上から、背景画像の左上までの距離を横距離、 縦距離の順番で指定 |
| ％ | 表示領域の各辺から、背景画像の各辺までの距離を、 左右の距離合計に対する左側距離の比率、上下距離の合計に対する上側距離の比率、の順番で指定 |
| キーワード | 左右の配置（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 の高さ |
| % | 基準書体のサイズに対する百分率 |
文章の背景に画像を指定した際に、スクロールバーを操作しても背景画像が一緒にスクロールしない固定表示にすることができます。
| キーワード | 文字のスタイル |
|---|---|
| scroll | 固定しない。ユーザーがスクロールバーで画面をスクロールすると、それにあわせて背景画面も移動する。 |
| fixed | 固定する。スクロールバーを操作しても背景画像は常に同じ位置に表示される。 |
ホームページやブログなどのHTML言語を使用したウェブサイトで 文章の背景に画像を指定した場合、これを繰返し表示（タイリング）させることができます。上下左右にタイリング、縦方向のみの繰返し、横方向のみの繰返しから選択できます。
| キーワード | 繰返し方法 |
|---|---|
| repeat | 上下左右にパターンを繰り返す（通常の繰返し） |
| repeat-x | 左右にパターンを繰り返す |
| repeat-y | 上下にパターンを繰り返す |
| no-repeat | 繰り返さない |
サンプルソースです。元画像は、この50ｘ50ピクセルの小さな画像ですが、これを y（上下）方向に繰返し表示させます。
ホームページやブログなどのウェブサイトに表を 表示させるには、 TABLEタグを使ってテーブルを作成しますが、この表内には 画像やリンクを貼ったり、ボタンを作成したり、テーブル外と同様に自由に扱うことができます。
サンプルの画像を 3つ用意しました。
これで表をつくってみます。
 |
 |
 |
| とり | いぬ | ねこ |
ソースは、こんな感じになります。普通に画像を貼るのとなんら変わりません。
HTML言語を使用して表示する ホームページやブログなどのウェブサイトでは、ブロックタグやインラインタグで括られた文章などの領域の背景に、画像を指定することができます。
限られたスペースに縮小して貼った画像をクリックでダウンロードさせて、拡大してみせることができます。
ここに、『./sample/tahiti.jpg 』というjpgファイルが用意してありますが、このファイルの大きさは 640x512 ピクセルです。ブログではちょっとこのまま貼るわけにもいきません。
そこで、サイズを指定したIMGタグを、画像URLへ直リンクさせるアンカータグ(Aタグ)の中に 入れ子にしましょう。
このソースは、青字部分でサイズを指定して貼り付けますが、その画像に元画像をリンクさせていますので、新しいウィンドウにダウンロードして大きな画像を見せることができます。
※ウィンドウのサイズを指定しないで開いているので、画像が大きすぎるなど、場合によっては
ブラウザで適当に縮小されます。
もし、本当に原寸の画像サイズで表示させたい場合は、次のようにしてもよいでしょう。
画像の左右に回り込ませた文章の回り込みを解除することができます。
という記述になります。改行して次の行からは回り込ませたくない、という場合はbrが便利ですし、タグ名には ほとんどのインラインタグやブロックタグが使えますので、次の段落からは回り込みを解除したい、という場合はタグ内のスタイル指定でclearを指定すると良いでしょう。
解除する回り込みは、『left』（右側への回り込みの解除）、『right』（左側への回り込みの解除）または『both』（両方の解除）が指定できます。
これを表示させると、次のようになります。
■タイリクモモンガ（Pteromys volans）画像の余白に文字を回り込ませる際に、画像と文字の左右間隔を指定することができます。
このソースを表示させると、次のようになります。わかりやすいように少し大げさ( 20 ピクセル)に間隔を指定してみました。
■2006年1月1日■ただし この指定は、画像の上下に余白を設けるものなので、ご覧のとおり上側にも20ピクセルの余白が生まれます。上側にも間隔が空いてしまうのが好ましくない場合は、vspace属性ではなく、スタイル指定で余白（マージン）を設けるのがよいでしょう。
画像の余白に文字を回り込ませる際に、画像と文字の左右間隔を指定することができます。
このソースを表示させると、次のようになります。わかりやすいように少し大げさ( 20 ピクセル)に間隔を指定してみました。
■2006年1月1日■ただし この指定は、画像の左右に余白を設けるものなので、ご覧のとおり画像右側に文字を回り込ませた場合でも左側にも20ピクセルの余白が生まれます。回り込ませた文字の逆側にも間隔が空いてしまうのが好ましくない場合は、hspace属性ではなく、スタイル指定で余白（マージン）を設けるのがよいでしょう。
画像を表示させる際に、左右に余った余白に文章を回り込ませることができます。
という記述になります。画像表示位置は、『left』（文章を右に回り込ませる）または『right』（文章を右に回り込ませる）から指定できます。
このソースを表示させると、次のようになります。
■20XX年4月12日■ブログ内に表示させる画像のレイアウト位置は、通常それ以前のテキストなどの位置指定にしたがって表示されますが、個別に位置を指定することができます。
という記述になります。画像の表示位置は、『left』（左詰めで表示）、『right』（右詰めで表示）、『center』（表示領域の中央に表示）から指定できます。
これを実際に表示させると次のようになります。
ファイルマネージャーや ftp を使って画像をアップロードすれば、ブログ内に画像を表示させることができます。
という形式になります。
ここに、あらかじめ『 ./sample/flower_pink.jpg 』というjpgファイルがアップロードしてあります。これをブログ内に表示させるソースは、こんな感じです。
これを実際に表示させると次のようになります。
ホームページやブログなどのウェブサイトに アンカータグ( Aタグ)を使って他のページへジャンプするためのリンクを設定する際に、テキストだけでなく 画像にリンクを貼ることもできます。あらかじめ、画像をアップロードしておいてください。
| _top | 今のフレームのトップページ（フレームが属するウィンドウ） |
| _blank | 新しいウィンドウを開いて表示 |
| _self | 今のフレームまたはウィンドウ |
| _parent | 今のフレームを取り囲む一つ上の親フレーム |
| 任意名称 | フレームを使用していなければ新しいウィンドウが開く。 フレームを使用していてフレームの名前と一致している 場合、そのウィンドウ。 |
サンプルです。
コンピュータとインターネット > データ形式 > HTML > リファレンス