ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

要素の右・左寄せと回り込み

floatを使って回り込み表示させる

画像などを右・左寄せにしてテキストを回り込みさせるには、floatプロパティを利用します。

.mawarikomi {
float:寄せる方向;
}

上記の「寄せる方向」にrightやleftなどの値を入力します。

floatは右・左に寄せるプロパティなのでtext-alignと間違えてしまいそうですが、文字の中央揃・右・左揃えを担当するtext-alignと違い、floatは要素ごと右・左に寄せたり、要素の回り込みまでを担当します。
回り込みするのは文字だけではなく、その他の要素も回り込み表示されます。

回り込みの説明

なお、floatで指定できる値は以下の通りです。

[指定できる値]
  • left:要素を左に寄せます。
  • right:要素を右に寄せます。
  • none:配置を指定しません。

floatの使用例

floatを使えば下記のような表現が可能です。
※例では分かりやすいように、枠で囲んでいます。

[図1] 左にある画像が…
floatを指定していない画像
[図2] float:rightで右に寄ります。
floatを指定した画像

文字は画像の左側に回り込んで表示されます。

回り込むって一体?

「回り込む」といった表現だけでは、ちょっと分かりづらいですよね。

通常、文字と画像を表示した場合には【図1】のように離れて表示されるのですが、floatを指定することにより、【図2】のように、文字が画像の周りを囲い込むように表示されます。

これを、回り込みと表現します。

一度floatを指定すれば、それ以降ずっと回り込む設定になります。
なので、回り込みを解除したい場合には解除指定をする必要があります。

覚えておきたいポイント

似たプロパティに注意

「右や左に寄せる」プロパティにtext-alignがありますが、floatは「要素を右・左に寄せて、かつ以降の要素を回りこみ」させることができます。
text-alignが寄せることができるのは文字だけです。

floatの指定方法

例えば、下の画像を右に寄せ、以降の要素を回り込みさせるとします。

回りこませる画像

その場合は、以下のようにCSSとHTMLを記述します。

[CSSの記述例]
.mawarikomi {
float:right;
}
[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>floatの指定</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<img src="xmas017.jpg" class="mawarikomi">
<p>floatで画像を右寄せに指定し、文字を回り込ませます。</p>

</body>
</html>

<img src="xmas017.jpg">に「mawarikomi」スタイルを適用することで、画像が右寄せにされ、それ以降の要素が左に回り込みます。

回り込んだ画像

なお、この状態だと以降の要素はすべて回り込み表示されます。
試しに<p>テキスト~</p><p>テキスト~</p>を入力しても、回り込み表示されます。

回り込みが継続される様子

なので回り込みを解除したい場合は、ポイントを指定する必要があります。

回り込みを解除する

回り込みを解除するには、clearプロパティを利用します。

clearプロパティを使うことにより、回り込みの解除が可能です。
解除以降は、通常通り回り込まずに表示されます。

[CSSの記述例]
.clear {
clear:指定する値;
}

なお、clearには指定できる値があります。

[指定できる値]
  • left:左寄せされた要素の回り込みを解除します。
  • right:右寄せされた要素の回り込みを解除します。
  • both:右・左共に、すべての要素の回り込みを解除します。

今回は右寄せに指定しているので、clearの値にはrightもしくはbothを入力します。

.clear {
clear:both;
}

このスタイルを回り込みを解除したい場所に入力すると、それ以降は回り込み表示されません。

<img src="xmas017.jpg" class="mawarikomi">
<p>floatで画像を右寄せに指定し、文字を回り込ませます。</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

<div class="clear">  ← ここで回り込みを解除
</div>

 ↓↓以降の要素の回り込みは解除されます↓↓

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

[表示サンプル]
回り込みが解除された画像

少し複雑で難しいですが、floatを上手く使えば要素を自由自際に配置できるようになり、表現の幅が広がります。

なお、回り込み解除忘れには注意しましょう。解除を忘れていると、ページのレイアウトが崩れてしまいます。

覚えておきたいポイント

floatを上手く使いこなせるようになろう!

floatを上手く使えば、ホームページデザインの骨格となるカラムも作ることができます。
ホームページを制作するうえで、floatプロパティは欠かせない、とっても大事な要素です。

横幅と縦幅の指定
« 前のページへ 背景に画像を表示する

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。