素人珈琲

素人珈琲

December 21, 2005
XML
さぁ第2回を迎えました「 HTML教えます 」のお時間です

今回は「 画像とテキスト(文字)の位置調整 」です

HTML <img src="http://image.jpeg" width="60" height="60">この狸は、自宅の庭に飾ってある置物の狸です。最近、この狸が我が一家でブームなのです。それは、ただの狸にしか見えないこの置物が何と・・・
表示 この狸は、自宅の庭に飾ってある置物の狸です。最近、この狸が我が一家でブームなのです。それは、ただの狸にしか見えないこの置物が何と・・・


上記のようなHTMLを入力しますと、画像とテキストの位置がぐちゃぐちゃになっちゃいます

そこで、この画像を左側か右側に寄せてしまい、テキストを画像の左右に回り込ませます

その方法が <arign="○○"> というタグです
○○には right left という文字がが入ります

実際に、このタグを使ってみましょう!

HTML <img src="http://image.jpeg" width="60" height="60" align="left" >この狸は、自宅の庭に飾ってある置物の狸です。最近、この狸が我が一家でブームなのです。それは、ただの狸にしか見えないこの置物が何と・・・
表示 この狸は、自宅の庭に飾ってある置物の狸です。最近、この狸が我が一家でブームなのです。それは、ただの狸にしか見えないこの置物が何と・・・


HTML <img src="http://image.jpeg" width="60" height="60" align="right" >この狸は、自宅の庭に飾ってある置物の狸です。最近、この狸が我が一家でブームなのです。それは、ただの狸にしか見えないこの置物が何と・・・
表示 この狸は、自宅の庭に飾ってある置物の狸です。最近、この狸が我が一家でブームなのです。それは、ただの狸にしか見えないこの置物が何と・・・


どうです?すっきりしたでしょう!
これでアフィリエイトの画像とテキストのバランスを自在に扱えますね!

まだ画像とテキストの位置についてのテクニックはたくさんあるんですが今日はこのぐらいにしときます

また次回をお楽しみに!





お気に入りの記事を「いいね!」で応援しよう

Last updated  December 21, 2005 09:46:48 PM
コメント(1) | コメントを書く
[ホームページ作成教室] カテゴリの最新記事


■コメント

お名前
タイトル
メッセージ
画像認証
上の画像で表示されている数字を入力して下さい。


利用規約 に同意してコメントを
※コメントに関するよくある質問は、 こちら をご確認ください。


Re:HTML教えます その2(12/21)  
訪問&カキコぁりがとぉござぃました((´∀`*))
HTML、ぁたしもはじめたばっかりなので参考にさせていただきますね♪
画像とテキストの位置にゎ苦労させられてますょぉ。。。(泣)
いちぃちtable組んでゃってて面倒で↓↓
(December 22, 2005 01:46:55 AM)

【毎日開催】
15記事にいいね!で1ポイント
10秒滞在
いいね! -- / --
おめでとうございます!
ミッションを達成しました。
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x
X

PR

Profile

HANMANI

HANMANI


© Rakuten Group, Inc.
Create a Mobile Website
スマートフォン版を閲覧 | PC版を閲覧
Share by: