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

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





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

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


  • displayのtable-cellを使ってボックスの高さを合わせる



displayのtable-cellを使ってレイアウト

【 書式 】
《 CSS 》

.display_table {display: table; width: 625px; margin-left:25px;}
.table-row {display: table-row;}
.table_cell {display: table-cell;}
.table_cel_space {display: table-cell; width: 30px;}
.table_cel_space_hei {height: 45px;}
.table_cell {
	border-bottom: 5px solid #0C0;
	background-color: #E8FFE8;}


ソースコード


ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="description" content="tableではなくdisplay:teble-cellを使ってボックスの高さを合わせる">
<meta name="keywords" content="display, teble-cell, ボックスの高さを合わせる">
<meta name="viewport" content="width=device-width">
<title>displayのtable-cellを使ってボックスの高さを合わせる</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>

</head>

<body>
<div class="container">

<header class="clearfix">
	<h1>displayを使ってボックスの高さを合わせる</h1>
    	<p>displayのtable-cellを使ってボックスの高さを合わせる</p>
</header>

	<h1><img src="images/display.gif" width="960" height="120" alt="displayを使ってボックスの高さを合わせる。displayのtable-cellを使ってボックスの高さを合わせる"></h1>

<div class="wrapper clearfix">
	<nav class="f_left">
		<h1>項目内容</h1>
    	<ul>
        	<li>リスト項目</li>
            <li>リスト項目</li>
            <li>リスト項目</li>
            <li>リスト項目</li>
            <li>リスト項目</li>
            <li>リスト項目</li>
            <li>リスト項目</li>
            <li>リスト項目</li>
            <li>リスト項目</li>
            <li>リスト項目</li>
        </ul>
    </nav>

<div class="display_table f_left">
	<div class="table-row">
    	<div class="table_cell">
	<h2><img src="../css_height-relative/img/8.jpg" width="300" alt="魚"></h2>
			<div class="post">
		<ul>
	    	<li>魚の名前</li>
            <li>魚の名前</li>
            <li>魚の名前</li>
		</ul>
		<ul>
	    	<li>魚の名前</li>
            <li>魚の名前</li>
		</ul>
			</div>
		</div>

		<div class="table_cel_space">
		</div><!-- ▲.table_cel_space -->

    	<div class="table_cell">
	<h2><img src="../css_height-relative/img/9.jpg" width="300" alt="野菜"></h2>
			<div class="post">
		<ul>
	    	<li>野菜の名前</li>
            <li>野菜の名前</li>
            <li>野菜の名前</li>
            <li>野菜の名前</li>
            <li>野菜の名前</li>
            <li>野菜の名前</li>
		</ul>
		<ul>
	    	<li>野菜の名前</li>
            <li>野菜の名前</li>
	    	<li>野菜の名前</li>
            <li>野菜の名前</li>
            <li>野菜の名前</li>
		</ul>
			</div>
		</div>
	</div><!-- ▲.table-row -->

	<div class="table-row">
		<div class="table_cel_space_hei">
		</div><!-- ▲.table_cel_space -->
	</div><!-- ▲.table-row -->

	<div class="table-row">
    	<div class="table_cell">
	<h2><img src="../css_height-relative/img/10.jpg" width="300" alt="自然"></h2>
			<div class="post_2">
	<h3>国内</h3>
		<ul>
        	<li><img src="../css_height-relative/img/12.jpg" width="60" alt="景色のきれいな場所"></li>
        	<li><img src="../css_height-relative/img/12.jpg" width="60" alt="景色のきれいな場所"></li>
        </ul>
		<ul>
        	<li><img src="../css_height-relative/img/12.jpg" width="60" alt="景色のきれいな場所"></li>
        	<li><img src="../css_height-relative/img/12.jpg" width="60" alt="景色のきれいな場所"></li>
        </ul>
		<ul>
        	<li><img src="../css_height-relative/img/12.jpg" width="60" alt="景色のきれいな場所"></li>
        </ul>

	<h3>海外</h3>
		<ul>
        	<li><img src="../css_height-relative/img/12.jpg" width="60" alt="景色のきれいな場所"></li>
        	<li><img src="../css_height-relative/img/12.jpg" width="60" alt="景色のきれいな場所"></li>
            <li><img src="../css_height-relative/img/12.jpg" width="60" alt="景色のきれいな場所"></li>
            <li><img src="../css_height-relative/img/12.jpg" width="60" alt="景色のきれいな場所"></li>
            <li><img src="../css_height-relative/img/12.jpg" width="60" alt="景色のきれいな場所"></li>
            <li><img src="../css_height-relative/img/12.jpg" width="60" alt="景色のきれいな場所"></li>
        </ul>
		<ul>
        	<li><img src="../css_height-relative/img/12.jpg" width="60" alt="景色のきれいな場所"></li>
        	<li><img src="../css_height-relative/img/12.jpg" width="60" alt="景色のきれいな場所"></li>
            <li><img src="../css_height-relative/img/12.jpg" width="60" alt="景色のきれいな場所"></li>
            <li><img src="../css_height-relative/img/12.jpg" width="60" alt="景色のきれいな場所"></li>
        </ul>
		<ul>
        	<li><img src="../css_height-relative/img/12.jpg" width="60" alt="景色のきれいな場所"></li>
            <li><img src="../css_height-relative/img/12.jpg" width="60" alt="景色のきれいな場所"></li>
            <li><img src="../css_height-relative/img/12.jpg" width="60" alt="景色のきれいな場所"></li>
            <li><img src="../css_height-relative/img/12.jpg" width="60" alt="景色のきれいな場所"></li>
        </ul>
			</div>
		</div>

		<div class="table_cel_space">
		</div><!-- ▲.table_cel_space -->

    	<div class="table_cell">
	<h2><img src="../css_height-relative/img/11.jpg" width="300" alt="秘密基地"></h2>
			<div class="post">
		<ul>
	    	<li>第１秘密基地</li>
            <li>第３秘密基地</li>
            <li>第５秘密基地</li>
            <li>第７秘密基地</li>
		</ul>
		<ul>
	    	<li>第２秘密基地</li>
            <li>第４秘密基地</li>
	    	<li>第６秘密基地</li>
		</ul>
			</div>
		</div>
	</div>
</div><!-- ▲.display_table -->

	</div><!-- ▲.wrapper -->

<footer>
	<h3>displayを使ってボックスの高さを合わせる</h3>
		<small>Copyright&copy; 2013 webry All Rights Reserved.</small>
</footer>

</div><!-- ▲.container -->

</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;
    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;}

