ブロックレベル要素の高さを揃える「Equal Heights」

webサイト制作 webデザイン jQuery





☆★データーでの確認★☆

Equal Heights


  • jQueryを使ってボックスの高さを合わせる



jQuery1.2.6を使用

【 書式 】

《 jquery1_2_6.js 》

<script type="text/javascript" src="js/jquery1_2_6.js"></script>


ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="description" content="ブロックレベル要素の高さを揃える「Equal Heights」">
<meta name="keywords" content="ブロックレベル要素,高さを揃える,Equal Heights">
<meta name="viewport" content="width=device-width">
<title>ブロックレベル要素の高さを揃える「Equal Heights」</title>
<link rel="stylesheet" href="css/style.css" media="all">
	
<!-- IE対策 -->
<!--[if ite IE 9]>
<script src="http://html5shiv.googlecode.com/svn/ttunk/html5.js"></script>
<![endif]-->

<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<style>
  article,aside,dialog,figure,footer,header,
  hgroup,menu,nav,secton{ display: block;}
</style>
<script type="text/javascript" src="js/jquery1_2_6.js"></script>
<script type="text/javascript" src="js/equalheights.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	$(".block").equalHeights()
});

</script>

</head>
<body>

<div id="contarner">
<header>
	<h1>ブロックレベル要素の高さを揃える「Equal Heights」</h1>
    	<p><img src="images/jquery.jpg" width="960" height="120" alt="ブロックレベル要素の高さを揃える「Equal Heights」"></p>
</header>

<nav>
	<h2>リスト項目</h2>
    	<ul>
        	<li>リスト内容</li>
            <li>リスト内容</li>
            <li>リスト内容</li>
            <li>リスト内容</li>
            <li>リスト内容</li>
            <li>リスト内容</li>
            <li>リスト内容</li>
            <li>リスト内容</li>
        </ul>
</nav>


	<div id="wrapper">
<article>
		<div class="block">
	<h2><img src="images/01.jpg" width="300" height="100" alt="桜の名所"></h2>
 		<div class="block_ul">
    	<ul>
        	<li>桜の名前</li>
            <li>桜の名前</li>
            <li>桜の名前</li>
        </ul>
    	<ul>
        	<li>桜の名前</li>
            <li>桜の名前</li>
        </ul>
		</div>
		</div>
		<div class="block">
	<h2><img src="images/02.jpg" width="300" height="100" alt="桜の名所"></h2>
		<div class="block_ul">
    	<ul>
        	<li>桜の名前</li>
            <li>桜の名前</li>
            <li>桜の名前</li>
            <li>桜の名前</li>
            <li>桜の名前</li>
        </ul>
    	<ul>
        	<li>桜の名前</li>
            <li>桜の名前</li>
            <li>桜の名前</li>
            <li>桜の名前</li>
        </ul>
		</div>
		</div>

		<div class="block">
	<h2><img src="images/03.jpg" width="300" height="100" alt="桜の名所"></h2>
	<h3><img src="images/h3.svg" width="18" height="18" alt="">桜の映像</h3>
		<div class="block_ul02">
    	<ul>
        	<li><img src="images/05.jpg" width="120" alt=""></li>
            <li><img src="images/05.jpg" width="120" alt=""></li>
		</ul>
        <ul>
            <li><img src="images/05.jpg" width="120" alt=""></li>
        </ul>
		</div>
	<h3><img src="images/h3.svg" width="18" height="18" alt="">桜の写真</h3>
		<div class="block_ul02">
    	<ul>
        	<li><img src="images/05.jpg" width="120" alt=""></li>
		</ul>
        <ul>
            <li><img src="images/05.jpg" width="120" alt=""></li>
        </ul>
		</div>
		</div>

		<div class="block">
	<h2><img src="images/04.jpg" width="300" height="100" alt="桜の名所"></h2>
		<div class="block_ul">
    	<ul>
        	<li>桜の名前</li>
            <li>桜の名前</li>
            <li>桜の名前</li>
            <li>桜の名前</li>
            <li>桜の名前</li>
        </ul>
    	<ul>
        	<li>桜の名前</li>
            <li>桜の名前</li>
            <li>桜の名前</li>
            <li>桜の名前</li>
        </ul>
		</div>
		</div>

		<div class="block">
	<h2><img src="images/05.jpg" width="300" height="100" alt="桜の名所"></h2>
		<div class="block_ul"> 
    	<ul>
        	<li>桜の名前</li>
            <li>桜の名前</li>
            <li>桜の名前</li>
        </ul>
    	<ul>
        	<li>桜の名前</li>
            <li>桜の名前</li>
        </ul>
		</div>
		</div>
		<div class="block">
	<h2><img src="images/01.jpg" width="300" height="100" alt="桜の名所"></h2>
		<div class="block_ul">
    	<ul>
        	<li>桜の名前</li>
        </ul>
    	<ul>
        	<li>桜の名前</li>
        </ul>
		</div>
		</div>
</div><!-- ▲.clearfix -->
</article>
	</div><!-- ▲#wrapper -->

<footer>
	<small>Copyright&#169; 2013 webry―ブロックレベル要素の高さを揃える「Equal Heights」― All Rights Reserved.</small>
