レスポンシブWebデザイン

ブログの記事内の写真などの扱い(FluidImage)

img{
width:auto; /* IE8 */
max-width: 100%;
height: auto;
display: block;
}
  • 表示領域に余裕がある場合は等倍で表示。
  • 表示領域が狭い場合、幅に合わせて縮小。
  • IE8はwidth:auto;入れればOK。IE7には非対応
  • display: block;は無くても大丈夫な事が多い。

CSS3 Media Queries(IE8以下NG)

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta name="viewport" content="width=device-width,initial=1.0">

よりも

<meta name="viewport" content="initial-scale=1.0">

のほうが良さそう。

/*
スマホ: 320px - 480px 
タブレット: 480 - 768px
PC: 768px以上
*/
/* smartphone */

/* tablet */
@media all and (min-width: 480px) {
}
/* pc */
@media all and (min-width: 768px) {
}
 

Tips

画像をはみ出さないようにする

img {
    max-width: 100%;
}

Youtube(iframe)を対応させる(IE6-8OK)

<div class="movie">
<iframe src="http://www.youtube.com/embed/XvannIjPtbQ" frameborder="0"></iframe>
</div>
.movie {
    position: relative;
    height: 0;
    padding-top: 56.25%; /* 16:9 */
}
.movie iframe {
    height: 100%;
    position: absolute;
    left:0;
    top:0;
    width:100%;
}

参考


最終更新: 2017-10-15 (日) 22:57:02