記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 –

※ 改訂版を作成しました。
記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 -(改)
(2013年4月10日追記)

前回の記事「記事内に高さの同じ枠つきの欄を作成する - margin-bottom: -32768px を使う方法 –」の方法だと、記事への記述がちょっとごちゃごちゃしていて、カスタム CSS をあまり有効に利用できていないような気がするので、極力、記事への記述を最小限に抑える方法のひとつとして、「display: table」を使って、記事内に高さの同じ枠つきの欄を作成する方法について検討してみました。

検討した結果を反映させたデモは以下のとおりです。

srgadafda

一見、きれいに見えますが、角のところを拡大してみると、うっすらとまるい線が入っています。

image

実は、欄と欄との間の隙間を白い線(border)で形成しているので、その影響で、上図のような線がうっすらと現れてしまっています。(注:「display: table」を設定している要素に「border-collapse: separete; border-spacing: 10px;」などと追加すれば、欄と欄との間に隙間ができるようですので、border 等でむりやりスペースっぽいものを作る必要はないようです。(2013年4月2日追記))

IE8 とか safari とかでしたら、「position: relative;」を使って、各欄の位置をずらして、欄と欄との間にスペースを作ることができたのですが、Firefox ではダメでした。以下の記事によると、Firefox では、「display: table-cell;」を指定したボックスには、「position:relative;」が効かないようです。

そういうわけで、他にも方法はありそうな気がするのですが、とりあえず、border で背景と同じ色の線を引くことで、スペースの代替とし、そのかわりに「box-shadow: 0 0 0 4px #cccccc inset;」で枠線を引くことにしました。

すると、IE8 では枠線が消えてしまうので、IE8 だけは、「position: relative;」でスペースを開けて、border で枠線を引くこととしました。

以上の考察を踏まえての、

記事での記述と、

<div class="tablecolumn-waku">
<div class="col2-1 w50">
<h2>見出し</h2>
<div>本文 本文 本文 本文 本文 本文</div>
</div>
<div class="col2-2 w50">
<h2>見出し</h2>
<div>
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文</div>
</div>
</div>
<div class="tablecolumn-waku">
<div class="col3-1 w33">
<h2>見出し</h2>
<div>本文 本文 本文</div>
</div>
<div class="col3-2 w33">
<h2>見出し</h2>
<div>
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文</div>
</div>
<div class="col3-3 w33">
<h2>見出し</h2>
<div>本文 本文 本文</div>
</div>
</div>

追加した CSS です。

/** 記事を高さの揃った枠付きの複数のカラムに分ける - display:table を使う方法 - **/
.tablecolumn-waku {
    display: table;
    width: 100%;
}

.tablecolumn-waku > div {
    display: table-cell;
border:8px solid white;
box-shadow:0 0 0 4px #cccccc inset;
background-color: lightblue;
border-radius:14px;
overflow:hidden;
}

.tablecolumn-waku > div > h2 {
border-radius: 14px 14px 0 0;
background-color:
#cccccc;
padding: 30px 30px 20px;
margin: -10px -10px 0;
text-align: center;
color:white;
}

.tablecolumn-waku > div > div {
padding:10px 5%;
}

@media (max-width: 767px) {
    .tablecolumn-waku,.tablecolumn-waku > div {
        display: block;
        width: 100% !important;
    }
}

/* カラムの幅を調整する */
.tablecolumn-waku .w100 {
    width: 100%;
}

.tablecolumn-waku .w50 {
    width: 47%;
}

.tablecolumn-waku .w33 {
    width: 31%;
}

.tablecolumn-waku .w25 {
    width: 22%;
}

#ie8 .tablecolumn-waku {
	position:relative;
	left:-3%;
margin:13px 0;
}

#ie8 .tablecolumn-waku > div {
border: 4px solid #cccccc;
}

#ie8 .tablecolumn-waku > div.col2-1 {
	position:relative;
	left:1.5%;
}

#ie8 .tablecolumn-waku > div.col2-2 {
	position:relative;
	left:3%;
}

#ie8 .tablecolumn-waku > div.col3-1 {
	position:relative;
	left:1%;
}

#ie8 .tablecolumn-waku > div.col3-2 {
	position:relative;
	left:2%;
}

#ie8 .tablecolumn-waku > div.col3-3 {
	position:relative;
	left:3%;
}
/** ------------------ **/

なお、私自身はまだ、検証していませんが、ネット情報によると、レンタルサーバ等にインストールするタイプの WordPress の場合だと jQuery を使って、簡単にカラム高さをあわせることができるそうです。

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。