質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1792閲覧

横1列ごとに高さを揃えたい

dian_kat

総合スコア16

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/03/02 14:50

編集2017/03/02 15:00

jquery.heightLine.js
こちらのライブラリを使っています。
赤文字のテキスト(<p class="name">)の高さを揃えたいのですが、
現状、高さが一番高い物に合わせて全てのテキストの高さが揃ってしまいます。
このテキストの高さを、横一列ごとに高さを揃えられるようにしたいです。
PC表示は4カラムごとに横一列高さを揃え、
SP表示は2カラムになった場合も横1列ごとに高さを揃えられるようにしたいのですが、
なにか良い方法が御座いましたら教えて頂きたいです。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5<style type="text/css"> 6body { 7 position: relative; 8 max-width: 954px; 9 margin: 0 auto; 10 padding: 0 13px; 11} 12.module .row .body .col_wrap { 13margin: 0 -1.525%; 14} 15.module .row .body li { 16float: left; 17width: 21.94%; 18padding: 0 1.525%; 19} 20.module .row .body a { 21display: block; 22padding-bottom: 2em; 23} 24.module .row .body .thumb { 25margin-bottom: 1em; 26} 27.module .row .body .thumb img { 28 width: 100%; 29} 30.zoom_effect .thumb { 31position: relative; 32z-index: 10; 33overflow: hidden; 34width: 100%; 35border: 1px solid transparent; 36} 37.module .row .name { 38margin-bottom: 0.3em; 39color: #005e8c; 40font-weight: bold; 41color: red; 42} 43.clearfix:after { 44 display: block; 45 clear: both; 46 content: ''; 47} 48@media only screen and (max-width: 767px){ 49.module .row .body li { 50 width: 46.42%; 51} 52} 53</style> 54</head> 55<body> 56 <section class="module"> 57<div class="row"> 58<div class="body"> 59<ul class="col_wrap clearfix"> 60<li><a href="" class="zoom_effect"> 61<div class="thumb"><img src="https://placehold.jp/260x156.png" alt=""></div> 62<p class="name">ダミーです</p> 63<p class="description">ダミーですダミーですダミーですダミーですダミーですダミーです</p> 64</a></li> 65<li><a href="" class="zoom_effect"> 66<div class="thumb"><img src="https://placehold.jp/260x156.png" alt=""></div> 67<p class="name">ダミーですダミーです</p> 68<p class="description">ダミーですダミーですダミーです</p> 69</a></li> 70<li><a href="" class="zoom_effect"> 71<div class="thumb"><img src="https://placehold.jp/260x156.png" alt=""></div> 72<p class="name">ダミーですダミーです<br>ダミーです</p> 73<p class="description">ダミーですダミーですダミーですダミーですダミーです</p> 74</a></li> 75<li><a href="" class="zoom_effect"> 76<div class="thumb"><img src="https://placehold.jp/260x156.png" alt=""></div> 77<p class="name">ダミーです</p> 78<p class="description">ダミーですダミーですダミーですダミーです</p> 79</a></li> 80<li><a href="" class="zoom_effect"> 81<div class="thumb"><img src="https://placehold.jp/260x156.png" alt=""></div> 82<p class="name">ダミーですダミーです</p> 83<p class="description">ダミーですダミーですダミーですダミーですダミーです</p> 84</a></li> 85<li><a href="" class="zoom_effect"> 86<div class="thumb"><img src="https://placehold.jp/260x156.png" alt=""></div> 87<p class="name">ダミーですダミーです</p> 88<p class="description">ダミーですダミーですダミーですダミーですダミーです</p> 89</a></li> 90<li><a href="" class="zoom_effect"> 91<div class="thumb"><img src="https://placehold.jp/260x156.png" alt=""></div> 92<p class="name">ダミーですダミーです</p> 93<p class="description">ダミーですダミーですダミーです</p> 94</a></li> 95<li><a href="" class="zoom_effect"> 96<div class="thumb"><img src="https://placehold.jp/260x156.png" alt=""></div> 97<p class="name">ダミーですダミーです</p> 98<p class="description">ダミーですダミーですダミーですダミーですダミーですダミーです</p> 99</a></li> 100<li><a href="" class="zoom_effect"> 101<div class="thumb"><img src="https://placehold.jp/260x156.png" alt=""></div> 102<p class="name">ダミーですダミーです</p> 103<p class="description">ダミーですダミーですダミーですダミーですダミーですダミーです</p> 104</a></li> 105</ul> 106</div> 107</div> 108</section> 109<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 110<script src="http://blog.webcreativepark.net/sample/jQuery/11/jquery.heightLine.js"></script> 111 112<script> 113$(window).on("load", function() { 114 $('.module').each(function() { 115 $(this).find('.body .name').heightLine({ fontSizeCheck: true }); 116 $(this).find('.body a').heightLine({ fontSizeCheck: true }); 117 }); 118}); 119</script> 120</body> 121</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

matchHeight

こちらは、その機能がデフォで入っていますよ。

投稿2017/03/02 15:05

LibertyBell3

総合スコア1084

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dian_kat

2017/03/02 16:02

ご回答誠にありがとうございます。 思った通り動きました。 できればよく使っている jquery.heightLine.js を使って実現してみたかったのですが、 ご紹介いただいたプラグインはすごい使い勝手が良いですね。 これから使う機会がたくさんありそうです。
LibertyBell3

2017/03/02 16:18

わたくしも、今はこれしか使っておりません。 見た目に関係するScriptではないので、他に変更してもいいところだと思い、おすすめしました。 ただ確か、同じ横並び同士の複数指定は効かなかったと思うので、同じ高さにしたいタグを、 divなりに複数まとめてあげれば、大丈夫だと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問