初級第3章 : 画像の表示&配置
![]() |
さて、今度は画像の表示の仕方を学んでいきます。 画像の表示には<IMG〜>タグを使います。 これは「IMG=イメージ」の略と覚えて下さい。 分かり易いでしょ?(笑) |
![]() |
| 例1:<IMG src="aikon1.gif"> | ||
|---|---|---|
![]() |
赤字の部分を見て下さい。 「IMG」の後には必ず「src」が付きます。 「aikon1」の部分は画像の名前ですので、ご自分で付けた画像の名前に変更して下さい。 ウェブ上で公開出来る画像タイプは一般的に「“gif” “jpg” “bmp”」です。 がしかし、bmp(ビットマップ)形式を使うと画像サイズが大きくなりますので、当然HPの表示も遅くなります。 気をつけましょう。 「gif=ジフ」「jpg=ジェイペグ」「bmp=ビットマップ」です。 |
![]() |
![]() |
||
![]() |
↑が「aikon1」の画像表示結果です。 画像が真ん中に表示されているのは、第2章で学んだように「P」タグでエリアを真ん中に指定しているからです。 表示させる場所指定については、文字も画像も同じです。 |
![]() |
| 例2:<IMG src="aikon1.gif" border="3"> | ||
![]() |
また赤字の部分が増えています。 「border=ボーダー」と覚えて下さい。 ボーダー、つまりラインです。 画像の周りに囲みを付けたい時にこの指定を使います。 この例では「border="3"」と指定していますので、3分のラインが付きます。 「3」の数字を大きくすればラインが太くなり、小さくすればラインが細くなります。 いろいろ試してみましょう。 ちなみに画像のライン(枠)を消したい場合には「border="0"」とします。 |
![]() |
![]() |
||
![]() |
↑のサンプルには画像の周りに囲みがついていますね? これがボーダー指定です。 |
![]() |

| 〜画像まめ知識〜 | ||
|---|---|---|
![]() |
上記では「画像は主に3タイプ」と記しましたが、それぞれがそれなりの役割を果たしています。 | ![]() |
| 「gif(ジフ)」=主にイラストやカット素材、背景素材などに用います。 | ||
| 「jpg(ジェイペグ)」=主に写真などの高画質な物に用います。 | ||
| 「bmp(ビットマップ)」=上記2つを併用出来ますが、画像サイズが大きくなりますので一般的にはあまり使われません。 | ||

| 画像の表示については、以上が基本です。 この章は覚える項目が少ないので、簡単ですね♪ 分からない場所があれば、掲示板でもメールでも遠慮なく質問して下さい。 それでは中級コースに進みましょう! |