素人珈琲

< 新しい記事

新着記事一覧(全70件)

過去の記事 >

January 3, 2006

HTML教えます　その17

テーマ：ホームページ作成の悩み(550)

カテゴリ：ホームページ作成教室

今回も「 画像やテキストの上下関係の配置指定方法 」

前々回、前回の講義で <align> 、 <valign> の使いかたの基本はマスターできたでしょうか？

今日は、文字（テキスト）ではなく画像の位置を指定していきます

ただし、上下関係の前に左右関係の画像の配置について復習します！

HTML	<img src="左寄せしたい画像（カメ）" align="left" >
表示

これ「回り込み」のところで少しやりました基本ですよね

ちなみに「右寄せ」は

HTML	<img src="右寄せしたい画像（カメ）" align="right" >
表示

、<align="center"> とやる方法では出来ません

なぜなら、 <img src="画像" … align="○○"> というタグは、回り込みの文字の方向を指定するものなので、実際的には、その画像の位置を指定しているわけではないからなのです

だから例えば次のような例にすると、変になります

HTML	<img src="左寄せしたい画像（カメ）" align="left" > <br> <img src="右寄せしたい画像（カメ）" align="right" >
表示

<br> というタグは「その1」で少し出てきたんですが「改行」させる命令を行います

その<br>タグの意味を考えると、変なのがわかりますか？

画像と画像の間を改行しているんだから、

という配置になるのが普通ですよね？

これが「回り込み」をあらわしている証拠です

わざわざ証拠とか言わんでも、それを直す方法を教えろっ！ですよね？

HTML	<img src="左寄せしたい画像（カメ）" align="left"> <br clear="left"> <img src="右寄せしたい画像（カメ）" align="right">
表示

この <br clear="○○"> （"○○"には"left"か"right"が入ります）のタグの意味は、そこで「回り込み」を終了させるという意味です

だから例えば

HTML	<img src="左寄せしたい画像（カメ）" align="left">カメ？ <br clear="left"> 亀？ <img src="右寄せしたい画像（カメ）" align="right">噛め？
表示	カメ？亀？噛め？

というように、文字（テキスト）をいれる場所によって、画面上に現れる場所は異なります！

「 回り込み解除 」の話に没頭しすぎて、「 中央寄せ 」の話を忘れるところでした

<img src="画像" … align="○○"> というタグが「 中央寄せ 」の時には使えないということが分かったところで…

まぁ今までで何度か説明しているんで例だけ紹介！

本日は以上！