【レスポンシブデザイン】テーブル、と見せかけて幅のタイトなスマホではカラムを落とせるパーツなどいかがでしょう。

2012.09.14

iPhone5をチラ見しつつiPod touchの白を買います。hakoishiです。
やっとSiriに甘い言葉を囁ける...ここまで長かったー。

さて、今回はレスポンシブデザインのパーツに使えそうなサンプルソースのご紹介をば。

何かと使いどころの悩ましいtableですが、便利なこともやはり多いですね。
会社概要とか。料金表とか。

けれど、レシポンシブ案件ではスマホだと幅が狭くて崩れる！なんてことが多々あります。
そんなとき、dlでマークアップしてPCではテーブルライクに、スマホではカラムを落として（といいますか、dt・ddをソース通り縦に並べて）見せる方法はどうでしょう。
テクニック的にはお馴染みですね。

サンプル

サンプル

ウィンドウの幅を広げたり狭めたりしてみてください。

html


<dl class="tbl-common01">
<dt>Title sample</dt>
<dd>Title sample Title sample Title sample</dd>
<dt>Title sample </dt>
<dd>Title sample Title sample Title sample<br>
Title sample Title sample Title sample</dd>
<dt>Title sample </dt>
<dd>Title sample Title sample Title sample</dd>
</dl>

css


.tbl-common01 {  
    width: 80%;
    margin: 0 auto;
    border: 1px solid #666666;
    border-bottom: none;
}

.tbl-common01 dt {  
    font-weight: bold;
}

/* スマホ
-------------------------------------------------- */
@media only screen and (max-width:570px) {
    .tbl-common01 {
        background-color: #EEEEEE;
    }
    
    .tbl-common01 dt,
    .tbl-common01 dd {
        padding: 8px 20px;
    }
    
    .tbl-common01 dt {
        float: none;
        background-color: #AAAAAA; /* 背景色を指定 */
        border-top:1px solid #FFFFFF;
        border-left: 1px solid #FFFFFF;
    }
    
    .tbl-common01 dd {
        border-top: 1px solid #666666;
        border-bottom: 1px solid #666666;
    }
}


/* PC
-------------------------------------------------- */
@media only screen and (min-width: 571px) {
    .tbl-common01 {
        background: #EEEEEE url(bg.png) repeat-y -150px 0; /* dlで背景画像をyリピートし、dtの背景色のように見せる。positionはdtの幅に応じて調整 */
    }
    
    .tbl-common01 dt,
    .tbl-common01 dd {
        padding: 20px;
    }
    
    .tbl-common01 dt {
        clear: both;
        float: left;
        width: 110px; /* 幅を指定 */
        border-top: 1px solid #FFFFFF;
    }
    
    .tbl-common01 dd {
        padding-left: 170px; /* dtの分、左にpaddingを取る */
        border-top: 1px solid #FFFFFF;
        border-bottom: 1px solid #666666;
        border-left: 1px solid #FFFFFF;
    }
}

※ブレイクポイントは、ブラウザでの確認しやすさ優先の指定です。