株式会社アテンド0コンテンツの高さを揃えたい時に便利!Webページを作成していて3カラム、2カラムなどの複数列にコンテンツを配置する事がありますよね。1行であればそこまで問題になりませんが、2行3行と複数行になっていくとコンテンツの高さが揃わない事が原因で表示が崩れる事もあるはずです。こんなとき、tableで配置したり、一行毎にclearを入れたりして何とかするわけですが、ショッピングカートなどソースを自動生成してコンテンツが追加されるページの場合、特定の場所だけにclearを入れる事は難しいですよね。レスポンシブWEBデザインならなおさらです。そんな難題も簡単に解決する事ができるんです。JavaScriptならね。fixheight.jsを使って高さを揃える!使うのはfixheight.js(ダウンロード:http://www.starryworks.co.jp/blog/tips/fixheightjs.html)というjQueryです。それからjquery.js(ダウンロード:https://jquery.com/)も必要なので、最新版をダウンロードしましょう。続いてHTMLに記述していきます。class=”fixHeight“><li>コンテンツ</li><li>コンテンツ</li><li>コンテンツ</li></ul>高さをそろえたい部分の親要素にfixHeightのclassを指定します。Hは大文字なので注意が必要です。これだけで要素の高さが揃っちゃいます。例のHTMLだと、liに「style=”height:00px;”」と高さを指定するCSSが入ります。高い要素に合わせて設定されるので、表示が崩れたりしなくなるわけです。下記の例でdiv要素の高さを揃えたい場合・・・ありますよね。そんな時は先ほどの記述だけではできません・・・続けて他のclassを付ける必要があります。class=”fixHeightChild“><p>コンテンツ</p></div></li></ul>高さを揃えたい部分にfixHeightChildを付けます。HとCが大文字ですので、注意してくださいね。これで「fixHeightChild」で設定した部分の高さが揃います。複数の孫要素を格納していて、それぞれの高さを揃えたい場合・・・こちらの利用頻度も高いですね。記述を細かく分けていく必要があります。class=”fixHeightChildDIV“><p>コンテンツ</p></div></li></ul>このように「fixHeightChild」に続けて、それぞれ揃えたい要素毎に記述を増やします。例文では「H2」とか「DIV」とか、HTML要素を大文字で指定していますが、決めごとはありません。揃える要素毎に名前が変われば動作してくれます。レスポンシブWEBデザインに対応するにはこのfixheight.jsはページが読み込まれた時に各要素の高さを取得してきて、要素毎にheightを付けていきます。PCで見ていて、画面幅を縮めたり広げたりしてコンテンツの幅が変わり、要素に入っている文字が押されて高さが変わってもheightの値が変わってくれません。ページを読み込んだ時点で高さが取得できるなら、モバイルで見た時に画面幅が固定になっているから別に問題ないのでは?と思ってしまいますが、モバイルは傾けた時に画面が縦横で切り替わりますよね。その動作があった時、コンテンツ表示が崩れてしまうんです・・・コマッタ・・・でもそんな時は画面幅が切り替わった時に再読み込みさせてあげればいいんです!fixheight.jsの下部にあるコレjQuery(document).ready(function(){$(“.fixHeight”).fixHeight();});この部分をつけ足してあげればいいわけですね。1.05;$(“.fixHeight”).fixHeight();});こんな感じですね。これを書き足しちゃってみてください。高さがうまく揃わない時にはテキストだけで構成されているコンテンツの高さを揃える場合には問題になりませんが、画像がある場合・・・この場合には高さがうまく揃わない事があります。・・・それはページ読み込みの開始時にfixheight.jsが動いているからです。実はページを読み込み開始時には文字から読み込まれます。続いてimageが当てはまるような順番ですかね。img要素にheightを設定してあれば、文字で高さが何pxなのかが書いてあるので理解してもらえますが、省いている場合・・・最初の段階で画像の高さがどのくらいあるのかが分かりませんよね。高さが0として扱われてしまうんです。なると各要素に入る画像の高さが均等でなかった場合、fixheight.jsが動作する時に取得できる値と、実際に画像が入った時の高さが変わってきますよね。それによって表示がうまく揃えられないんです。img要素にheightを設定すると、メンテナンス性が落ちてしまいます。レスポンシブWEBデザイン向きでもありません。そんな時には、fixheight.jsの動作順を、ページが完全に読み込まれてから動作するようにしてしまえばいいんです!またしてもfixheight.jsの下部にあるコレを見てください。jQuery(document).ready(function(){$(“.fixHeight”).fixHeight();});このままではいけないので、このように書き直します。書き直した後は「ページが読み込み終了時」に動作するように書かれています。これで高さがきちんと取得されるはずですので、試してみてください。弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。コンセプト制作プランCONTACTお問い合わせホームページ制作に関するご質問などございましたら、お気軽にお問い合わせください。※ブログ記事に関するご質問はお答えしかねます。お問い合わせはこちらTEL:0258-31-5005FAX:0258-37-7301ホームページ制作のアテンド|新潟・長岡|SEO・WEBデザインホームページ制作・Webデザインを始めとしたITソリューションでお客様のお手伝いをいたします。株式会社アテンドまで。会社案内リクルートFAQお見積り・ご相談お問い合わせリモートサポートソーシャルメディアFacebookFeedlyイイ感じの情報が集まる、アテンドパークシリーズ。ホームページ制作のアテンド|新潟・長岡|SEO・WEBデザイン。