古めのie(6や7)でも崩れない。レスポンシブWebデザインに使えるちょっとした小技まとめ
![古めのie(6や7)でも崩れない。レスポンシブWebデザインに使えるちょっとした小技まとめ](/_next/image?url=https%3A%2F%2Ft-cr.jp%2Fassets%2Fimg%2Fpost%2Fthumb%2Frs.jpg&w=3840&q=75)
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
古めのie(6や7)でも崩れない。
レスポンシブWebデザインに使えるちょっとした小技まとめをメモしました。
最近では「CSS3」で登場した「display
かなり有効的に使用させていただいています。
ただ、PCサイトでレスポンシブで対応するとなると、古めのie(6とか7)で
レイアウト結構崩れることがあります。
そこで横幅相対でも、使えるレスポンシブWebデザイン
を作るときに
有効的に使えるCSS
の記述をまとめてみました。
横並びレイアウト
画像のサイズを固定する
HTML
clearfix
というclass名で囲って左側はleft
右側にはright
というclass名を付与
html<div class="clearfix">
<div class="right">
<img src="/img/thumb.jpg">
</div>
<div class="left">
とあるクリエイターのブログレスポンシブWebデザインのサンプルコードです。とあるクリエイターのブログレスポンシブWebデザインのサンプルコードです。とあるクリエイターのブログレスポンシブWebデザインのサンプルコードです。
</div>
</div>
CSS
片方固定の場合は先に固定要素の幅と高さを取得し固定値で設定。
固定要素を先に記述し固定しない要素側で高さ分をマイナスしてあげるとうまくいきました。
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;
}
画像のサイズを相対にする
HTML
htmlは先ほどと同様です。
html<div class="clearfix">
<div class="right">
<img src="/img/thumb.jpg">
</div>
<div class="left">
とあるクリエイターのブログレスポンシブWebデザインのサンプルコードです。とあるクリエイターのブログレスポンシブWebデザインのサンプルコードです。とあるクリエイターのブログレスポンシブWebデザインのサンプルコードです。
</div>
</div>
CSS
css.clearfix:before,
.clearfix:after{
content: '';
display: table;
clear: both;
}
.clearfix{*zoom: 1;}
.left{
float:left;
width: 68%;
}
.right{
float:right;
width: 28%;
}
記事Article
もっと見る- article
Dockerの利用していないゴミを掃除しディスクスペースを解放するいくつかのやり方を紹介
- article
Next.js のバンドルサイズを可視化する@next/bundle-analyzer の紹介
- article
VSCodeでTypescriptファイルのimport補完で相対パスではなくエイリアスするための設定
- article
UUIDより短いユニークなIDを生成できるnpmライブラリnanoidの使い方
- article
【解決方法】TypeScript発生したTS2564 エラーの対処
- article
express で IP を取得する際などに利用する req.connection 非推奨(deprecated)の対処