古めのie（6や7）でも崩れない。
レスポンシブWebデザインに使えるちょっとした小技まとめをメモしました。

最近では「CSS3」で登場した「display」などを使いスマホサイトのコーディングには
かなり有効的に使用させていただいています。

ただ、PCサイトでレスポンシブで対応するとなると、古めのie（6とか7）で
レイアウト結構崩れることがあります。

そこで横幅相対でも、使えるレスポンシブWebデザインを作るときに
有効的に使えるCSSの記述をまとめてみました。

横並びレイアウト

画像のサイズを固定する

HTML

clearfixというclass名で囲って左側はleft右側にはrightというclass名を付与

htmlCopy code<div class="clearfix">
    <div class="right">
        <img src="/img/thumb.jpg">
    </div>
    <div class="left">
        とあるクリエイターのブログレスポンシブWebデザインのサンプルコードです。とあるクリエイターのブログレスポンシブWebデザインのサンプルコードです。とあるクリエイターのブログレスポンシブWebデザインのサンプルコードです。
    </div>
</div>

CSS

片方固定の場合は先に固定要素の幅と高さを取得し固定値で設定。
固定要素を先に記述し固定しない要素側で高さ分をマイナスしてあげるとうまくいきました。

cssCopy code.clearfix:before,
.clearfix:after{
    content: '';
    display: table;
    clear: both;
}
.clearfix{*zoom: 1;}
.left{
    width: 200px;
    float:left;
    position: relative;
    top:-157px;
    margin-bottom:-157px;
    padding-right: 210px;
    *top:0;
    *padding-right: 10px;
    *display:inline;
}
.right{
    float:left;
    width: 200px;
}

画像のサイズを相対にする

HTML

htmlは先ほどと同様です。

htmlCopy code<div class="clearfix">
    <div class="right">
        <img src="/img/thumb.jpg">
    </div>
    <div class="left">
        とあるクリエイターのブログレスポンシブWebデザインのサンプルコードです。とあるクリエイターのブログレスポンシブWebデザインのサンプルコードです。とあるクリエイターのブログレスポンシブWebデザインのサンプルコードです。
    </div>
</div>

CSS

cssCopy code.clearfix:before,
.clearfix:after{
    content: '';
    display: table;
    clear: both;
}
.clearfix{*zoom: 1;}
.left{
    float:left;
    width: 68%;
}
.right{
    float:right;
    width: 28%;
}