サルでもわかる？かんたんHTML トップページ
>>> ＃４．画像
>>> 画像と文字の位置
「今回は画像と文字の位置関係を指定するタグを勉強するぞぃ。」
こんかいやるのはこんなタグじゃ。」
画像と文字の位置を指定するタグ
-----------------------------------------------------------------
align="■" ： 画像と文字を■にそろえる。
（■にはtop（上）、middle（中央）、bottom（下）を入れる）
-----------------------------------------------------------------
「あっ！このタグ 右揃え・中央揃え・左揃え でやりましたよね！」
「うむ。よく覚えておったな。
これを <IMG src="■" alt="●"> の中にいれるんじゃ。」
「■に入るのが違いますね。」
「そうじゃな。今回は左右ではなく、上下の位置を指定するんじゃ。
大きめの画像の方がわかりやすいからのぅ
前回やった width="■" height="●" を使って
画像を大きくして説明するぞぃ。」
「こんな風に入力するぞぃ。
ではブラウザで見てみようかのぅ。」
「なにも指定しておらんときは align="bottom" と同じで
下端をそろえて表示されるぞぃ。」
「ふむふむ。
先生！画像の横に複数の行を入れたいんですけど
<BR> を使って改行するんですか？」
「ううむ。残念ながら、この状態で改行すると、
画像の下の行に移ってしまうぞぃ。
画像の横に複数行表示する方法は、また次回説明するぞぃ。」
↑ページのTOPへ
サルでもわかる？かんたんHTML トップページ >>> ＃４．画像 >>> 画像と文字の位置
「今回は画像と文字の位置関係を指定するタグを勉強するぞぃ。」| サンプル |
 しらゆきひめ しらゆきひめ しらゆきひめ |
「3つとも、画像と文字の位置が違っておるな？こんかいやるのはこんなタグじゃ。」
画像と文字の位置を指定するタグ
-----------------------------------------------------------------
align="■" ： 画像と文字を■にそろえる。
（■にはtop（上）、middle（中央）、bottom（下）を入れる）
-----------------------------------------------------------------
「あっ！このタグ 右揃え・中央揃え・左揃え でやりましたよね！」
「うむ。よく覚えておったな。これを <IMG src="■" alt="●"> の中にいれるんじゃ。」
「■に入るのが違いますね。」
「そうじゃな。今回は左右ではなく、上下の位置を指定するんじゃ。大きめの画像の方がわかりやすいからのぅ
前回やった width="■" height="●" を使って
画像を大きくして説明するぞぃ。」
| メモ帳 |
|
<BODY>〜</BODY> の間に入力
<IMG src="画像のURL" alt="毒リンゴ" width="80" height="80" align="top"> 白雪姫は物売りに変装したお妃様からリンゴを買いました。 一口食べると白雪姫は筋肉モリモリになって <IMG src="画像のURL" alt="毒リンゴ" width="80" height="80" align="middle"> <IMG src="画像のURL" alt="毒リンゴ" width="80" height="80" align="bottom"> お妃様をやっつけてしまいました。 |
「こんな風に入力するぞぃ。ではブラウザで見てみようかのぅ。」
| ブラウザ |
|
白雪姫は物売りに変装したお妃様からリンゴを買いました。 ↑ 画像と文字の上端がそろっておるな。 一口食べると白雪姫は筋肉モリモリになって ↑ 画像と文字の順を入れ替えてもOKじゃ。中央がそろっておるな。
お妃様をやっつけてしまいました。↑ 画像と文字の下端がそろっておるな。 |
「なにも指定しておらんときは align="bottom" と同じで下端をそろえて表示されるぞぃ。」
「ふむふむ。先生！画像の横に複数の行を入れたいんですけど
<BR> を使って改行するんですか？」
「ううむ。残念ながら、この状態で改行すると、画像の下の行に移ってしまうぞぃ。
画像の横に複数行表示する方法は、また次回説明するぞぃ。」
↑ページのTOPへ
|
画像の大きさを変えよう <<< 前のページへ戻る |
画像の横に複数行表示させよう 次のページへ進む >>> |
サルでもわかる？かんたんHTML トップページ >>> ＃４．画像 >>> 画像と文字の位置
