float 画像に文章を回り込ませる
画像とテキストを並べる
「画像の横に文章を配置する」とても簡単そうなことですが、floatを知らなければ、表でもないのにtableを使って、画像と文章を配置しなくてはいけなくなります。また、CSSレイアウトにはよく使われるので、必ず使い方を覚えておこう。
<img src="img/gazou.gif" />
<p>テキスト</p>
<p>テキスト</p>
画像を左に回り込ませる
<img src="img/gazou.gif" style="float:left" />
<p>テキスト</p>
<p>テキスト</p>
画像を右へ回り込ませる
<img src="img/gazou.gif"
style="float:right" />
<p>テキスト</p>
<p>テキスト</p>
回り込みの解除
回り込みの解除にはclearを使います。
none
left
right
both
left
right
both
何もしない
左側の回りこみを解除する
右側の回り込みを解除する
両側の回り込みを解除する
左側の回りこみを解除する
右側の回り込みを解除する
両側の回り込みを解除する
<img src="img/gazou.gif"
style="float:right" />
<p>テキスト</p>
<p style="clear:both">テキスト</p>
<p>テキスト</p>
<p style="clear:both">テキスト</p>
このページをブックマークする→
Yahoo!ブックマークに登録
ホムつくメールマガジン 〜プロが明かす〜 これが人気ホームページの裏側だ!
(「まぐまぐ」にて殿堂入りしました)
ホームページ作成を一人で頑張るのもいいですが、仲間と一緒に頑張りませんか?
人気ホームページの作り方やホームページ運営者の生の声などの情報を発信していますので、ぜひあなたも購読してみてください。
ホムつく講座の講師は
こんなヤツ!
こんなヤツ!
ホームページを作っていたら、この楽しさを、あなたに伝えてくなりました。ホムつく式のホームページの作り方を体験してみてください。
→プロフィール
→お問い合わせ
ホームページ作成に
必要なものは?
必要なものは?
ホムつく講座がおすすめするソフトやレンタルサーバーを紹介しています。初心者の方や、悩んでいる方は是非参考にしてみてください。
ホームページを初めて作るのですが・・
ホームページはXHTMLとCSSで作ります。ほむつく講座では初心者の方にわかりやすいと評判の初心者講座があります。
もっとデザインを
良くしたい
良くしたい
ホムつく講座では見た目だけが良いデザインではなく、ユーザー(利用者)の方が安心して、ホームページを閲覧できるデザインを学べます。
ホームページにアクセスが集まりません
ホームページは作れば沢山のアクセスが集まるわけではありません。そして、アクセスが多いだけのホームページでも意味がありません。あなたのファンができる人気ホームページを作り方を学びましょう。