jQuery Auto Height
jQuery Auto Heightとは、複数のボックスの高さを最大値にそろえるjQueryプラグインです。
それでは、こちらからjQuery Auto Heightを入手してください。
http://www.tinybeans.net/blog/download/jquery-plugin/jquery-auto-height.html
入手したら、先ほど作成した「js」フォルダ内に保存しましょう。
外部JavaScriptを読み込みたいときの手順は、「jQuery pngFix」で説明した通りです。
では、実際に使ってみましょう。
「鈴木智子のホームページのアクセスアップ講座」では、次のようにしました。
<head>部分
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryAutoHeight.js"></script>
<script type="text/javascript">
$(function(){
$('div#dLink_planning,div#dLink_design,div#dLink_cording,
div#dLink_seo,div#dLink_seotools,div#dLink_ads').autoHeight();
});
適用した部分
<div id="dLink"> <div style="min-height: 131px;" id="dLink_planning"> <h3><a href="planning.html">ホームページ企画講座</a></h3> <p><a href="planning.html">ホームページを作りたい！<br> でも、どうしたらいいか判らない？<br> ホームページの企画についてはこちら</a></p> <p class="person01"><a href="planning.html"><img src="img/dLink_planning.png" alt="ホームページ制作講座" height="120" width="50"></a></p> <p class="person02"><a href="design.html"><img src="img/dLink_design.png" alt="ホームページ制作講座" height="120" width="50"></a></p> </div> <div style="min-height: 131px;" id="dLink_design"> <h3><a href="design.html">デザイン講座</a></h3> <p><a href="design.html">ホームページを作りたい！<br> ホームページをリニューアルしたい！<br> ホームページの制作・デザインに関する講座はこちら</a></p> </div> <div style="min-height: 131px;" id="dLink_cording"> <h3><a href="coding.html">コーディング講座</a></h3> <p><a href="coding.html">ホームページを作りたい！<br> ホームページを最適化したい！<br> ホームページのコーディングに関する講座はこちら</a></p> <p class="person01"><a href="coding.html"><img src="img/dLink_cording.png" alt="ホームページ制作講座" height="120" width="50"></a></p> <p class="person02"><a href="seo.html"><img src="img/dLink_seo.png" alt="SEO・SEM講座" height="120" width="50"></a></p> </div> <div style="min-height: 131px;" id="dLink_seo"> <h3><a href="seo.html">SEO・SEM講座</a></h3> <p><a href="seo.html">目指せ、上位表示！<br> アクセスアップ！<br> SEO、SEMについては、こちら</a></p> </div> <div style="min-height: 131px;" id="dLink_seotools"> <h3><a href="seotools.html">SEOツール講座</a></h3> <p><a href="seotools.html">SEOの結果を目で確認したい！<br> そんなときに便利なSEOツールを紹介</a></p> <p class="person01"><a href="seotools.html"><img src="img/dLink_seotools.png" alt="SEOツール講座" height="120" width="50"></a></p> <p class="person02"><a href="ads.html"><img src="img/dLink_ads.png" alt="広告講座" height="120" width="50"></a></p> </div> <div style="min-height: 131px;" id="dLink_ads"> <h3><a href="ads.html">広告講座</a></h3> <p><a href="ads.html">ホームページを軸とした、広告・マーケティングについては、こちら</a></p> </div> </div>
ブラウザで確認すると次のようになります。
どうですか？簡単ですね。
文字サイズを変更した場合は、再表示させる事を忘れずに。
次に説明するJavaScriptは、大量のサンプル画像を格好良く表示させる「jQuery Lightbox」を説明します。
