素人珈琲

< 新しい記事

新着記事一覧(全70件)

過去の記事 >

January 2, 2006

HTML教えます　その16

(1)

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

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

前回に引き続き「 画像やテキストの上下関係の配置指定方法 」

この前の講義で、表の中に文字を上下左右自由に配置する技術はマスターできましたね？

<align> と <valign> というタグの使い方です

ただし、表の中以外での文字の上下方向の指定には<valign>のタグは用いないんです

左右の指定と同じように <align="○○"> タグを用います

例えば、画像の横に文字を入れたいとき、何も指定しなければ文字は画像の横の下側に自動的に来ます

まぁ言葉で説明しても分かりにくいので実際にやってみます

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

これが標準的で、何も指定しないときにおこる配置です

では、この文字を中央に持ってきます

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

今度は、文字を上側に

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

" top "、" middle "、" bottom "の説明につきましては前回しましたね

でも、このHTML変だとはおもいませんか？

実際に、上下の配置が変わっているのは文字なのに<align>というタグが <img src … align="○○"> と、画像の位置を指定しています

回り込み 」という事なのです

「 HTML教えます　その2 」で"left"、"center"、"right"の指定方法は一度やっています

まぁ「回り込み」ということが分かったので、今日はこれまで

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

Last updated January 2, 2006 06:03:21 AM
コメント(1) | コメントを書く

[ホームページ作成教室] カテゴリの最新記事

■コメント

Re:HTML教えます　その16(01/02)

＊さくら2007＊さん

はじめまして。とても分かりやすく大変助かっております。align="middle"を使って、画像の中央あたりに数行の文章を載せたいのですが回り込みを防ぐためにどんなHTMLを使ったらいいのでしょうか。全部のページに目を通したのですがなかなか見つかりませんでした。
今回、その８やその３のhspace="10"などとても参考になりました！ (May 12, 2007 09:41:41 AM)

返事を書く