January 4, 2006
テーマ： ホームページ作成の悩み(550)
カテゴリ： ホームページ作成教室
今回も「 画像やテキストの上下関係の配置指定方法
」
でも、たぶん今回でこのテーマはラストです！
さぁ張り切っていきます！
まずは例から
３つの画像を全て同じ上下関係にするには、 <align> タグを統一すれば出来ます
この場合、 <align="middle"> なので、文字が中央に来ます
ちなみに、 <align="bottom"> の例はもうしなくても大丈夫ですよね？
それでは、３つの画像の位置関係をバラバラにしてみたいと思います
まずは例から
この配置パターンは、カメ１とカメ３が標準の位置で、それに比べてカメ２が上に出てくる位置関係です
また別の例です
この配置パターンは、カメ１とカメ２が上に出て、標準の位置にカメ３が位置しているんですが、カメ３だけが下に下がっているように見えます
こんな風に画像の上下関係を、ある程度まで自由に扱うことが可能です
本日はこれまで！
でも、たぶん今回でこのテーマはラストです！
さぁ張り切っていきます！
まずは例から
| HTML | <img src="カメの画像" border="0" align="middle" >カメ１ <img src="カメの画像" border="0" align="middle" >カメ２ <img src="カメの画像" border="0" align="middle" >カメ３ |
|---|---|
| 表示 |  カメ１ カメ２ カメ３ |
３つの画像を全て同じ上下関係にするには、 <align> タグを統一すれば出来ます
この場合、 <align="middle"> なので、文字が中央に来ます
| HTML | <img src="カメの画像" border="0" align="top" >カメ１ <img src="カメの画像" border="0" align="top" >カメ２ <img src="カメの画像" border="0" align="top" >カメ３ |
|---|---|
| 表示 | カメ１ カメ２ カメ３ |
ちなみに、 <align="bottom"> の例はもうしなくても大丈夫ですよね？
それでは、３つの画像の位置関係をバラバラにしてみたいと思います
まずは例から
| HTML | <img src="カメの画像" border="0" align="middle" >カメ１ <img src="カメの画像" border="0" align="bottom" >カメ２ <img src="カメの画像" border="0" align="middle" >カメ３ |
|---|---|
| 表示 | カメ１ カメ２ カメ３ |
この配置パターンは、カメ１とカメ３が標準の位置で、それに比べてカメ２が上に出てくる位置関係です
また別の例です
| HTML | <img src="カメの画像" border="0" align="bottom" >カメ１ <img src="カメの画像" border="0" align="bottom" >カメ２ <img src="カメの画像" border="0" align="middle" >カメ３ |
|---|---|
| 表示 | カメ１ カメ２ カメ３ |
この配置パターンは、カメ１とカメ２が上に出て、標準の位置にカメ３が位置しているんですが、カメ３だけが下に下がっているように見えます
こんな風に画像の上下関係を、ある程度まで自由に扱うことが可能です
本日はこれまで！
お気に入りの記事を「いいね！」で応援しよう
[ホームページ作成教室] カテゴリの最新記事
-
HTML教えます その36 February 12, 2006 コメント(6)
-
HTML教えます その35 February 10, 2006
-
HTML教えます その34 February 7, 2006 コメント(1)
【毎日開催】
15記事にいいね！で1ポイント
PR
Freepage List
HANMANI
あくまでも趣味の範囲で、お家で美味しい珈琲を飲もうと頑張る人を応援するブログサイトです。
Category
© Rakuten Group, Inc.
