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

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

ホームページやブログを作っていると画像の横にテキストを配置したくなる事ってありますよね。 HTMLやCSSを学んだばかりの頃って「意外と難いな」って感じると思うのですが、cssのfloatを使うと実は簡単にできるんです。

例えばfloatプロパティを指定した要素(divやpなど)は左右に回り込みます。 ということは画像やテキストにfloatを指定すれば「画像の横にテキストが配置されるようになる」というわけです。

このページでは、画像を表示する所から、その横にテキストを回り込ませる所までを紹介していきますね。 あとfloatの処理、高さを認識させる方法も詳しく解説していきます!もちろん初心者向けですので、用語をできる限り使わず説明していきますね(^^♪

目次
画像を配置してみよう

画像を配置してみよう

まずはimgタグを使って画像(イメージ)を配置してみましょう。 imgタグのsrcの部分に表示したいイメージのURL(パス)を入力すると、指定した画像が表示されるようになります。 (イメージのURLについては相対パスと絶対パスについてをご覧ください)

画像の表示サイズは、widthで横幅、heightで高さのそれぞれを設定できます。 またaltの部分には、画像が表示されなかった場合に、代わりに表示されるテキストを入力して下さい。 画像に特に意味がない場合(飾りで使う場合など)は、「alt=""」というように空欄にしておきましょう。

画像を表示する(書式)
<img src="画像url" width="幅" height="高さ">

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

<div id="main_contents">
<h1>「2016年07月」一覧</h1>
<h2>狙ったキーワードで上位表示!アクセスが増えるキーワード選びのコツ</h2>
   <p class="text"><img class="img-left" src="sample.jpg" width="120" height="80" alt="">
   スマホアフィリエイトで広告を選んだら、次に悩むのがキーワードですね。
   この記事ではスマホ</p>
<h2>稼げるスマホ広告をパソコンでチェック!便利なツールご紹介</h2>
   <p class="text"><img class="img-left" src="sample.jpg" width="120" height="80" alt="">
   アクセス数はあるのに、「全然商品が売れない」なんて思った事ないですか?
   今はパソコンより</p>
<h2>アフィリエイトをする前に知っておきたい、PVが少なくても売れる広告主の特徴とは</h2>
   <p class="text"><img class="img-left" src="sample.jpg" width="120" height="80" alt="">
   良い広告を見つけて「よし、アフィリエイトするぞ」と思っても、
   始める前に注意しなければならない落と<p/> 
<h2>スマホで副業するならアフィリエイト!稼ぐための新戦略</h2>
   <p class="text"><img class="img-left" src="sample.jpg" width="120" height="80" alt="">
   スマホで副業するならアフィリエイトがオススメです。 なぜ?って、
   それは失敗してもリスクがなく</p> 
</div>
ブラウザでの表示例

入力内容をブラウザで表示してみると上の画像のようになります。

現在の状態ではテキストの左側に画像が表示されています。 ですが単に画像に続いてテキストが表示されているだけなので、綺麗じゃないですよね。 そこで、後に続く要素(ここではテキスト)を右に回り込ませて表示する設定をCSSでします。

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

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

img.img-left{
  float:left;
}

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

floatによるレイアウト崩れの例

h2の部分が余計に回り込んでしまっているのが確認できますよね。 こういう場合はcssの「clearプロパティ」を使って回り込みを解除します。

float(回り込み)の解除

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

<div id="main_contents">
<h1>「2016年07月」一覧</h1>

<!-- ↓で回り込み解除 -->
<h2>狙ったキーワードで上位表示!アクセスが増えるキーワード選びのコツ</h2>
   <p class="text">   <!-- ↓のimgは左へフロートする -->
   <img class="img-left" src="sample.jpg" width="120" height="80" alt="">
   <!-- ↓のテキストは右へ回り込む -->
   スマホアフィリエイトで広告を選んだら、次に悩むのがキーワードですね。
   この記事ではスマホ</p>

<!-- ↓で回り込み解除 -->
<h2>稼げるスマホ広告をパソコンでチェック!便利なツールご紹介</h2>
   <p class="text">   <!-- ↓のimgは左へフロートする -->
   <img class="img-left" src="sample.jpg" width="120" height="80" alt="">
   <!-- ↓のテキストは右へ回り込む -->
   アクセス数はあるのに、「全然商品が売れない」なんて思った事ないですか?
   今はパソコンより</p>

<!-- ↓で回り込み解除 -->
<h2>アフィリエイトをする前に知っておきたい、PVが少なくても売れる広告主の特徴とは</h2>
   <p class="text">   <!-- ↓のimgは左へフロートする -->
   <img class="img-left" src="sample.jpg" width="120" height="80" alt="">
   <!-- ↓のテキストは右へ回り込む -->
   良い広告を見つけて「よし、アフィリエイトするぞ」と思っても、
   始める前に注意しなければならない落と<p/>

<!-- ↓で回り込み解除 -->
<h2>スマホで副業するならアフィリエイト!稼ぐための新戦略</h2>
   <p class="text">   <!-- ↓のimgは左へフロートする -->
   <img class="img-left" src="sample.jpg" width="120" height="80" alt="">
   <!-- ↓のテキストは右へ回り込む -->
   スマホで副業するならアフィリエイトがオススメです。 なぜ?って、
   それは失敗してもリスクがなく</p> 
</div>
h2{
  font-size:15px;
  font-family: 'Hiragino Kaku Gothic ProN', Meiryo, Helvetica, Arial, sans-serif;
  clear: both;
}

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

回り込み解除の表示例

float応用編

floatの例

先ほど紹介した方法がfloatの使い方の基本で、ココからは簡単な応用編です。

上はブログなどでよく見かけるような一般的な形なんですが、こんなふうにしたい時ってありますよね。 floatを使ってこういうようにするには、ちょっとやり方が変わります。

まずはhtmlを書き換えます。(先ほど記述したCSSは削除して下さい。) 下のようにimgタグをpタグの下に配置しましょう。

<div id="main_contents">
<h1>「2016年07月」一覧</h1>
<h2>狙ったキーワードで上位表示!アクセスが増えるキーワード選びのコツ</h2>
   <p class="text">スマホアフィリエイトで広告を選んだら、次に悩むのがキーワードですね。
   この記事ではスマホ</p>
   <img class="img-left" src="mint160820.jpg" width="120" height="80" alt="">

<h2>稼げるスマホ広告をパソコンでチェック!便利なツールご紹介</h2>
   <p class="text">アクセス数はあるのに、「全然商品が売れない」なんて思った事ないですか?
   今はパソコンより</p>
   <img class="img-left" src="mint160820.jpg" width="120" height="80" alt="">

<h2>アフィリエイトをする前に知っておきたい、PVが少なくても売れる広告主の特徴とは</h2>
   <p class="text">良い広告を見つけて「よし、アフィリエイトするぞ」と思っても、
   始める前に注意しなければならない落と<p/>
   <img class="img-left" src="mint160820.jpg" width="120" height="80" alt="">

<h2>スマホで副業するならアフィリエイト!稼ぐための新戦略</h2>
   <p class="text">スマホで副業するならアフィリエイトがオススメです。 なぜ?って、
   それは失敗してもリスクがなく</p>
   <img class="img-left" src="mint160820.jpg" width="120" height="80" alt=""> 
</div>
ブラウザでの表示例

そうするとp要素の下に画像が配置されるようになります。 そしてh2とp(テキスト部分)を右側、画像を左側へ配置したいわけですが、さっきと違って画像(img)が下に配置されています。

こうした場合、imgにfloat:left;と設定しても上にあるh2とpは右には回り込んでくれません。 だったら「h2とpにそれぞれfloatを設定すればいいよね?」って思いますよね。 でもそうすると今度はh2に続く要素が回り込んで、pに続く要素が回り込んで・・・と続いていくのでレイアウトが崩れてしまいます。

こういう時に使用するのがdivタグです。

divを使った例

こんな感じでhとpをdivで囲んで1つにまとめ、divにfloatを設定する事で画像を左、divで囲んだhとpを右にというようにできます。

ではdivのclass名を「text-right」として記述していきます。

<div id="main_contents">
<h1>「2016年07月」一覧</h1>
 <div class="text-right">  <!-- ←を記述 -->
   <h2>狙ったキーワードで上位表示!アクセスが増えるキーワード選びのコツ</h2>
     <p class="text">スマホアフィリエイトで広告を選んだら、次に悩むのがキーワードですね。
     この記事ではスマホ</p>
 </div>  <!-- ←を記述 -->
 <img class="img-left" src="mint160820.jpg" width="120" height="80" alt="">
  

  <div class="text-right">  <!-- ←を記述 -->
    <h2>稼げるスマホ広告をパソコンでチェック!便利なツールご紹介</h2>
      <p class="text">アクセス数はあるのに、「全然商品が売れない」なんて思った事ないですか?
      今はパソコンより</p>
  </div>  <!-- ←を記述 -->
  <img class="img-left" src="mint160820.jpg" width="120" height="80" alt="">

  <div class="text-right">  <!-- ←を記述 -->
    <h2>アフィリエイトをする前に知っておきたい、PVが少なくても売れる広告主の特徴とは</h2>
      <p class="text">良い広告を見つけて「よし、アフィリエイトするぞ」と思っても、
      始める前に注意しなければならない落と<p/>]
  </div>  <!-- ←を記述 -->
  <img class="img-left" src="mint160820.jpg" width="120" height="80" alt="">

  <div class="text-right">  <!-- ←を記述 -->
    <h2>スマホで副業するならアフィリエイト!稼ぐための新戦略</h2>
      <p class="text">スマホで副業するならアフィリエイトがオススメです。 なぜ?って、
      それは失敗してもリスクがなく</p>
  </div>  <!-- ←を記述 -->
  <img class="img-left" src="mint160820.jpg" width="120" height="80" alt="">
