記事内の本文や画像などの回り込み設定(CSSのfloatを手軽に使う)

更新
2012年10月28日(日)

回り込み設定の具体例です。カオスレイアウトの原因と対処方法です。customtemplate ver1.3.0 に関してです。

十分に説明し切れているとは思いません。この記事と合わせて、「CSS float」などで検索し幾つかの解説サイトをご覧ください。

概要

  1. レイアウトがカオスになっている状態から、思い通りのレイアウトにしていく過程を載せています。Deka-Eさんへの返答です。

  2. 下記2記事の合わせ技・応用例です。それぞれの記事を先に読んだ方がいいです。

  3. 「回り込み」の概念は相当取っ付きにくいです。混乱して普通ですので、その点は心配無用です。

カオスレイアウト

具体例

    表情 イマイチ
  1. 『最近、テレビの映りが悪くて困ってるんだ。』

  2. 表情 普通
  3. 『最近は大型テレビが安くなっているから、買い換えたら?』

  4. 表情 イマイチ
  5. 『そうだな~今度のボーナスで買っちゃおうかな~』
    『今の相場はいくら位になってるの?』

  6. 表情 普通
  7. 『グレードにもよるけど、50インチTVが15万円位かな』

  8. 表情 グッド
  9. 『なにそれ!! 超~安いじゃん』

  10. 表情 普通
  11. 『いつからテレビの映りが悪くなったの?』

  12. 表情 グッド
  13. 『2011年7月25日から』

  14. 表情 イマイチ
  15. 『まだアナログTVだったのかよっ!!』

サンプルページをURL欄に記入しました。
 
多分に私の基礎知識が不足しているため、記述方法に誤り・勘違いがあると思いますが、ご指摘の程よろしくお願いします。
 
普段、文章と画像を一まとまりにする時、
[li][p]文章[/p][div]画像[/div][/li]
と記述しています。
 
単純に画像にclass="float"を追加すると、[li][/li]でまとまらないので、
 
[div]画像[/div][li][p]文章[/p][/li]
と記述するのだろうと思っています。
 
その際に、画像の高さ分よりも文章が短いと後に続く文章に影響が出てしまいます。
 
方法が分からないので、[hr size="1" /]を入れてリセットしてみました。
 
回り込ませた画像と対応する文章を一まとまりの塊とさせるには、どのように記述すべきなのでしょうか?
2012年10月23日(火) 20:10 Deka-E

HTMLソースを検証

  1. カオスレイアウトのソースは次のとおりです。

    <ol class="h3">
    
    <div class="floatl">
    <img src="http://blog-imgs-36-origin.fc2.com/k/u/m/kumarajyu/201202291525396b6.jpg" alt="表情 イマイチ" border="0" width="120" height="120" />
    </div>
    
    <li><p>『最近、テレビの映りが悪くて困ってるんだ。』
    </p></li>
    
    <div class="floatr">
    <img src="http://blog-imgs-36-origin.fc2.com/k/u/m/kumarajyu/20120229152539388.jpg" alt="表情 普通" border="0" width="120" height="120" />
    </div>
    
    <li><p>『最近は大型テレビが安くなっているから、買い換えたら?』
    </p></li>
    
    <div class="floatl">
    <img src="http://blog-imgs-36-origin.fc2.com/k/u/m/kumarajyu/201202291525396b6.jpg" alt="表情 イマイチ" border="0" width="120" height="120" />
    </div>
    
    <li><p>『そうだな~今度のボーナスで買っちゃおうかな~』<br>
    『今の相場はいくら位になってるの?』
    </p></li>
    
    <div class="floatr">
    <img src="http://blog-imgs-36-origin.fc2.com/k/u/m/kumarajyu/20120229152539388.jpg" alt="表情 普通" border="0" width="120" height="120" />
    </div>
    
    <li><p>『グレードにもよるけど、50インチTVが15万円位かな』
    </p></li>
    
    <div class="floatl">
    <img src="http://blog-imgs-36-origin.fc2.com/k/u/m/kumarajyu/201202291525390b2.jpg" alt="表情 グッド" border="0" width="120" height="120" />
    </div>
    
    <li><p>『なにそれ!! 超~安いじゃん』
    </p></li>
    
    <div class="floatr">
    <img src="http://blog-imgs-36-origin.fc2.com/k/u/m/kumarajyu/20120229152539388.jpg" alt="表情 普通" border="0" width="120" height="120" />
    </div>
    
    <li><p>『いつからテレビの映りが悪くなったの?』
    </p></li>
    
    <div class="floatl">
    <img src="http://blog-imgs-36-origin.fc2.com/k/u/m/kumarajyu/201202291525390b2.jpg" alt="表情 グッド" border="0" width="120" height="120" />
    </div>
    
    <li><p>『2011年7月25日から』
    </p></li>
    
    <div class="floatr">
    <img src="http://blog-imgs-36-origin.fc2.com/k/u/m/kumarajyu/201202291525396b6.jpg" alt="表情 イマイチ" border="0" width="120" height="120" />
    </div>
    
    <li><p>『まだアナログTVだったのかよっ!!』
    </p></li>
    
    </ol>
  2. コンテンツを除くと、HTMLは右コードのようになります。 ol 要素の子要素に li のみならず div もあるのが分かります。コメントどおりの構造です。

    [div]画像[/div][li][p]文章[/p][/li]と記述するのだろうと思っています。
    <ol class="h3"> ←親 開始
      <div class="floatl"><img /></div> ←1番目の子
      <li><p></p></li> ←2番目の子
      <div class="floatr"><img /></div> ←3番目の子
      <li><p></p></li> ←4番目の子
      <div class="floatl"><img /></div> ←5番目の子
      <li><p></p></li> ←6番目の子
      <div class="floatr"><img /></div> ←7番目の子
      <li><p></p></li> ←8番目の子
      (途中省略)
    </ol> ←親 終了

