CSSで回り込みを設定する方法や回り込みを解除する方法

トップページ » スタイルシート入門講座 » CSSで回り込みを設定する方法や回り込みを解除する方法

■回り込みとは

回り込みとは、言い換えると対象を右に寄せたり、左に寄せたりすることです。 CSSファイルにfloatを記述することで、後続の要素を回り込ませることができます。 CSSファイルの記述例とWebページの表示を掲載していますので、どのように表示されるのかを確認してみてください。

■回り込みに関するCSSプロパティ

要素を左または右に寄せて配置する際は、floatプロパティを使用します。 floatとは、指定されたボックスの後続の要素を回り込ませるためのCSSプロパティです。初期値はnoneであり、後続の要素を回り込ませません。値にleftあるいはrightを指定すると、それぞれ後続の要素を右または左に回り込ませます。 clearプロパティを使用すると回り込みを解除できます。

CSSプロパティ	意味
float：float	回り込み（寄せる方向）を指定
clear：clear	回り込み（寄せる方向）の解除を指定

■回り込み（寄せる方向）を指定

floatプロパティは、指定された要素を左または右に寄せて配置する際に使用します。後に続く内容は、その反対側に回り込みます。 floatプロパティは、positionプロパティでstatic以外の値が指定されている要素には適用されません。

floatプロパティの指定値
none	特に配置を指定しません。これが初期値です。
left	指定した要素を左に寄せます。後に続く内容はその右側に回り込みます。
right	指定した要素を右に寄せます。後に続く内容はその左側に回り込みます。

CSSファイル記述例
div#test-float{ background-color:#ffccff; float:right; height:50px; } div#test-block{ background-color:#ffcc33; }
HTMLファイル記述例
<div id="test-float">回り込み（寄せる方向）を指定</div> <div class="test-block">test-block</div> <div class="test-block">test-block</div>
Webページの表示
回り込み（寄せる方向）を指定 test-block test-block

■回り込み（寄せる方向）の解除を指定

clearプロパティは、floatプロパティで左寄せ、または右寄せを指定された要素に対する回り込みを解除する際に使用します。

clearプロパティの指定値
none	回り込みを解除しません。これが初期値です。
left	左寄せされた要素に対する回り込みを解除します。
right	右寄せされた要素に対する回り込みを解除します。
both	左寄せ、または右寄せされた全ての要素に対する回り込みを解除します。

CSSファイル記述例
div#test-float{ background-color:#ffccff; float:right; height:50px; } div#test-block{ background-color:#ffcc33; } div#test-clear{ background-color:#ffcc33; clear:both; }
HTMLファイル記述例
<div id="test-float">回り込み（寄せる方向）を指定</div> <div class="test-block">test-block</div> <div id="test-clear">回り込み（寄せる方向）の解除を指定</div>
Webページの表示
回り込み（寄せる方向）を指定 test-block 回り込み（寄せる方向）の解除を指定

全部無料でつくるはじめてのホームページ & HTML

発売：2010/07/30

定価：1,869円

著者：浅岡省一

出版：翔泳社

内容：ホームページの雛形となるサンプルが丸ごと収録されているので、ソフトや素材と組み合わせれば、自分好みのホームページを無料で簡単に作ることも可能です。Windows7/Vista/XPに対応してます。
フェイスブック若き天才の野望

発売：2011/01/13

定価：1,890円

著者：デビッド・カークパトリック

出版：日経BP社

内容：ユーザー数が5億人を超え、会社の時価総額が2兆円を超え、グーグルを驚かす存在となった、フェイスブック。同社を率いるマスコミ嫌いのCEO、マーク・ザッカーバーグからの信頼を勝ち得たベテラン記者が、徹底取材からフェイスブックの真実を初めて明かします。
Twitter×アメブロでビジネスを加速する方法

発売：2010/12/09

定価：1,554円

著者：青山華子

出版：ソーテック社

内容：ブランディングと人脈を構築する86の法則。twitterやFacebookなど、ソーシャルメディアの時間短縮と有効活用方法を徹底解説。
起業のファイナンスベンチャーにとって一番大切なこと

発売：2010/09/30

定価：2,310円

著者：磯崎哲也

出版：日本実業出版社

内容：人気ブログ「isologue」の磯崎哲也が教える、成功する会社の作り方。

ムームードメイン

「ムームードメイン」は「ロリポップ！レンタルサーバー」を運営するpaperboy&co.の低価格ドメイン取得サービスです。2004年のサービス開始以来、初心者でも簡単にドメイン設定ができる機能と、580円/年～の手軽な価格帯で、個人を中心に多くの人が利用してます。「ロリポップ！レンタルサーバー」との契約を考えている人には、特におすすめの独自ドメイン取得サービスです。

カラーミーショップ

ネットショップ開業に必要な機能が全て揃っており、初めての開業をトータルで支援します。もちろんモバイルショップにも対応しており、さらにショップブログも付いてきます。利用開始から30日間はお試し期間なので、安心して利用できます。
ショップサーブ

高機能のショッピングカートが標準装備されたネットショップ向けレンタルサーバーを提供してます。顧客管理、在庫管理、受注管理、ポイントシステム、アフィリエイト対応などネットショップの開店、運営、集客の機能が全て揃っています。既に他社のサーバーを利用している人も、ショッピングカートの機能を利用することが可能です。本格的にネットショップを開業したい方におすすめです。
レンタルショッピングカートXcart

商品管理や在庫管理なども簡単操作で、ネットショップ運営をトータルサポートします。携帯ショップにも対応しており、パソコンと同じURLで携帯ショップも自動生成できます。決済は、クレジット、コンビニ、ネット銀行、電子マネーに対応してます。利用開始から30日間はお試し期間なので、安心して利用できます。
ワイズカート

会員管理、ポイント管理、プレゼントキャンペーン、メルマガなど、高機能なショッピングカートです。テンプレート選択でもネットショップが出来るから初心者でも簡単です。
レンタルカートe-shopsカート2

e-shopsカート２は初心者の方から繁盛店まで多数の導入実績を誇ります。初めてのネットショップでも簡単にショッピングサイトを作成できます。プラグイン対応のホームページ・ビルダーでショッピングカートの設置も簡単です。