/* ▼font-size */
header h1 {font-size: 12px;}
header p {font-size: 10px;}
footer h3 {font-size: 12px;}
small {font-size: 10px;}
.post_2 h3 {font-size: 18px;}
/* ▲font-size */

/* ▼.float */
.f_right {float:right;}
.f_left {float:left;}
/* ▲.float */

.container {width: 960px; margin: 0 auto;}

.wrapper {width: 830px; margin: 0 auto;}

/* ▼.table */
.display_table {display: table; width: 625px; margin-left:25px;}
.table-row {display: table-row;}
.table-header-group {display: table-header-group;}
.table_cell {display: table-cell;}
.table_cel_space {display: table-cell; width: 30px;}
.table_cel_space_hei {height: 45px;}
.table_cell {
	border-bottom: 5px solid #0C0;
	background-color: #E8FFE8;}
h2 img {border-top: 5px solid #0C0; border-bottom: 5px solid #0C0;}
.post ul {float: left; margin-right: 25px;}
.post ul + ul {margin-right: 0;}
.post ul li {
	padding: 0 0 0 1em;
	background-image: url(../../css_height-relative/img/2.png);
	background-repeat: no-repeat;
	background-position: 0 6px;}
.display_table ul li:last-child {padding-bottom: 30px;}
.post {width: 255px; margin: 0 auto;}
.post_2 ul {float: left; margin-right: 22px;}
.post_2 ul + ul + ul {margin-right: 0;}
.post_2 h3 {clear: both; padding: 0 0 0 7px;}
.post_2 {width: 224px; margin: 0 auto;}
.m_top {margin-top: 45px;}
.table_cell_nav {width: 175px; text-indent: 30px; border-top: 5px solid #814FF4; border-bottom: 5px solid #814FF4;}
.table_cell_nav ul li {border-bottom: 2px dotted #999;}
/* ▲.table */

/* ▼header */
header {width: 100%; margin-top: 6px;}
header h1 {float: left; margin: 0 0 0 4px;}
header p {float: left; padding: 2px 0 0 6px;}
/* ▲.header */

/* ▽幅 */
.w_250 {width: 250px;}
/* ▲幅 */

/* ▽nav */
nav {width: 180px; text-align: center; background-color: #0C0;}
nav h1 {line-height: 2.0; font-size: 14; color: #fff;}
nav ul  {color:#4646FF;}
nav ul li {line-height: 2.5;}
nav ul li:hover{background-color: #6F0;}
nav ul li:last-child{margin-bottom: 0;}
/* ▲nav */

/* ▽footer */
footer {text-align: center; margin-top: 30px; padding: 20px 0 10px; background-color: #000; color: #fff; font-size: 92%;}
footer h3, footer small {display: inline;}
footer small {font-style: italic;}
/* ▲footer */

ブラウザで表示【 FireFox 】




IEtester【 IE7 】




IEtester【 IE8 】




IEtester【 IE9 】





ブラウザで表示【 Chrome 】




HTML5 Outliner【 Chrome 】