サルでもわかる？かんたんHTML トップページ
>>> ＃４．画像
>>> 画像の大きさを変えよう
「今回は画像の大きさを変えるタグをやるぞぃ。」
画像の大きさを変えるタグ
-----------------------------------------------------------------
width="■" height="●" ： 画像の縦の長さを■、横幅を●にする。
（■、●にはピクセル数を入れる）
-----------------------------------------------------------------
「これは 画像を表示しよう でやった
<IMG src="■" alt="●"> の中に入れて使うぞぃ。」
「あれ？サイズを変えるんだから、 size="■" を使うのかと思った。」
「あれは文字の場合じゃのぅ。
文字の大きさは1〜7の7段階であらわされるが、
画像は ピクセル という単位で大きさをあらわすんじゃ。」
「ぴくせる？」
「聞いたことないかのぅ？
たとえばこのパソコンの画面は小さな小さな点の集まりでできておるんじゃ。
この小さな点のことをピクセルというんじゃよ。
このピクセルが縦に何個、横に何個並んでいるかで
画像の大きさをあらわすんじゃ。」
「なるほど。でも1ピクセルがどのくらいの大きさかわからないから
想像つきにくいなぁ・・・。」
「ふむ。たとえば上のサンプル画像じゃが、
左から 8×8、16×16、48×48 の大きさじゃ。」
「えっ！？48でもこんなに小さいんですか！？」
「意外じゃったかのぅ？
センチという単位に慣れてしまっておるとちょっと想像つきにくいかもしれんな。
使っているうちにわかってくるから心配無用じゃ。
では実際に使ってみようかのぅ。」
「今回の大きさ指定なしに画像は 16×16 の大きさじゃ。
ではブラウザで見てみるぞぃ。」
「一番最後の画像、横幅指定してませんよ？」
「うむ。どちらかだけ指定した場合は、
縦横の比が元の画像と同じになるように調節してくれるんじゃ。」
「元の画像より大きくすると、荒くなってしまいますね。」
「そうじゃな。
それと大きさを変えるときは元の画像の縦横の比を考えねばならんぞ。
でないと上の画像のようにつぶれてしまうこともあるからのぅ。」
「う〜ん、でも自分で作った画像じゃないから
元のサイズがわかんないですよ。」
「ふむ。では画像のサイズを確認する方法じゃ。
画像の上で右クリックしてみなさい。」
「プロパティ というのがあるじゃろぅ？クリックするとこんな画面が出るな？」
「赤枠の部分がこの画像のサイズになるぞぃ。
今回はこれでおしまいじゃ。」
↑ページのTOPへ
サルでもわかる？かんたんHTML トップページ >>> ＃４．画像 >>> 画像の大きさを変えよう
「今回は画像の大きさを変えるタグをやるぞぃ。」| サンプル |
|
「画像の大きさを変えるにはこんなタグを使うぞぃ。」
画像の大きさを変えるタグ
-----------------------------------------------------------------
width="■" height="●" ： 画像の縦の長さを■、横幅を●にする。
（■、●にはピクセル数を入れる）
-----------------------------------------------------------------
「これは 画像を表示しよう でやった<IMG src="■" alt="●"> の中に入れて使うぞぃ。」
「あれ？サイズを変えるんだから、 size="■" を使うのかと思った。」
「あれは文字の場合じゃのぅ。文字の大きさは1〜7の7段階であらわされるが、
画像は ピクセル という単位で大きさをあらわすんじゃ。」
「ぴくせる？」
「聞いたことないかのぅ？たとえばこのパソコンの画面は小さな小さな点の集まりでできておるんじゃ。
この小さな点のことをピクセルというんじゃよ。
このピクセルが縦に何個、横に何個並んでいるかで
画像の大きさをあらわすんじゃ。」
「なるほど。でも1ピクセルがどのくらいの大きさかわからないから想像つきにくいなぁ・・・。」
「ふむ。たとえば上のサンプル画像じゃが、左から 8×8、16×16、48×48 の大きさじゃ。」
「えっ！？48でもこんなに小さいんですか！？」
「意外じゃったかのぅ？センチという単位に慣れてしまっておるとちょっと想像つきにくいかもしれんな。
使っているうちにわかってくるから心配無用じゃ。
では実際に使ってみようかのぅ。」
| メモ帳 |
|
<BODY>〜</BODY> の間に入力
<IMG src="画像のURL" alt="大きさ指定なしのりんご"> <IMG src="画像のURL" alt="ちっさいりんご" width="8" height="8"> <IMG src="画像のURL" alt="普通のりんご" width="16" height="16"> <IMG src="画像のURL" alt="おっきいりんご" width="48" height="48"> <IMG src="画像のURL" alt="横長のりんご" width="48" height="16"> <IMG src="画像のURL" alt="毒リンゴ" height="160"> |
「今回の大きさ指定なしに画像は 16×16 の大きさじゃ。ではブラウザで見てみるぞぃ。」
| ブラウザ |
|
← 指定なしじゃ。 ← 8×8じゃ。 ← 指定なしと同じ大きさじゃな。 ← 48×48じゃ。 ← 横48、縦16にしてみたぞぃ。 ← 横指定なし、縦160にしたぞぃ。 |
「一番最後の画像、横幅指定してませんよ？」
「うむ。どちらかだけ指定した場合は、縦横の比が元の画像と同じになるように調節してくれるんじゃ。」
「元の画像より大きくすると、荒くなってしまいますね。」
「そうじゃな。それと大きさを変えるときは元の画像の縦横の比を考えねばならんぞ。
でないと上の画像のようにつぶれてしまうこともあるからのぅ。」
「う〜ん、でも自分で作った画像じゃないから元のサイズがわかんないですよ。」
「ふむ。では画像のサイズを確認する方法じゃ。画像の上で右クリックしてみなさい。」
「プロパティ というのがあるじゃろぅ？クリックするとこんな画面が出るな？」
「赤枠の部分がこの画像のサイズになるぞぃ。今回はこれでおしまいじゃ。」
↑ページのTOPへ
|
画像を表示しよう <<< 前のページへ戻る |
画像と文字の位置 次のページへ進む >>> |
サルでもわかる？かんたんHTML トップページ >>> ＃４．画像 >>> 画像の大きさを変えよう
