素人珈琲

素人珈琲

January 4, 2006
XML
今回も「 画像やテキストの上下関係の配置指定方法

でも、たぶん今回でこのテーマはラストです!

さぁ張り切っていきます!

まずは例から

HTML
<img src="カメの画像" border="0" align="middle" >カメ1  <img src="カメの画像" border="0" align="middle" >カメ2  <img src="カメの画像" border="0" align="middle" >カメ3

表示 カメ1カメ1  カメ2カメ2  カメ3カメ3

3つの画像を全て同じ上下関係にするには、 <align> タグを統一すれば出来ます

この場合、 <align="middle"> なので、文字が中央に来ます



HTML
<img src="カメの画像" border="0" align="top" >カメ1  <img src="カメの画像" border="0" align="top" >カメ2  <img src="カメの画像" border="0" align="top" >カメ3

表示 カメ1カメ1  カメ2カメ2  カメ3カメ3

ちなみに、 <align="bottom"> の例はもうしなくても大丈夫ですよね?


それでは、3つの画像の位置関係をバラバラにしてみたいと思います
まずは例から

HTML
<img src="カメの画像" border="0" align="middle" >カメ1  <img src="カメの画像" border="0" align="bottom" >カメ2  <img src="カメの画像" border="0" align="middle" >カメ3

表示 カメ1カメ1  カメ2カメ2  カメ3カメ3

この配置パターンは、カメ1とカメ3が標準の位置で、それに比べてカメ2が上に出てくる位置関係です

また別の例です

HTML
<img src="カメの画像" border="0" align="bottom" >カメ1  <img src="カメの画像" border="0" align="bottom" >カメ2  <img src="カメの画像" border="0" align="middle" >カメ3

表示 カメ1カメ1  カメ2カメ2  カメ3カメ3

この配置パターンは、カメ1とカメ2が上に出て、標準の位置にカメ3が位置しているんですが、カメ3だけが下に下がっているように見えます


こんな風に画像の上下関係を、ある程度まで自由に扱うことが可能です


本日はこれまで!





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

Last updated  January 4, 2006 09:50:56 AMコメント(0) | コメントを書く
[ホームページ作成教室] カテゴリの最新記事


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

PR

Profile

HANMANI

HANMANI


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