投稿した文章をいくつか並べたときに、自動で高さをそろえてくれる機能がブログなどには備わっていますよね。それを今回は作ってみたいと思います。
変数の特徴をうまく利用して、一番大きいものにほかの要素をそろえるという流れです。
HTML, CSS と jQuery の関係について、基礎から学びたい方は以下を参考にしてください。
HTMLとCSSとjQueryの関係を超わかりやすく解説【初心者対象】
要素の高さを自動でそろえる jQuery のスクリプト
完成形はこんな感じです
See the Pen
flatheight by taichi (@taichi_na)
on CodePen.
※今回は動作をわかりやすくするために、タイトルをクリックした際に、高さをそろえるようにしています。本来は自動でするようにしたいのでこのようなアクションは不要です。
さて、上の例のタイトル部分をクリックしてみてください。
3つあるでこぼこの要素の高さが、揃ったと思います。ブログなどで記事を投稿した際にこのような機能が備わっていると、大変便利ですね。ほかにも用途は多数あると思います。
では実際に作り方を見ていきましょう。
HTML, CSS で骨格を作っていく
See the Pen
flatheight by taichi (@taichi_na)
on CodePen.
レイアウトの都合でいくつか入れ子になっている部分がありますが、画像と文章を一つのカードにして横に並べているだけのシンプルな構造です。
わかりやすいように背景に色を入れています。タイトルをクリックするまでは、文章の量が違うので、各カードの下端はデコボコになっています。
特に難しい部分はありませんね。基本ができていれば理解できる内容だと思うので、ここはサクッと飛ばして、jQuery を見ていきましょう。
jQuery で最も高さのある要素にそろえる
See the Pen
flatheight by taichi (@taichi_na)
on CodePen.
まずは考え方から説明していきます。
それぞれ高さが違う３つの要素は、高さの指定を CSS でしていません。要するに内容に応じて高さが決まる状態になっています。
なので、それぞれが違う高さになっていて、下の端がでこぼこになっています。
高さをそろえるためには、最も高さのある要素の高さを取得して、それをほかの要素に入れてあげる必要がありますね。
では実際にやっていきましょう。
1. $(“h1”).click(function(){
これは、タイトルをクリックしたときに～、という意味のスクリプトです。
実際にWEBサイトに実装する際には不要になると思います。自動で処理をしてほしいので。
2. var h = 0;
いきなり変なものが出てきてびっくりしたと思いますが、これは Java Script で書かれている変数になります。
今は jQuery を使っていますが、jQuery も Java Script で作られているので、混在しても問題ありません。
ということで、ここでは h という変数を定義して、その値を 0 としておきます。
この h を入れ物として、3つある要素の高さを入れて比べていくということですね。
3. $(“.sec div”).each(function(){
each() メソッドはそれぞれに同じ処理を繰り返してくれます。いかにその内容が続きます。
4. if($(this).height() > h){
h = $(this).height();
}
});
ここでは if文 を使って条件を指定しています。if(ここに条件が入ります)
height() メソッドを使って div の高さを取得して、それが先ほど指定した h よりも大きかったら、h はその値にします、ということになります。
HTMLに書かれている順に比べていくので、まずは一番左のdiv要素と h を比較します。先ほど変数を指定したときに、
h = 0
としているので、まずは最初の要素の高さが上書きされます。（０より大きいので）
同じようにすべての要素を比べて行って、最も大きな値だったものが、最終的に変数 h の値となる、ということですね。
5. $(“.sec div”).css(“height”, h + “px”);
最大値が収まった h をそれぞれの要素の height に入れていきましょう。
３つある .sec div の CSS を書き換える処理をしていきます。
height を h px に指定します。これですべて同じ高さにそろいました。
まとめ：変数を有効に使いましょう
今回初めて変数を使ったスクリプトを書いてみました。
中身を更新していくことができる入れ物として、とても便利なことがお分かりいただけたと思います。
それに if文 を組み合わせることによってさまざまな動きを実現することが可能になりますね。ぜひご自分でアレンジを加えてみてください。
