CLOSE ×

MEMO

ちょっとした技術やツールの使用方法などを追加していきます。

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

更新日
経過日数
1395日
文字数
1337文字
所要時間
約3分
カテゴリー
まとめ HTML CSS レスポンシブ
古めのie(6や7)でも崩れない。レスポンシブWebデザインに使えるちょっとした小技まとめ shadow

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

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

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

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

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

サンプルコード

サンプルコードは横幅をパーセンテージ指定したブロック内で動かしています。
※メディアクエリーが使えないブラウザは固定ブロック確認しています。

横並び系

HTML

<div class="clearfix">
    <div class="right">
        <img src="/img/thumb.jpg">
    </div>
    <div class="left">
        とあるクリエイターのブログレスポンシブWebデザインのサンプルコードです。とあるクリエイターのブログレスポンシブWebデザインのサンプルコードです。とあるクリエイターのブログレスポンシブWebデザインのサンプルコードです。
    </div>
</div>
画像固定でテキスト成り行き

DEMO

とあるクリエイターのブログレスポンシブWebデザインのサンプルコードです。とあるクリエイターのブログレスポンシブWebデザインのサンプルコードです。とあるクリエイターのブログレスポンシブWebデザインのサンプルコードです。

CSS

.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;
}

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

画像もテキスト成り行き

DEMO

とあるクリエイターのブログレスポンシブWebデザインのサンプルコードです。とあるクリエイターのブログレスポンシブWebデザインのサンプルコードです。とあるクリエイターのブログレスポンシブWebデザインのサンプルコードです。

CSS

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

その他小技も今後追加していきたいと思います。

Trackback URL

https://t-cr.jpmemo/18/trackback/

RELATED

CONTACT

ご質問、ご意見などお気軽にお問い合わせください。

^