BLOG ブログ

> ブログ

jQuery WEBデザイン

2019.08.26

【jQuery】jquery.matchHeight.jsで要素の高さを揃える

サイトのコーディングの際に要素の高さがうまく揃わないってことがよくありませんか？

デザインの時点では1pxの違いも狂いたくないって頑張るのに、いざコーディングしたり、CMSで出力したりすると

画像の大きさ等で崩れてしまうことが多々あります。

そんな時に「jquery.matchHeight.js」です！！

jQueryのプラグインなので、誰でも簡単に仕込むことができます。

早速使い方をご説明しましょう

まず「jquery.matchHeight.js」をダウンロードしましょう！（リンク先はGitHub）

次にjQueryを読み込んで起きましょう！

<head>

<script type=“text/javascript” src=“js/jquery.matchHeight.js”></script>

<script>
$(function(){
　　$(‘.matchHeight’).matchHeight();
});
</script>

</head>

<body>

<ul>

<li class=”matchHeight“></li>

<li class=”matchHeight“></li>

<li class=”matchHeight“></li>

</ul>

</body>

 

クラス名は自由に決めてOKです！

今回はわかりやすくmatchHeightにしました。

すごく使いやすいプラグインですので、皆さんもぜひ試してみてください！

PS.脱jQueryはいつになるのやら…

Related Posts:

関連記事はこちら