画像の回り込みについてのご質問です。
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
こんにちは、WEB検索中に質問掲示板を見つけたので投稿させていただきました。
XHTML1.0でウェブサイトを作成中なんですが画像の横に文字を表示したい場合（プロフィール写真の横に紹介文を書くときなど）
HTMLの方に直接回り込みをかけるタグを書くのか
CSSの方でフロートなどを使って画像の回り込みを指定するのか
どちらがよろしいんでしょうか？
管理人様もしくは、詳しい方いらっしゃいましたらご返答よろしくお願いします。
XHTML1.0でウェブサイトを作成中なんですが画像の横に文字を表示したい場合（プロフィール写真の横に紹介文を書くときなど）
HTMLの方に直接回り込みをかけるタグを書くのか
CSSの方でフロートなどを使って画像の回り込みを指定するのか
どちらがよろしいんでしょうか？
管理人様もしくは、詳しい方いらっしゃいましたらご返答よろしくお願いします。
kei さん
10月08日 14時00分
keiさん、こんばんは。
見た目を調整する指定は、HTMLでもある程度はできますが（この場合<img align="left"～等）、基本的にはCSSで記述する決まりになっています。
外部ファイルのCSS内で、float指定を定義する方法が一般的ですね。
最も簡単な例は、下記のように直接画像にfloat指定する方法です。
■HTML
■CSS
プロフィール画像にidやclassを割り当て、それに対してfloatさせてもいいです。
また、画像自体に回り込みをさせずに、画像をさらにdivでくくり、そのdivに対してfloatさせる方法もあります。こちらの方が、タグが増える分より柔軟に指定可能です。
見た目を調整する指定は、HTMLでもある程度はできますが（この場合<img align="left"～等）、基本的にはCSSで記述する決まりになっています。
外部ファイルのCSS内で、float指定を定義する方法が一般的ですね。
最も簡単な例は、下記のように直接画像にfloat指定する方法です。
■HTML
<div id="profile">
<img src="profile_image.png">
<p>紹介文紹介文紹介文紹介文紹介文紹介文紹介文紹介文紹介文</p>
</div>
<img src="profile_image.png">
<p>紹介文紹介文紹介文紹介文紹介文紹介文紹介文紹介文紹介文</p>
</div>
■CSS
#profile img {
float: left;
}
float: left;
}
プロフィール画像にidやclassを割り当て、それに対してfloatさせてもいいです。
また、画像自体に回り込みをさせずに、画像をさらにdivでくくり、そのdivに対してfloatさせる方法もあります。こちらの方が、タグが増える分より柔軟に指定可能です。
馬場誠 さん
10月08日 21時48分
ご返答ありがとうございます。
HTML、CSSどちらで指定すればいいのか分からなかったものでとても参考になりました。
また分からないことがありましたらご質問させていただきますのでよろしくお願いします。
HTML、CSSどちらで指定すればいいのか分からなかったものでとても参考になりました。
また分からないことがありましたらご質問させていただきますのでよろしくお願いします。
kei さん
10月09日 16時20分
参考になったようで良かったです。
しばらくの間は、本コーナーはテスト版として自由にご投稿いただけるようにしておきますので、またお気軽にご質問くださいね☆
しばらくの間は、本コーナーはテスト版として自由にご投稿いただけるようにしておきますので、またお気軽にご質問くださいね☆
馬場誠 さん
10月10日 09時46分
