My Color　「ダンクハーツ-谷春樹Blog-」

商品一覧ページなどをコーディングするときに、


のように表示されてほしいのに




のようになってしまったことはありませんか？
この場合の解決策は、一番高い要素の高さにワクの幅をそろえることで解決できるのですが、高さが一定じゃないときってありますよね？
そんなときに使えるjsライブラリーをご紹介。
使用するのは「to-R」さんが制作した「heightLine.js」。

とのこと。
これがすごく便利なんです！

使用方法もheightLine.jsを読み込みクラスをあてるだけという簡単さ。
是非使ってみてください。

設置方法

to-RさんのサイトからheightLine.jsをダウンロード。

記述方法

「heightLine.js」を読み込みます。

<script type="text/javascript" src="./heightLine.js"></script>

使い方１

統一したいブロックレベル要素に「heightLine」というクラスをあてます。
これで自動的にこのクラスがあてられたブロックの中で高さが一番高いものに統一されます。

使用例

<dl class="heightLine">
    <dt>商品タイトル</dt>
    <dd>商品紹介文</dd>
</dl>
<dl class="heightLine">
    <dt>商品タイトル</dt>
    <dd>商品紹介文</dd>
</dl>

使い方２

グループごとに高さを変える場合は

・「heightLine-group1」
・「heightLine-group2」

などのようにheightLineの後ろに-(ハイフン)で続けてグループ名を指定します。

使用例

<dl class="heightLine-group1">
    <dt>商品タイトル</dt>
    <dd>商品紹介文</dd>
</dl>
<dl class="heightLine-group1">
    <dt>商品タイトル</dt>
    <dd>商品紹介文</dd>
</dl>

<dl class="heightLine-group2">
    <dt>商品タイトル</dt>
    <dd>商品紹介文</dd>
</dl>
<dl class="heightLine-group2">
    <dt>商品タイトル</dt>
    <dd>商品紹介文</dd>
</dl>

使い方３

上記の記述方法はそれぞれのブロック要素にすべて記述する方法でしたが、この３つめの記述方法は親のブロック要素に
「heightLineParent」というクラスをあてます。

使用例

<div class="heightLineParent">
    <dl>
        <dt>商品タイトル</dt>
        <dd>商品紹介文</dd>
    </dl>
    <dl>
        <dt>商品タイトル</dt>
        <dd>商品紹介文</dd>
    </dl>
    <dl>
        <dt>商品タイトル</dt>
        <dd>商品紹介文</dd>
    </dl>
</div>

これが一番便利です。