floatを使って画像を回り込ませてみよう

ホームページやブログを作っていると画像の横にテキストを配置したくなる事ってありますよね。
HTMLやCSSを学んだばかりの頃って「意外と難いな」って感じると思うのですが、 cssのfloatを使うと実は簡単にできるんです。
例えばfloatプロパティを指定した要素（divやpなど）は左右に回り込みます。
ということは画像やテキストにfloatを指定すれば「画像の横にテキストが配置されるようになる」というわけです。
このページでは、画像を表示する所から、その横にテキストを回り込ませる所までを紹介していきますね。あとfloatの処理、高さを認識させる方法も詳しく解説していきます！もちろん初心者向けですので、用語をできる限り使わず説明していきますね(^^♪

画像を配置してみよう

まずはimgタグを使って画像（イメージ）を配置してみましょう。 imgタグのsrcの部分に表示したいイメージのURL（パス）を入力すると、指定した画像が表示されるようになります。（イメージのURLについては相対パスと絶対パスについてをご覧ください）
画像の表示サイズは、widthで横幅、heightで高さのそれぞれを設定できます。またaltの部分には、画像が表示されなかった場合に、代わりに表示されるテキストを入力して下さい。画像に特に意味がない場合（飾りで使う場合など）は、「alt=””」というように空欄にしておきましょう。

画像を表示する（書式）

では画像を表示させたい部分にimgタグを入力していってみましょう。ここでは後ほど画像に対してfloatを使用するため、 class属性で「img-left」という名前を付けておきます。

入力内容をブラウザで表示してみると上の画像のようになります。
現在の状態ではテキストの左側に画像が表示されています。ですが単に画像に続いてテキストが表示されているだけなので、綺麗じゃないですよね。そこで、後に続く要素（ここではテキスト）を右に回り込ませて表示する設定をCSSでします。

画像を左に回り込ませよう

画像の右にテキストを回り込ませるためには、 cssのfloatプロパティを使います。
まずはcssに「img.img-left{}」と記述します。
こうする事でclass名「.img-left」の名前がついたimg要素に適用されます。

css
img.img-left{
float:left;
}

上のようにfloat:left;と記述する事で、img要素（画像部分）が左側に配置され、あとに続く要素がその右側に回り込みます。ですがfloatは解除しない限り、あとに続く要素がどんどん回り込んでいってしまうので、下のようにレイアウトが崩れてしまいます。

float（回り込み）の解除

htmlソースを見るとテキストの下にはh2がありますよね。この部分から回り込ませたくないので、ここに「clear:both;」（回り込み解除）を設定してあげます。

cssファイルのh2セレクタに上記のように「clear:both;」と記述してみましょう。内容を保存してブラウザで確認してみると、回り込みが解除され、段落ごとに画像が左にフロートされ整っているのが確認できます。（h2の上に余白を入れたい場合は、marginなどを設定）

float応用編

先ほど紹介した方法がfloatの使い方の基本で、ココからは簡単な応用編です。
上はブログなどでよく見かけるような一般的な形なんですが、こんなふうにしたい時ってありますよね。 floatを使ってこういうようにするには、ちょっとやり方が変わります。
まずはhtmlを書き換えます。 (先ほど記述したCSSは削除して下さい。) 下のようにimgタグをpタグの下に配置しましょう。

そうするとp要素の下に画像が配置されるようになります。そしてh2とp（テキスト部分）を右側、画像を左側へ配置したいわけですが、さっきと違って画像（img）が下に配置されています。こうした場合、imgにfloat:left;と設定しても上にあるh2とpは右には回り込んでくれません。だったら「h2とpにそれぞれfloatを設定すればいいよね？」って思いますよね。でもそうすると今度はh2に続く要素が回り込んで、 pに続く要素が回り込んで・・・と続いていくのでレイアウトが崩れてしまいます。こういう時に使用するのがdivタグです。

こんな感じでhとpをdivで囲んで1つにまとめ、 divにfloatを設定する事で画像を左、divで囲んだhとpを右にというようにできます。ではdivのclass名を「text-right」として記述していきます。

上のように記述したらdivにfloatを設定しましょう。って言いたい所ですが、 divの現在の表示領域は下のように幅いっぱいに広がっています。

なのでここでdivにfloatだけ設定しても、後に続くimgが横に回り込む隙間がありません。そこでdivの幅を設定する事でimgの回り込む隙間を作ってあげます。
メインコンテンツの幅は570px、画像が120pxとなっていますので、 divの幅を430pxと設定します。そうするとdivと画像の間に20pxの空白（隙間）が空きます。
では記述してみましょう！

確認してみると、上のように画像が詰まって表示されちゃいますよね。これはfloatの回り込みを解除していないからです。これを解除するには色々な方法がありますが、簡単なのはdivをさらに追加してそこにclearプロパティを設定する方法です。では下のようにclass名を「text-img」として、divを追加してみましょう！ ※class名は適当です

次は今記述したdivにclearプロパティを設定してみましょう！
css
div.text-img{
clear:both;
}

floatで高さが認識されない

回り込みを解除したことで、しっかりと横に回り込んで、一見問題ないように見えますよね。
ですがよく見てみると上記のように、全体を囲んだclass名「text-img」のdivの高さが途中で途切れてしまっているのが確認できます。（しっかりと高さが出てない）
見た目は問題ないから「まぁいいや」と思っちゃいますけど、これを放置しておくと、marginなどを使って余白を開けたい時などに、色々と面倒な事が起きてしまいます。
なのでこれを直すためにclass名「text-img」のdivに直接clearプロパティを設定するのではなく、疑似要素（after）を使ってdivの後にclearを設定します。そうする事で「高さが出ない」とかそういったことがなくなります。
では先ほど記述したclear:both;を一旦削除して下のように書き直してみて下さい。

確認して見ると、高さがdiv内の要素いっぱいになっているのが確認できます。そして疑似要素（after）を使った部分はcontent:;に何も入力してないので、表示はされていません。
floatの使い方は大体こんな感じになります。方法は他にも色々あるんですが、とりあえず練習用として一番簡単だと思われる方法を紹介してみました！ floatは最初はホント慣れないと思いますが、使っているとそのうち慣れるので失敗を恐れず色々試してみて下さい(^^)/
以上「floatの基本と応用編」でしたー(^^♪
次回はナビゲーションのデザインの仕方を紹介していきます！！