</div>

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

divの表示領域

なのでここでdivにfloatだけ設定しても、後に続くimgが横に回り込む隙間がありません そこでdivの幅を設定する事でimgの回り込む隙間を作ってあげます。

メインコンテンツの幅は570px、画像が120pxとなっていますので、divの幅を430pxと設定します。 そうするとdivと画像の間に20pxの空白(隙間)が空きます。

では記述してみましょう!

div.text-right{
  float:right;
  width:430px;
}
表示例

確認してみると、上のように画像が詰まって表示されちゃいますよね。 これはfloatの回り込みを解除していないからです。

これを解除するには色々な方法がありますが、簡単なのはdivをさらに追加してそこにclearプロパティを設定する方法です。 では下のようにclass名を「text-img」として、divを追加してみましょう! ※class名は適当です

<div id="main_contents">
<h1>「2016年07月」一覧</h1>

<div class="text-img">  <!-- ←を記述 -->
 <div class="text-right">
   <h2>狙ったキーワードで上位表示!アクセスが増えるキーワード選びのコツ</h2>
     <p class="text">スマホアフィリエイトで広告を選んだら、次に悩むのがキーワードですね。
     この記事ではスマホ</p>
 </div>
 <img class="img-left" src="mint160820.jpg" width="120" height="80" alt="">
