cssのfloatでハマったので

職場の先輩から、Angular2 RC6リリースの話を聞き、Angularの勉強もせねばと思いましたが、cssのfloatで大ハマりしたのでメモメモ。

floatは要素の高さを揃えないと崩れます

今回、ulのli要素にfloat:left;をしたのですが、見事に崩れました。

html

<ul>
  <li><a href=""><img src="image/01.png"></a></li>
  <li><a href=""><img src="image/02.png"></a></li>
  <li><a href=""><img src="image/03.png"></a></li>
  <li><a href=""><img src="image/04.png"></a></li>

  <!--途中省略-->

  <li><a href=""><img src="image/33.png"></a></li>
</ul>    

css

ul {
  width: 100%;
  margin: 0 auto;
}
li {
  float: left;
  width: 9%;
}
li a img {
  max-width: 100%;
  height: auto;
}

liに高さを指定しなかったのですが何故（なにゆえ）に崩れるか！？と考え続けることしばらく、あることに気づきます。

liの中のimgのサイズが1px違うの混ざってる～！？

今回、160×160の画像サイズで揃えたつもりが、161×160とか160×161とか微妙にバラバラでした。

そのため、liの高さも変わってきてしまっていたようです。

floatで崩れたときの再現イメージ図 

li要素を可変にしたかったので、liの高さを固定値にするわけにはいかなかったので、imgの画像サイズをそろえることにしました。

画像一括リサイズソフト Ralpha

今回のように微調整でリサイズしても画像の被写体とかに影響がない場合は、『Ralpha』という画像リサイズのフリーソフトが便利です。

Ralpha - 窓の杜ライブラリ でダウンロードできます。

ダウンロードしたら、デスクトップなどに展開しましょう。

展開場所を聞かれるので、適当な場所に展開しましょう。

展開したら、『Ralpha.exe』をダブルクリックします。

Ralpha Image Resizerが起動します。

リサイズしたい画像をドラッグ&ドロップで持ってきます。 

画像を持ってこれたら、どのようにリサイズするか『大きさ』のプルダウンメニューから選択します。今回は『幅×高さ（px）』を選択します。

 『幅』と『高さ』を入力します。

緑の『↩』ボタン（実行）をクリックします。

『resize』というフォルダが元の画像のフォルダに作成されています。

 1pxぐらい画像サイズが違っていても影響しないと考えていましたが、意外と影響しました。あんまり使いどころないかもしれませんが備忘録として。

ちなみに、floatを使わない方法でliを横並びにする方法もあり、今回は最終的にそっちを採用しました。（ulの中身を真ん中寄せにできる）

html

<ul>
  <li><a href=""><img src="image/01.png"></a></li>
  <li><a href=""><img src="image/02.png"></a></li>
  <li><a href=""><img src="image/03.png"></a></li>
  <li><a href=""><img src="image/04.png"></a></li>

  <!--途中省略-->

  <li><a href=""><img src="image/33.png"></a></li>
</ul>    

css

ul {
  width: 100%;
  text-align: center;
  font-size: 0; /* liとliの間にできる隙間を無くすために必要 */
}
li {
  display: inline-block;
  width: 9%;
  /*今回は画像のみですが、liの中に文字が入ってきた場合font-sizeを適当に決めることでulのfont-size:0;を解消*/
  /*font-size: 16px*/
}
li a img {
  max-width: 100%;
  height: auto;
}

ハマるとなかなか気づけないもんですね。 

今回はこのへんで。