display:table-cell を使って高さの同じ枠付きのボックスを作成する -見かけ上、ボックスを縦方向につなげる方法についての考察-

記事「記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 -(改)」において、display:table-cell を使って高さの同じ枠付きのボックスを作成する方法について検討しましたが、今度はさらに「見かけ上」ボックスを縦方向につなげる方法について検討してみました。

やり方は、「つなげる」のではなく、「display:table-cell を指定したボックスの中に display:table-row を指定したボックスを複数入れて分割し、結果的にその他のボックスがつながったように見せる」という方法です。

各ブラウザ対応の方は概ね、OK っぽいです。

sdgafgsfd
mac の safari

sadgasdgasd
Windows 7 の Google Chrome

IETester
IE9 by IETester

IETester-1
IE8 by IETester

gsdgsdf
Windows 7 の Firefox

まだ、ぐだぐだな状態で、実際にサイトで使うときには手直しすることになると思いますが、とりあえず、ここまでの作業を記録しておきます。

記事に記述したものは、

<div class="tablecolumn">

<div class="w50">

<div class="tablerow">
<div class="w100">
<h2>見出し1</h2>
<div>本文 本文 本文 本文 本文 本文</div>
</div>
</div>

<div class="tablerow">
<div class="w100">
<h2>見出し2</h2>
<div>
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文</div>
</div>
</div>

</div>

<div class="w50">
<h2>見出し3</h2>
<div>
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文</div>
</div>

</div>

対応する CSS は以下のとおりです。

/* 記事を複数のカラムに分ける */
.tablecolumn {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px;
}

.tablerow {
display: table-row !important;
    width: 100% !important;
}

.tablecolumn div {
display: table-cell;
border: 1px dashed #cccccc;
border-radius: 7px;
padding:3px 0.7%;
}

@media (max-width: 767px) {
    .tablecolumn,.tablecolumn > div {
        display: block;
        width: 100%;
        margin: 1.625em 0;
    }
}

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

.tablecolumn .w50 {
    width: 47%;
}

.tablecolumn .w33 {
    width: 31%;
}

.tablecolumn .w25 {
    width: 22%;
}

@media screen and (max-width: 767px) {
    .tablecolumn .w50,.tablecolumn .w33,.tablecolumn .w25 {
display: block;
margin: 10px;
        width: 100%;
    }
}

/** --------- **/

なお、おそらく、縦方向ではなくて、横方向につながったように見せる方法の場合は、table-row と table-cell の位置関係を逆にするようなイメージで OK ではないかと推察されます。

 

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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