freefuntimes今回は画像+テキストのスライダーでテキストの高さを揃えたい場合のSwiperスライダーを実装していく。横に並んだときに、テキストの文字数に応じて高さがバラバラになっていると美しく見えない場合がある。そんな時におすすめの実装だ。今回はスライダーで対応しているが、スライダー以外でも並んだときの高さを揃えたい時に使えるので、汎用性が高くおすすめの方法だ。demoそれでは実装に入っていく。src="style.js"></script></body></html>HTMLはそこまで難しいことはしていない。下記のように、画像、画像下にテキストのエリアを設けている。これらを繰り返しているだけだ。10px;}CSSもそこまで難しいことはしていない。下記のように色や余白を設定しているだけだ。p')})今回は、要素の高さを揃える部分に限って説明していく。p')})まずページ内の全ての要素に対しての高さが知りたいので、constで変数targetElementsを定義して取り回しがしやすいようにする。その後、ページ内の要素数が1より大きい時に空の配列の変数heightArrayを定義する。続いて、forEachのループ処理で各要素の高さを取得し、先ほど定義したheightArrayの配列へpushする。ここまでで各要素の高さが分かるようになるので、その中で最大値の高さの要素を取得できるようMath.maxを指定している。最後にforEachのループ処理で、同じ並びにある高さを最大値の高さに合わせてあげるために、CSSの高さが最大値の高さに置き換わるように対応している。これで関数が作れたので、あとはページの読み込みが完了した時に、高さを揃えたい要素のクラスを指定して実行してあげればよい。(2)人気ブログランキングこのサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。