修正すべきポイントは2つ

レイアウトが崩れれば回り込みを解除する

  1. カオスレイアウトでは回り込みの解除が全くありません。

  2. 当テンプレートでは、回り込まされたくない要素のクラスに clear で解除できるように設定しています。

  3. また、回り込ませる要素の親要素にクラス ofh で勝手に解除されるように設定しています。つまり、親要素の弟要素が回り込まされなくなるということです。

  4. レイアウトが崩れればと題しましたが、崩れなくとも回り込みは解除しておいたほうが無難です。

olli しか子要素にできない

  1. カオスレイアウトの直接の原因ではありませんが、HTMLの文法に反しているので挙げておきます。

  2. ol の子要素は必ず li だけにした方が不測の事態が起きないです。

修正後レイアウト(序数なし)

具体例

  1. 表情 イマイチ

    『最近の警察とかけまして~、ヒーロー戦隊と説きます~。』ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字

  2. 表情 普通

    『そのココロは?』ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字

  3. 表情 グッド

    『ゴニンが多いです』ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字

HTMLソースを検証

  1. 修正後レイアウトのソースは次のとおりです。

    <ol class="lightup">
    
    <li class="ofh">
    <p class="floatl"><img src="http://blog-imgs-36-origin.fc2.com/k/u/m/kumarajyu/201202291525396b6.jpg" alt="表情 イマイチ" border="0" width="120" height="120" /></p>
    <p>『最近の警察とかけまして~、ヒーロー戦隊と説きます~。』</p>
    </li>
    
    <li class="ofh">
    <p class="floatr"><img src="http://blog-imgs-36-origin.fc2.com/k/u/m/kumarajyu/20120229152539388.jpg" alt="表情 普通" border="0" width="120" height="120" /></p>
    <p>『そのココロは?』</p>
    </li>
    
    <li class="ofh">
    <p class="floatl"><img src="http://blog-imgs-36-origin.fc2.com/k/u/m/kumarajyu/201202291525390b2.jpg" alt="表情 グッド" border="0" width="120" height="120" /></p>
    <p class="ofh">『ゴニンが多いです』</p>
    </li>
    
    </ol>
  2. コンテンツを除くと、HTMLは右コードのようになります。

    子1の子要素である孫1-1floatl があるのでそれ以降は回り込まされます。しかし、回り込まされるのは子1の内部だけでいいので、ofh子1につけています。子2や子3も同様です。

    孫3-2ofh があるので、孫3-1の下に文字が回り込まされていません。

    <ol class="lightup"> ←親 開始
      <li class="ofh"> ←子1 開始
        <p class="floatl"><img /></p> ←孫1-1
        <p></p> ←孫1-2
      </li> ←子1 終了
      <li class="ofh"> ←子2 開始
        <p class="floatr"><img /></p> ←孫2-1
        <p></p> ←孫2-2
      </li> ←子2 終了
      <li class="ofh"> ←子3 開始
        <p class="floatl"><img /></p> ←孫3-1
        <p class="ofh"></p> ←孫3-2
      </li> ←子3 終了
    </ol> ←親 終了

本文に序数を表示させる場合