</footer>

</div><!-- ▲#contarner -->
</body>

</html>


ソースコード【 CSS 】

@charset "utf-8";

/* resetcss */
html,body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset {

    margin: 0;
    padding: 0;
    line-height: 1.5;
    color: #333;
	font-family:
      "ヒラギノ角ゴ Pro W3",
      "Hiragino Kaku Gothic Pro",
      "Hiragino Kaku Gothic Pro W3",
      "メイリオ",
      Meiryo,
      Osaka,
      "ＭＳ Ｐゴシック",
			"MS PGothic",
      sans-serif;
      }

    a {
     text-decoration: none;
    }
 
     ul, ol {
      list-style-type: none;
     }	
	  
    img {
      border: 0;
    }

.clearfix:after {
  content: ""; 
  display: block; 
  clear: both;}

#contarner {
	width: 960px;
	margin: 0 auto;
	background-image: url(../images/bg.jpg);
	background-repeat: no-repeat;
	overflow: hidden;}
#wrapper {
		width: 660px;
		float: left; }
header h1 {
	text-align: right;
	font-size: 12px;
	margin: 10px 0 0 0;}
header p {
	margin: 0 0 30px 0;}
.block {
		width: 300px;
		margin: 0 25px 15px 0;
		border-bottom: 5px solid #85BC82;
		background-color: rgba(245, 255, 244, 0.6);
		float: left; }
.block img {
	border-top: 5px solid #85BC82;
	border-bottom: 5px solid #85BC82}
.block_ul02 img {
	border-top: none;
	border-bottom: none;}
.block_ul {
	width: 15.5em;
	margin: 0 auto;}
.block ul {
	float: left;}
.block_ul ul {
	margin-right: 1.5em;}
.block_ul ul + ul {
	margin-right: 0em;}
.block_ul ul li {
	width: 7em;
	text-indent: 1.0em;
	background-image: url(../images/sankaku.gif);
	background-repeat: no-repeat;
	background-position: 0 4px;}
.block_ul02 {
	width: 255px;
	margin: 0 auto;}
.block_ul02 ul li {
	text-indent: 0;
	background-image: none;}
.block_ul02 ul li:last-child {
	padding-bottom: 15px;}
.block_ul02 ul {
	margin-right: 15px;}
.block_ul02 ul + ul {
	margin-right: 0px;}
.block_ul02 li:last-child {
	margin-bottom: 15px;}
.block h3 {
	clear: both;
	text-indent: 1.4em;
	padding-left: 10px;
	font-size: 17px;
	position: relative;}
.block h3 img {
	position: absolute;
	left: 10px;
	top: 2px;
	border-top: none;
	border-bottom: none;
	opacity: 0.6}
nav {
	text-align: center;
	float: left;
	width: 160px;
	margin: 0  45px 0 10px;
	}
nav h2 {
	font-size: 18px;
	color: #788477;}
nav ul li {
	line-height: 2.8;}
nav ul li:hover {
	display: block;
	background-color: #2A9E1E;
	color: #fff;
	filter: alpha(opacity=50);
		-moz-opacity: 0.5;
		-webkit-opacity: 0.5;
		opacity: 0.5;}
footer {
	text-align: center;
	padding: 15px 0 10px;
	background: #000;
	font-size: 12px;
	color: #fff;}



ソースコード【 jQuery 】

/**
 * Equal Heights Plugin
 * Equalize the heights of elements. Great for columns or any elements
 * that need to be the same size (floats, etc).
 * 
 * Version 1.0
 * Updated 12/10/2008
 *
 * Copyright (c) 2008 Rob Glazebrook (cssnewbie.com) 
 *
 * Usage: $(object).equalHeights([minHeight], [maxHeight]);
 * 
 * Example 1: $(".cols").equalHeights(); Sets all columns to the same height.
 * Example 2: $(".cols").equalHeights(400); Sets all cols to at least 400px tall.
 * Example 3: $(".cols").equalHeights(100,300); Cols are at least 100 but no more
 * than 300 pixels tall. Elements with too much content will gain a scrollbar.
 * 
 */

(function($) {
	$.fn.equalHeights = function(minHeight, maxHeight) {
		tallest = (minHeight) ? minHeight : 0;
		this.each(function() {
			if($(this).height() > tallest) {
				tallest = $(this).height();
			}
		});
		if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
		return this.each(function() {
			$(this).height(tallest).css("overflow","auto");
		});
	}
})(jQuery);


ソースコード【 SVG 】

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
	<!ENTITY st0 "fill:#5FD35F;stroke:#009300;stroke-miterlimit:10;">
]>
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="8px" height="8px" viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path style="&st0;" d="M7.5,4.078C7.5,5.968,5.968,7.5,4.078,7.5H3.922C2.032,7.5,0.5,5.968,0.5,4.078V3.922
	C0.5,2.032,2.032,0.5,3.922,0.5h0.156C5.968,0.5,7.5,2.032,7.5,3.922V4.078z"/>


ブラウザで表示【 FireFox 】




IEtester【 IE7 】




IEtester【 IE8 】




IEtester【 IE9 】




ブラウザで表示【 Chrome 】




HTML5 Outliner【 Chrome 】