heightLine.js公開日:2013年7月20日float(フロート)したボックスの高さが揃わなくて困ることがあります。ネットで調べたら「to-R」さんで、これを簡単に解決してくれるスクリプトを配布してくださっていました。具体的には「Whisper」さんが、floatの問題について詳しい説明をしてくださっています。ブロック要素が下段へ折り返した時に歯抜けになってしまった場合に、このブロック要素に対してクラス指定するだけで、バッチリ並んでくれます。このようなことになるかと言うと、CSSではブロック要素をfloatして横並びにした場合、高さを指定してやらないとブロックの高さが揃わないのです。(私が方法を知らないだけかもしれませんが・・・)行の一番右端のブロックが、手前(左側)のブロックよりも高さがなければ、一番左端まで折り返すことが出来ないからです。heightLine.jsをheadに読み込みます。src="/js/heightLine.js"></script>これで、高さを揃えたいブロック要素に「heightLine」というclass名を付けるだけです。EC-CUBEの商品一覧を横並びにする場合(ここでは2.12.2のCSSで説明しています)記事「商品一覧をCSSのみで横並びに変更する[EC-CUBE2.12]」を参照してください。CSSでブロックの高さを指定していますが、このJSを利用すると、高さを指定しなくても一番高さのあるブロックに高さが揃い、左端に折れてくれます。ファイル管理で、heightLine.jsを、利用中のテンプレートのjsディレクトリーにアップロードします。ブロック設定で、新規ブロックを作成して(ブロック名・ファイル名は任意で)下記のコードを書きます。レイアウト設定で、先ほど作成したブロックが右側に表示されているので、「head」にドラッグ&ドロップしてください。これで、heightLine.jsがheadに読み込まれます。src="<!--{$TPL_URLPATH}-->js/heightLine.js"></script>(2)商品一覧のCSSの部分で、class(list_area)を下記のように書き変えます。(content.css)「商品一覧をCSSのみで横並びに変更する[EC-CUBE2.12]」の手順通りに変更している事が前提です。高さを揃えたいブロック要素に、「heightLine」というclass名を付けるだけです。