CSS入門:floatプロパティで回り込みを設定する方法

    • このページをはてなブックマークに追加

    公開日:2016年08月16日 最終更新日:2021年10月20日

    html要素の配置を調整することができるプロパティに「floatプロパティ」があります。「floatプロパティ」は要素の後に続く内容を反対側に回り込ませることができます。本コラムでは、画像やテキストを左や右に寄せる方法や、回り込みを解除する方法を説明します。

    関連記事:CSSの書き方の基本
    関連記事:HTML&CSS 学習者におすすめの本 10選

    1. floatプロパティで回り込みを指定する

    html要素を左右に寄せてレイアウトを調整することができる「floatプロパティ」を使って各種要素のレイアウトを変更してみましょう。floatプロパティが適用された要素の後に続く内容を反対側に回り込ませることができます。

    1.1 「floatプロパティ」の基本書式

    floatプロパティの基本書式は以下の通りです。

    float: ;

    値には、「left」、「right」、「none」を指定します。

    left:指定したボックスを左側に配置し、後に続く要素を右側に回り込ませます。

    right:指定したボックスを右側に配置し、後に続く要素を左側に回り込ませます。

    none:ボックス領域の左右の回りこ込みはされません。

    ▲ページトップへ戻る

    1.2. 「floatプロパティ」で要素を横並びに配置する

    「floatプロパティ」を使って、div要素を横並びに配置してみましょう。「float1.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●float1.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="uft-8">
    <title>HTML入門-floatの使い方</title>
    <style>
    div {
    	border: 1px dashed #000;
    	width: 200px;
    	height: 50px;
    }
    </style>
    </head>
    <body>
    <h1>floatプロパティ</h1>
    	<div><p>段落1</p></div>
    	<div><p>段落2</p></div>
    </body>
    </html>
    

    HTMLの要素は通常上から順に縦方向に表示されます。サンプルコードの「div」要素は、通常上下に配置されます。

    ●ブラウザーの表示(float1.html)

    CSS入門:floatプロパティで回り込みを設定する方法
フリーランスエンジニア案件情報 | プロエンジニア

    div要素を横並びに配置するのに、「foatプロパティ」を追加します。

    ●float1.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="uft-8">
    <title>HTML入門-floatの使い方</title>
    <style>
    div {
    	border: 1px dashed #000;
    	width: 200px;
    	height: 50px;
    }
    .float_l {
    	float: left;
    }
    </style>
    </head>
    <body>
    <h1>floatプロパティ</h1>
    	<div class="float_l"><p>段落1</p></div>
    	<div class="float_l"><p>段落2</p></div>
    </body>
    </html>
    

    「float_lセレクタ」で、「floatプロパティ」に"left"を指定し、div要素の「class属性」に「float_l」を指定します。

    ●ブラウザーの表示(float1.html)

    CSS入門:floatプロパティで回り込みを設定する方法
フリーランスエンジニア案件情報 | プロエンジニア

    最初のdiv要素に二つ目のdiv要素が回り込み横並びに表示されました。

    ▲ページトップへ戻る

    1.3. 「float:left」で画像の右側にテキストを配置する

    「floatプロパティ」を使った例としてよく用いられるのが、画像の周囲にテキストを回り込ませるスタイルです。具体的な例で見てみましょう。

    「float2.html」をコピーしてPC上に保存して下さい。HTMLファイルの保存形式はmetaタグにあわせて"uft-8"で保存します。CSSは外部ファイルとして保存することが推奨されています。本コラムのサンプルコードでは分かりやすさを優先し、CSSはHTML文書内に埋め込みました。

    ●float2.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="uft-8">
    <title>HTML入門-floatの使い方</title>
    <style>
    div {
    	border: 2px solid black;
    	width: 250px;
    	height: 150px;
    }
    .float_l {
    	float: left;
    }
    </style>
    </head>
    <body>
    <h1>floatプロパティ</h1>
    <h2>○○○寿司</h2>
    	<div>
    		<img src="img/sushi1.gif" alt="CSS入門:floatプロパティで回り込みを設定する方法
    フリーランスエンジニア案件情報 | プロエンジニア" class="">
    		<p>HTMLの要素は、通常コードの順に上から下へと表示されます。</p>
    	</div>
    <h2>△△△寿司</h2>
    	<div>
    		<img src="img/sushi2.gif" alt="CSS入門:floatプロパティで回り込みを設定する方法
    フリーランスエンジニア案件情報 | プロエンジニア" class="float_l">
    		<p>画像は左側、テキストは右側に表示されます。</p>
    	</div>
    </body>
    </html>
    

    floatプロパティを指定をしていない画像「sushi1.gif」とその次の「段落(p)要素」は、画像の下に段落のテキストという順序で表示されます。
    画像の左右と下側にテキストを回りこませたい場合は、imgタグの「class属性」に「floatプロパティ」を記述します。「float_lセレクター」でプロパティの値として"left"を指定してありますので、img タグの「△△△寿司(sushi2.gif)」画像は左側に配置され、その後の要素は画像に回り込む形で右側に表示されます。

    例では、150px × 100px の画像サイズに合わせてボックスの大きさを調整していますので、うまくテキストが表示されない場合は、横幅と高さを画像のサイズに合わせて、少し大きめに設定してみて下さい。

    ●ブラウザーの表示

    CSS入門:floatプロパティで回り込みを設定する方法
