横並びに配置したコンテンツが、中身の高さ（画像の大きさやテキストの長さ）によって、バラバラになってしまうことってありませんか？
そんな場合には、コンテンツ内の要素に関係なく一番高さを取っている要素に合わせて、下のラインを揃えてくれる方法があります。言葉で説明してもわかりにくいと思うので下の画像を見てみてください。
「タイトル1」の要素と「タイトル2」の要素で、中身にあたる文章が長い時と短い時で、背景の白い部分が短くなってしまうという問題になります。
これを、中身の長さに関わらずピッタリと揃えたいな～ってことですね。
それでは見ていきましょう。
まずは、サンプルとしてHTMLを用意しました。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<ul> <li> <h2>タイトル1</h2> <h3><img src="images/topimg.jpg" /></h3> <p>長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。</p> </li> <li> <h2>タイトル2</h2> <h3><img src="images/topimg.jpg" /></h3> <p>短い文章。短い文章。短い文章。短い文章。短い文章。短い文章。</p> </li> <li> <h2>タイトル3</h2> <h3><img src="images/topimg.jpg" /></h3> <p>長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。</p> </li> <li> <h2>タイトル4</h2> <h3><img src="images/topimg.jpg" /></h3> <p>短い文章。短い文章。短い文章。短い文章。短い文章。</p> </li> <li> <h2>タイトル5</h2> <h3><img src="images/topimg.jpg" /></h3> <p>長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。</p> </li> <li> <h2>タイトル6</h2> <h3><img src="images/topimg.jpg" /></h3> <p>短い文章。短い文章。短い文章。短い文章。短い文章。</p> </li> </ul> |
ここに基本的なCSSを指定しています。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
ul li{ width:30%; height:auto; margin:0; padding:0; float:left; background:#FFF; border:3px solid #333; border-radius:5px; } h1{ background:#fff; padding:10px; font-size:120%; box-shadow:0 2px 3px rgba(0,0,0,0.5); } h2{ font-size:120%; font-weight:bold; padding:10px; } h3 img{ width:100%; } p{ padding:5px; } |
▼こちらをブラウザで確認するとこのようになります。
短い文章の背景が下まで届かずに、要素の下のラインがバラバラになってしまっています。
この要素をきっちりと揃えてくれるのが「to-R」さんが配布している「heightLine.js」です。
heightLine.jsをダウンロードして読み込む
|
1 2 3 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!--/* heightLine.js */--> <script type="text/javascript" src="js/heightLine.js"></script> |
heightLine.jsの置き場所は、任意で決めてください。サンプルでは「js/フォルダの中」に配置しています。
方法1
揃えたいブロックレベル要素に「heightLine」というクラス名を付けます。
※サンプルで言うところの<p>タグにあたりますね。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<ul> <li> <h2>タイトル1</h2> <h3><img src="images/topimg.jpg" /></h3> <p class="heightLine">長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。</p> </li> <li> <h2>タイトル2</h2> <h3><img src="images/topimg.jpg" /></h3> <p class="heightLine">短い文章。短い文章。短い文章。短い文章。短い文章。短い文章。</p> </li> <li> <h2>タイトル3</h2> <h3><img src="images/topimg.jpg" /></h3> <p class="heightLine">長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。</p> </li> <li> <h2>タイトル4</h2> <h3><img src="images/topimg.jpg" /></h3> <p class="heightLine">短い文章。短い文章。短い文章。短い文章。短い文章。</p> </li> <li> <h2>タイトル5</h2> <h3><img src="images/topimg.jpg" /></h3> <p class="heightLine">長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。</p> </li> <li> <h2>タイトル6</h2> <h3><img src="images/topimg.jpg" /></h3> <p class="heightLine">短い文章。短い文章。短い文章。短い文章。短い文章。</p> </li> </ul> |
確認してみましょう。
このようになります。
方法2
方法1でも問題はありませんが、ある要素だけ独立して内容が長くなってしまうと、それに合わせて全ての要素が無駄に大きくなってしまうことが起こりえます。
どういうことかというと、下の画像を見てください。
「タイトル5」にあたる部分の「長い文章。…」が長すぎる為に、上の段の「タイトル1」「タイトル2」「タイトル3」の下に無駄な空間が存在しています。この場合は、「上段」と「下段」で分けて考えたですよね。
このように、複数のグループに分けて高さを揃えたい場合には、
- heightLine-group1
- heightLine-group2
- heightLine-group3
というように「heightLine」の後ろに「-(ハイフン)任意の名前」を付けることでグループ分けをしてくれるようになっています。
試しにやってみましょう。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<ul> <li> <h2>タイトル1</h2> <h3><img src="images/topimg.jpg" /></h3> <p class="heightLine-group1">長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。</p> </li> <li> <h2>タイトル2</h2> <h3><img src="images/topimg.jpg" /></h3> <p class="heightLine-group1">短い文章。短い文章。短い文章。短い文章。短い文章。短い文章。</p> </li> <li> <h2>タイトル3</h2> <h3><img src="images/topimg.jpg" /></h3> <p class="heightLine-group1">長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。</p> </li> </ul> <ul> <li> <h2>タイトル4</h2> <h3><img src="images/topimg.jpg" /></h3> <p class="heightLine-group2">短い文章。短い文章。短い文章。短い文章。短い文章。</p> </li> <li> <h2>タイトル5</h2> <h3><img src="images/topimg.jpg" /></h3> <p class="heightLine-group2">長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。</p> </li> <li> <h2>タイトル6</h2> <h3><img src="images/topimg.jpg" /></h3> <p class="heightLine-group2">短い文章。短い文章。短い文章。短い文章。短い文章。</p> </li> </ul> |
「上段」は「heightLine-group1」、「下段」は「heightLine-group2」としています。
すると、
このように「上段」と「下段」で高さの違うラインで揃える事が出来るようになりました。
方法3
または、グループ分けをする必要がない場合であれば、親要素に対して「heightLineParent」というを書き加えれば、子要素が全て揃うようにも可能になっています。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<ul class="heightLineParent"> <li> <h2>タイトル1</h2> <h3><img src="images/topimg.jpg" /></h3> <p>長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。</p> </li> <li> <h2>タイトル2</h2> <h3><img src="images/topimg.jpg" /></h3> <p>短い文章。短い文章。短い文章。短い文章。短い文章。短い文章。</p> </li> <li> <h2>タイトル3</h2> <h3><img src="images/topimg.jpg" /></h3> <p>長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。</p> </li> <li> <h2>タイトル4</h2> <h3><img src="images/topimg.jpg" /></h3> <p>短い文章。短い文章。短い文章。短い文章。短い文章。</p> </li> <li> <h2>タイトル5</h2> <h3><img src="images/topimg.jpg" /></h3> <p>長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。長い文章。</p> </li> <li> <h2>タイトル6</h2> <h3><img src="images/topimg.jpg" /></h3> <p>短い文章。短い文章。短い文章。短い文章。短い文章。</p> </li> </ul> |
いやぁ～便利ですね。
このように、ブロックレベル要素の高さが揃わなくて困ったときは、利用させて頂きたいと思います。