web/responsive をテンプレートにして作成

開始行:
* レスポンシブWebデザイン [#gf98bcca] ** ブログの記事内の写真などの扱い（FluidImage） [#e5780596] #code_x{{ .textBody img { width: auto; max-width: 100%; height: auto; display: block; } }} - 表示領域に余裕がある場合は等倍で表示。 - 表示領域が狭い場合、幅に合わせて縮小。 - IE8はwidth:auto;入れればOK。IE7には非対応 - display: block;は無くても大丈夫な事が多い。 - [[Fluid Imageにしたい時のCSSの記述方法:http://keito7.co... ** CSS3 Media Queries(IE8以下NG) [#qe0a4323] #code_x{{ <meta name="viewport" content="width=device-width,initial... <meta name="viewport" content="width=device-width,initial... }} よりも #code_x{{ <meta name="viewport" content="initial-scale=1.0"> }} のほうが良さそう。 - [[たぶん、ほとんどの人は viewport meta タグの指定をまち... #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" fr... </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] - [[レスポンシブなウェブサイトを作ろう ドットインストール... - [[IE用のMedia Queries対策 コリス:http://coliss.com/arti...

終了行:
* レスポンシブWebデザイン [#gf98bcca] ** ブログの記事内の写真などの扱い（FluidImage） [#e5780596] #code_x{{ .textBody img { width: auto; max-width: 100%; height: auto; display: block; } }} - 表示領域に余裕がある場合は等倍で表示。 - 表示領域が狭い場合、幅に合わせて縮小。 - IE8はwidth:auto;入れればOK。IE7には非対応 - display: block;は無くても大丈夫な事が多い。 - [[Fluid Imageにしたい時のCSSの記述方法:http://keito7.co... ** CSS3 Media Queries(IE8以下NG) [#qe0a4323] #code_x{{ <meta name="viewport" content="width=device-width,initial... <meta name="viewport" content="width=device-width,initial... }} よりも #code_x{{ <meta name="viewport" content="initial-scale=1.0"> }} のほうが良さそう。 - [[たぶん、ほとんどの人は viewport meta タグの指定をまち... #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" fr... </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] - [[レスポンシブなウェブサイトを作ろう ドットインストール... - [[IE用のMedia Queries対策 コリス:http://coliss.com/arti...

ページ名: