【レスポンシブ対応】PCで左右。スマホで上下に表示させる為のCSS記述方法

レスポンシブサイトを作る際、PCでは左右に要素を並べ、スマホやタブレット等のモバイルでは上下に並べる方法はないものかと試行錯誤した。

で、テーブルタグを使わずに、CSSのみでなんとなく出来上がったっぽいので一応シェア。

…って、文章だけじゃどんな感じかよく分からないと思うので、デモページも作ってみた。

デモページ

スポンサーリンク

で、以下がソース。

PCで左右。スマホで上下に表示させる為のCSSとHTML

HTML

<div class="rwdBox">
    <div class="leftTop">PCで左。モバイルで上。</div>
    <div class="rightBottom">PCで右。モバイルで下</div>
</div>

CSS

.rwdBox{
    border:1px solid gray;
    margin:2px 2px 5px 2px;
}
.leftTop{
    padding:5px;
    text-align:center;
    width:97%;
}
.rightBottom{
    padding:5px;
    width:97%;
}

/* モバイル表示 */
@media only screen and (max-width : 640px){
    .rwdBox img{
        max-width:100%;
    }
}

/* PC表示 */
@media only screen and (min-width : 641px){
    .rwdBox{
        overflow:auto;
    }
    .leftTop{
        float:left;
        width:35%;
    }
    .rightBottom{
        width:63%;
        overflow:auto;
    }
}

てことでとりあえず、まだまだ改善の余地はありそうだから、改良し次第修正することとする。