今
日 の お 勉 強 ・ 画像の横に複数行のテキスト配置
|
|
★
ホームページを作ってみよう
��
★
その他の画像関係のタグを説明しているページも、見てね♪ ★ ＨＴＭＬを覚えたい
・ 画 像 編 ★
|
主なテーマ （ Ｉ Ｍ Ｇ ） |
タ グ の 記 述 （ 要 素 属 性 ＝ ” 属 性 値 ” ） |
|
画 像 の 右 側 に テキスト |
＜ ＩＭＧ ＳＲＣ ＝ ”画像ファイルのＵＲＬ” ＡＬＩＧＮ ＝ ”ＬＥＦＴ”＞ |
|
画 像 の 左 側 に テキスト |
＜ ＩＭＧ ＳＲＣ ＝ ”画像ファイルのＵＲＬ” ＡＬＩＧＮ ＝ ”ＲＩＧＨＴ”＞ |
|
※ 参考書では
テキストを横に配置させる事を 「 回り込み 」と書いてました
複数行のテキストを配置する方法です |
★ 要 素 ・・・ 画 像 （ Ｉ Ｍ Ｇ ） ★ 属 性 ・・・ 画像の横にテキストを入力 （ Ａ Ｌ Ｉ Ｎ Ｇ ） ★ 属 性 値 ・・・ 右にテキストを配置する場合 （ Ｌ Ｅ Ｆ Ｔ ・・・ 画像が左 ） 左にテキストを配置する場合 （ Ｒ Ｉ Ｇ Ｈ Ｔ ・・・ 画像が右 ） |
|
≪ テキストの回り込み ≫ |
☆ 属性値のタグ（ ＬＥＦＴ または ＲＩＧＨＴ ）を指定する場合
画像をどちら側に配置したいかを考えて指定すると分かりやすいよ♪ ※ ここのテキストの回り込みは、≪ＲＩＧＨＴ≫に指定してます |
|
★ 回り込みの記述 ＨＴＭＬソース
|
下記のように記述すると、画像とテキストの間に余白が入った状態で 表示されます 初めから、画像の周りに余白を入れるように指定しましょう！ ※ 余白を入れないと、画像とテキストがピッタリとくっついた感じになります
余白の属性は、ＶＳＰＡＣＥ（上下の余白）、ＨＳＰＡＣＥ（左右の余白）で 属性値は、ピクセル数で指定します
※ ここのテキストの回り込みは、≪ＬＥＦＴ≫に指定してます
<img src="http://www.geocities.jp/cocoa_py/gazou/usagi-2-s.gif" width="100" height="96" border="0" align="left" vspace="10" hspace="20">
|
|
|
|