</div>  <!-- ←を記述 -->

<div class="text-img">  <!-- ←を記述 -->
  <div class="text-right">
    <h2>稼げるスマホ広告をパソコンでチェック!便利なツールご紹介</h2>
      <p class="text">アクセス数はあるのに、「全然商品が売れない」なんて思った事ないですか?
      今はパソコンより</p>
  </div>
  <img class="img-left" src="mint160820.jpg" width="120" height="80" alt="">
</div>  <!-- ←を記述 -->

<div class="text-img">  <!-- ←を記述 -->
  <div class="text-right">
    <h2>アフィリエイトをする前に知っておきたい、PVが少なくても売れる広告主の特徴とは</h2>
      <p class="text">良い広告を見つけて「よし、アフィリエイトするぞ」と思っても、
      始める前に注意しなければならない落と<p/>
  </div>
  <img class="img-left" src="mint160820.jpg" width="120" height="80" alt="">
</div>  <!-- ←を記述 -->

<div class="text-img">  <!-- ←を記述 -->
  <div class="text-right">
    <h2>スマホで副業するならアフィリエイト!稼ぐための新戦略</h2>
      <p class="text">スマホで副業するならアフィリエイトがオススメです。 なぜ?って、
      それは失敗してもリスクがなく</p>
  </div>
  <img class="img-left" src="mint160820.jpg" width="120" height="80" alt="">
</div>  <!-- ←を記述 -->

</div>

次は今記述したdivにclearプロパティを設定してみましょう!

div.text-img{
  clear:both;
}

floatで高さが認識されない

表示例(高さが足りてない)

回り込みを解除したことで、しっかりと横に回り込んで、一見問題ないように見えますよね。 ですがよく見てみると上記のように、全体を囲んだclass名「text-img」のdivの高さが途中で途切れてしまっているのが確認できます。 (しっかりと高さが出てない)

見た目は問題ないから「まぁいいや」と思っちゃいますけど、これを放置しておくと、marginなどを使って余白を開けたい時などに、色々と面倒な事が起きてしまいます。

なのでこれを直すためにclass名「text-img」のdivに直接clearプロパティを設定するのではなく、疑似要素(after)を使ってdivの後にclearを設定します。 そうする事で「高さが出ない」とかそういったことがなくなります。

では先ほど記述したclear:both;を一旦削除して下のように書き直してみて下さい。

div.text-img:after{
  content:"";
  clear:both;
  display:block;
}
表示例(高さが要素いっぱいになっている)

確認して見ると、高さがdiv内の要素いっぱいになっているのが確認できます。 そして疑似要素(after)を使った部分はcontent:;に何も入力してないので、表示はされていません。

floatの使い方は大体こんな感じになります。 方法は他にも色々あるんですが、とりあえず練習用として一番簡単だと思われる方法を紹介してみました! floatは最初はホント慣れないと思いますが、使っているとそのうち慣れるので失敗を恐れず色々試してみて下さい(^^)/

以上「floatの基本と応用編」でしたー(^^♪

次回はナビゲーションのデザインの仕方を紹介していきます!!