CSS-スタイルシート-の回り込みの指定方法について紹介しています。

初心者でもできるホームページ制作&SEO
初心者でもできるホームページ制作&SEOホームページ制作CSS講座配置の指定>回り込みを指定する
配置の指定
CSS講座
ホームページ制作



回り込みを指定する



タグに直接記述する場合


以下のように記述ることにより、その記述された<p>で囲まれた箇所のボックスを、その下にあるテキストなどの左側に回り込ませることができます。


<p style="fioat:left;">


上の赤文字の部分の【float】が回り込みを意味するタグで、この場合【left】なので、左側への回り込みを指定する記述になります。


解りにくいので、回り込みを指定する前のものから紹介していきます。





これらの文字が右に回りこみます。


では、この上の紫色の画像に、先ほどの左に回りこむ指定をしてみます。





これらの文字が右に回りこみます。


また、この逆の右に回り込ませることもできます。その場合の記述は以下のようになります。


<p style="fioat:right;">





このように右に回りこみます。


<head>内に記述する場合、外部のCSSファイルに記述する場合もこの赤文字の部分は同じになります。


ページの<head>内に記述する場合


以下のように<head>内に記述することにより、その記述されたページの<p>で囲まれた箇所全てのボックスを、その下にあるテキストなどの左側に回り込ませることができます。
解りやすいよう、<head>から記述します。この場合の表示は前のものと同じなので省きます。


<head>
<style type="text/css">
<!--p{float:left;}-->
</style>
</head>


外部のCSSファイルに記述する場合


以下のように外部CSSファイルに記述することにより、そのファイルの読み込まれたページの<p>で囲まれた箇所全てのボックスを、その下にあるテキストなどの左側に回り込ませることができます。この場合の表示も前のものと同じなので省きます。




サイトマップ 更新履歴 問い合わせ サイト&管理人紹介 相互リンクについて リンク集
Copyright(C)2008-2010 Homepage making & SEO that even beginner can do All Rights Reserved