web/responsive の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• web/responsive へ行く。
• web/responsive の差分を削除

#author("2025-04-20T18:14:33+09:00","default:nemusg.pad","nemusg.pad")
#author("2025-04-20T18:15:10+09:00","default:nemusg.pad","nemusg.pad")
* レスポンシブWebデザイン [#gf98bcca]

** ブログの記事内の写真などの扱い（FluidImage） [#e5780596]

#code_x{{
.textBody img {
	width: auto;
	max-width: 100%;
	height: auto;
	display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
}
}}

- 表示領域に余裕がある場合は等倍で表示。
- 表示領域が狭い場合、幅に合わせて縮小。
- IE8はwidth:auto;入れればOK。IE7には非対応
- display: block;は無くても大丈夫な事が多い。
- [[Fluid Imageにしたい時のCSSの記述方法:http://keito7.com/blog/2013/12/22/fluid-image/]]

** CSS3 Media Queries(IE8以下NG) [#qe0a4323]


#code_x{{
<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">
}}

よりも

#code_x{{
<meta name="viewport" content="initial-scale=1.0">
}}
のほうが良さそう。

- [[たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる - blog.鶯梭庵:http://blog.ousaan.com/index.cgi/links/20130925.html]]

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

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

** Tips [#a3f383e1]

*** 画像をはみ出さないようにする [#hba1ed0b]


#code_x{{
img {
    max-width: 100%;
}
}}

*** Youtube（iframe）を対応させる（IE6-8OK） [#ab0a7dfb]

#code_x{{
<div class="movie">
<iframe src="http://www.youtube.com/embed/XvannIjPtbQ" frameborder="0"></iframe>
</div>
}}

#code_x{{
.movie {
    position: relative;
    height: 0;
    padding-top: 56.25%; /# 16:9 #/
}
.movie iframe {
    height: 100%;
    position: absolute;
    left:0;
    top:0;
    width:100%;
}
}}

** 参考 [#k75af4a0]

- [[レスポンシブなウェブサイトを作ろう ドットインストール:http://dotinstall.com/lessons/responsive_html]]
- [[IE用のMedia Queries対策 コリス:http://coliss.com/articles/build-websites/operation/css/css3-media-queries.html]]