フリーランスエンジニア案件情報 | プロエンジニアcss_float1

    ▲ページトップへ戻る

    1.4. 「float:left」で画像とテキストの間に余白を空ける

    次は画像の周囲に余白をあける「margin-bottomプロパティ」と「margin-leftプロパティ」を追加して、画像とテキスト周りに余白を作成します。また、右側に画像、左側にテキストを表示するコードも追加してみます。

    ●float1.html

    <style>
    ・・・略・・・
    .float_l {
    	margin-bottom: 10px;
    	margin-right: 10px;
    	float: left;
    }
    .float_r {
    	margin-bottom: 10px;
    	margin-left: 10px;
    	float: right;
    }
    </style>
    </head>
    <body>
    <h1>floatプロパティ</h1>
    <h2>○○○寿司</h2>
    	<div>
    		<img src="img/sushi1.gif" alt="CSS入門:floatプロパティで回り込みを設定する方法
    フリーランスエンジニア案件情報 | プロエンジニア" class="float_l">
    		<p>画像は左側、テキストは右側に表示されます。<br>
    		「float_l セレクター」では、右側と下に余白を作っています。</p>
    	</div>
    <h2>△△△寿司</h2>
    	<div>
    		<img src="img/sushi2.gif" alt="CSS入門:floatプロパティで回り込みを設定する方法
    フリーランスエンジニア案件情報 | プロエンジニア" class="float_r">
    		<p>画像は右側、テキストは左側に表示されます。<br>
    		「float_r セレクター」では、左側と下に余白を作っています。</p>
    	</div>
    </body>

    .float_r セレクター」を追加して、「floatプロパティ」の値に"right"を設定しました。

    今度は○○○寿司の画像「sushi1.gif」に「float_lセレクタ」、△△△寿司の画像「sushi2.gif」に「float_rセレクタ」を適用しテキストを画像の左右に回り込ませています。画像の高さを超えた文字は画像の下に回り込んで表示されます。

    ●ブラウザーの表示

    CSS入門:floatプロパティで回り込みを設定する方法
フリーランスエンジニア案件情報 | プロエンジニアcss_float2

    ▲ページトップへ戻る

    2. clearプロパティで回り込みを解除する

    先ほどの例では、画像を超えるテキストは下に回り込んで表示されましたが、途中で回り込みを解除したい場合は「clearプロパティ」を使います。左の回りこみの解除には

    clear: left;

    右側の回り込み解除には

    clear: right;

    を指定します。

    ●float2.html

    <style>
    ・・・略・・・
    .clear_l{
    	clear: left;
    }
    .clear_r{
    	clear: right;
    }
    </style>
    </head>
    <body>
    <h1>floatプロパティ</h1>
    <h2>○○○寿司</h2>
    	<div>
    		<img src="img/sushi1.gif" alt="CSS入門:floatプロパティで回り込みを設定する方法
    フリーランスエンジニア案件情報 | プロエンジニア" class="float_l">
    		<p>画像は左側、テキストは右側に表示されます。</p>
    		<p class="clear_l">「float_l セレクター」では、右側と下に余白を作っています。</p>
    	</div>
    <h2>△△△寿司</h2>
    	<div>
    		<img src="img/sushi2.gif" alt="CSS入門:floatプロパティで回り込みを設定する方法
    フリーランスエンジニア案件情報 | プロエンジニア" class="float_r">
    		<p>画像は右側、テキストは左側に表示されます。</p>
    		<p class="clear_r">「float_r セレクター」では、左側と下に余白を作っています。</p>
    	</div>
    </body>

    左の回り込みの解除には「clear_l セレクター」を設定し、右の回り込みの解除には「clear_r セレクター」を設定します。「clearプロパティ」で解除された段落(p)要素は「float」の回り込み設定が解除され、通常の段落として、画像の下に表示されます。

    ●ブラウザーの表示

    CSS入門:floatプロパティで回り込みを設定する方法
フリーランスエンジニア案件情報 | プロエンジニアcss_float3

    ▲ページトップへ戻る

    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【Vue.js/HTML/CSS/JavaScript】フロントエンドエンジニア★HR企業での人材管理プラットフォーム開発

    月額単価 :50万円〜60万円

    HRテックや医療テックなど様々な分野で活躍をしている企業内で新たに2つのシステム開発を行っており、一...

    フリーランス

    【Vue.js(Nuxt.js)/TypeScript/HTML/CSS】フロントエンドエンジニア★不動産業向けDX支援プラットフォーム開発他

    月額単価 :90万円〜

    同社は、不動産業界向けDX支援プラットフォームをはじめ、複数の自社プラットフォームを展開している企...

    フリーランス

    【JavaScript(TypeScript)/React/Vue/Angular】フロントエンドエンジニア★クラウド郵便受取サービスの開発

    会社に届く郵便や宅配物の官営をスマートにするSaaSを展開している企業内で、フロントエンド開発をご担...

    正社員

    【Go言語】リードエンジニア|生体認証システムの開発

    年収 :400万円〜

    Liquidでは顔認証による本人確認プラットフォーム「LIQUID eKYC」をリリースし、現在はeKYCの企業への導...

    株式会社Liquid