高さの違う要素の縦の線（border）を引く3つの方法
- Date：
- Category：MVサイト製作日記
- Tags：HTML, css, jQuery, Javascript
- Response：Comments 0
-
MVサイト製作日記 part.02
デザインが出来上がってコーディングを進める中で、並列に並んだ高さの違う要素の左右に線（border）を引くのに少し悩みました。MVサイトで言えば、メインのコンテンツ部分とサイドのコンテンツ部分です。
今回は、この時悩んで見つけた3つの方法をメモして置きます。
高さの違う要素の例
2
3
4
5
2
|
1 2 3 4 |
<div id="sampleWrap01"> <div class="sample01">1<br />2<br />3<br />4<br />5</div> <div class="sample02">1<br />2<br /></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#sampleWrap01 { border: #2a211c solid 1px; box-sizing: border-box; overflow: hidden; padding: 0 5%; width: 100%; } #sampleWrap01 div.sample01, #sampleWrap01 div.sample02 { border-left: #2a211c solid 1px; border-right: #2a211c solid 1px; box-sizing: border-box; padding: 1rem 0; text-align: center; width: 40%; } #sampleWrap01 div.sample01 { float: left; } #sampleWrap01 div.sample02 { float: right; } |
この様に、中のコンテツの量によってそれぞれの高さが変わってしまう場合に、左右に線（border）を引くと、中のコンテツの量が少ない方の線が途中で切れてしまいます・・・。
今回は、この線が見た目に揃うようにします。条件は以下の2つ。
- 中のコンテンツの量が変わっても対応できる事
- 要素の横幅が変わっても対応できる事
DIV要素を用意してpositionで線（border）を引く
2
3
4
5
2
|
1 2 3 4 5 6 7 8 |
<div id="sampleWrap02"> <div id="sampleContets02"> <div class="sample01Bg"></div> <div class="sample01">1<br />2<br />3<br />4<br />5</div> <div class="sample02Bg"></div> <div class="sample02">1<br />2<br /></div> </div> </div> |
|
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 |
#sampleWrap02 { border: #2a211c solid 1px; box-sizing: border-box; padding: 0 5%; width: 100%; } #sampleContets02 { overflow: hidden; position: relative; } #sampleWrap02 div.sample01, #sampleWrap02 div.sample02 { box-sizing: border-box; padding: 1rem 0; text-align: center; width: 40%; } #sampleWrap02 div.sample01 { float: left; } #sampleWrap02 div.sample02 { float: right; } #sampleWrap02 .sample01Bg, #sampleWrap02 .sample02Bg { border-left: #2a211c solid 1px; border-right: #2a211c solid 1px; bottom: 0; position: absolute; top: 0; width: 40%; z-index: -1; } #sampleWrap02 .sample01Bg, { left: 0; } #sampleWrap02 .sample02Bg { right: 0; } |
コンテンツ自身には線（border）を引かずに、線（border）を引く用のdiv要素を新たに用意して、コンテンツの背後に重ねる方法です。ポイントは「top: 0;」と「bottom: 0;」で、この指定の仕方によって、基準の要素の縦いっぱいに要素が広がってくれます。WordPressのメニューのところにも使われている方法ですね。
メリット
- 線の色などcssで指定してあるので変更が容易。
- background-colorで背景色を付ける事が出来る。
デメリット
- HTMLに意味を持たない要素が増える。
- 横幅を「px」では無く「%」で指定している場合に1～2pxずれる可能性がある。（凄く丁寧なリキッドデザインをしている時に気になるかも）
背景色を指定した例
2
3
4
5
2
画像を使ってbackgroundに複数指定で線（border）を引く
2
3
4
5
2
|
1 2 3 4 5 6 |
<div id="sampleWrap04"> <div id="sampleContets04"> <div class="sample01">1<br />2<br />3<br />4<br />5</div> <div class="sample02">1<br />2<br /></div> </div> </div> |
|
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 |
#sampleWrap04 { border: #2a211c solid 1px; box-sizing: border-box; padding: 0 5%; width: 100%; } #sampleContets04 { background-image: url(bg.gif), url(bg.gif), url(bg.gif), url(bg.gif); background-repeat: repeat-y, repeat-y, repeat-y, repeat-y; background-position: left 0, 40% 0, 60% 0, right 0; overflow: hidden; } #sampleWrap04 div.sample01, #sampleWrap04 div.sample02 { box-sizing: border-box; padding: 1rem 0; text-align: center; width: 40%; } #sampleWrap04 div.sample01 { float: left; } #sampleWrap04 div.sample02 { float: right; } |
横幅1pxの画像を用意して、backgroundに引きたい線の本数分cssで指定していくやり方です。今回紹介する3種類の中では1番簡単なのでは？と思っていますが・・・。
サンプルでは、
・background-image
・background-repeat
・background-position
を別々に指定していますが、もちろん省略系で書いても大丈夫です。
レスポンシブやらが流行っておらず、widthが固定のデザインが主流だった頃は、左右の線をまとめて画像にしてbackgroundにリピートさせていました。これはそれを応用した形になるのではないでしょうか。
メリット
- イメージ的に理解しやすい。
デメリット
- 画像を使っているので色変更等が面倒くさい。
- 線の本数が増えると記述やら計算やらが面倒くさい。
- 横幅を「px」では無く「%」で指定している場合に1～2pxずれる可能性がある。（凄く丁寧なリキッドデザインをしている時に気になるかも）
Javascript(jQuery)で高さを揃えて線を引く
2
3
4
5
2
|
1 2 3 4 |
<div id="sampleWrap05"> <div class="sample01">1<br />2<br />3<br />4<br />5</div> <div class="sample02">1<br />2<br /></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#sampleWrap05 { border: #2a211c solid 1px; box-sizing: border-box; margin-bottom: 1rem; overflow: hidden; padding: 0 5%; width: 100%; } #sampleWrap05 div.sample01, #sampleWrap05 div.sample02 { border-left: #2a211c solid 1px; border-right: #2a211c solid 1px; box-sizing: border-box; padding: 1rem 0; text-align: center; width: 40%; } #sampleWrap05 div.sample01 { float: left; } #sampleWrap05 div.sample02 { float: right; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
jQuery(function($){ var obj = $('#sampleWrap05>div'); var heightStart = function (){ var height = 0; for (var i = 0, len = obj.length; i < len; i++){ var nHeight = obj.eq(i).outerHeight(); if(height < nHeight) height = nHeight; } obj.css('height', height + 'px'); } heightStart(); // resize $(window).resize(function() { obj.css('height', 'auto'); heightStart(); }); }); |
Javascriptを使って、揃えたい要素の高さを取得して、その中で一番高い高さに統一するというものです。自分でコードを作る時は、直接cssで高さを決め打ちするので、ブラウザのウィンドウを大きくしたり小さくした時に起こる、文章の改行によって高さが変わったりするのにも対応しなければいけません。
サンプルでは、2行目で指定した「id」直下の「div」要素を対象としています。もちろんウィンドウをリサイズしても高さを揃えてくれます。jQueryとcssの「box-sizing」が使えるブラウザ対象です。
もっと様々なオプションが付いて使い勝手の良い「to-R」さんのライブラリがとても便利なのでご紹介。そんなにオプションが要らないという方は上のコードで十分かと思います。
- ブロックレベル要素の高さを揃えるheightLine.js
- http://blog.webcreativepark.net/2007/07/26-010338.html
└ Javascript版です。jQueryを使いたく無い人向けです。 - レスポンシブWebデザインに対応した「jquery.heightLine.js」
- http://blog.webcreativepark.net/2013/10/21-112000.html
└ jQuery版です。細かな設定とかも出来てかなり便利です。
メリット
- 特定のidやclassを指定するだけで使えるのでとっても簡単。
- 配布されてるライブラリを使えば、ブラウザ間の表示の違いを気にしなくても良い。
デメリット
- Javascript(jQuery)を使う。
- ページの読み込みが完了した後に動くので、その間は線（border）が切れたまま表示される。
チラシの裏
MVサイトでは「02.画像を使って…」の方法でコーディングをしました。理由は、「01.DIV要素を用意して…」に関してはやっぱり、空のDIV要素を書くのに違和感を感じた事です。「03.Javascript(jQuery)で…」に関しては考える間もなく、ページ読み込み中に線が途切れるのが嫌だったからです。
今回のこの方法は、「メインカラムとサイドカラム」のような2～3個の要素の場合に使うものだと思います。それ以上になるとJavascriptで高さを揃える方法一択だと思います。
また、「01.DIV要素を用意して…」の方法は、応用するともっと面白い表現も可能ですので、興味があると調べてみると面白いかもしれません。
コメントを残す