具体例

  1. [li][p]画像[/p][p]文章[/p][/li]
    と記述した場合に、文章に序数が割り振られるようにするにはどうしたら良いのでしょうか?何かクラスが用意されているのでしょうか?
    2012年10月24日(水) 23:10 Deka-E
  2. 表情 イマイチ

    『最近の警察とかけまして~、ヒーロー戦隊と説きます~。』ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字

  3. 表情 普通

    『そのココロは?』ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字

  4. 表情 グッド

    『ゴニンが多いです』ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字、ダミー文字

HTMLソースを検証

  1. 上記例の簡略化したHTMLソースは右記のとおりです。赤文字部分修正後レイアウト(序数なし)からの変更箇所です。

    <ol class="h4">
    (引用部分省略)
      <li class="ofh">
        <div class="floatl"><img /></div>
        <p class="p"></p>
      </li>
      <li class="ofh">
        <p class="no-before floatr"><img /></p>
        <p class="p"></p>
      </li>
      <li class="ofh">
        <img class="floatl" />
        <p class="p ofh"></p>
      </li>
    </ol>
  2. li の最初の子要素が p の場合に序数が挿入されますが、 p 以外の div などに変更することで序数とは無関係になります。引用部分に序数がついていないのも、最初の子要素が p ではなく blockquote だからです。

  3. 本文が入っている pli の最初の子要素ではないため、そのままだと序数とは無関係のままです。序数を表示してカウントアップさせたい場合に、クラス p をつけます。由来は、「(最初の)pのように序数を表示する」からこのクラス名にしました。

  4. 最初が p のままクラス no-before をつけると、序数が非表示になるもののカウントアップはされます。4.1.1の次に4.1.3が来ているのはそのためです。

  5. 上記例では、img の親要素の div もしくは p は省略できます。ただし、アウトラインや角丸などを適用していると想定外の装飾になります。(4.1.4の画像装飾参照

先に本文、次に画像をコーディングした場合

具体例

  1. 『巷じゃPCが悪い奴に遠隔操作されて犯罪予告され遠隔操作されたPCの持ち主が犯罪予告してないのに逮捕されたんだとよ』(横幅が設定されていない、かつ、本文が長くて改行なしなので親要素内で最大の横幅になっている。よって、弟要素の p が回り込まされる隙間がなく、下に配置されている。)

    表情 イマイチ

  2. 『怖いね今まで何人くらい逮捕されたの?』
    (横幅が設定されていない、かつ、
    横幅が短いのでその横幅が反映され、
    弟要素の p が回り込まされるだけの隙間があり、
    画像が回り込まされている。)

    表情 普通

  3. 『五人逮捕だって』(横幅を指定したので、中身の長さにかかわらず画像が思い通りの場所に配置されている。)

    表情 グッド

HTMLソースを検証

  1. コンテンツを除いたHTMLは右コードのようになります。

    本文の長さによって画像が回り込まされるかどうかに影響が出ます。本文の横幅を指定することで、本文の長さにかかわりなく画像が回り込まされます。

    本文部分の横幅はCSSで指定しています。

    <ol class="h4"> ←親 開始
      <li class="ofh"> ←子1 開始
        <p class="floatr"></p> ←孫1-1
        <p><img /></p> ←孫1-2
      </li> ←子1 終了
      <li class="ofh"> ←子2 開始
        <p class="floatl"></p> ←孫2-1
        <p><img /></p> ←孫2-2
      </li> ←子2 終了
      <li class="ofh"> ←子3 開始
        <p class="floatr" style="width:480px;"></p> ←孫3-1
        <p><img /></p> ←孫3-2
      </li> ←子3 終了
    </ol> ←親 終了
  2. 画像を先にすると、横幅を指定しなくてもいい場合が多いです。理由は、親要素の横幅をはみ出すほど大きな画像を配置しようとは通常しないからです。

具体例をもっと

当ページの説明部分も具体例

  1. 上記説明中にも段組を4つ使用しました。ページのソースを参照いただければ、どのようにマークアップするとどのような表示になるのかを確認いただけます。また、コメントアウトで簡易解説をつけました

  2. 冒頭でも記載しましたが、混乱して普通です。最初は見よう見まねでOKだと思います。

  3. 深みにハマると、なにか書きたいことがあって始めたブログが、記事の配置などの方に注力してしまうという本末転倒になりかねないのでご注意ください。(イエ~イ、某準惑星さん見てますか)

画像回り込みテストページ

  1. 2012年10月28日現在 customtemplate をご利用いただいているDeka-Eさん(エボリアヌーメ)が「画像回り込みテスト」のページを作ってくれました。作者の至らない点を補強していただきありがとうございます。

  2. 時間の経過と共に、テンプレートの変更などでページの表示内容がかわっているかもしれません。ご容赦願います。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)