レスポンシブWEBデザイン!

お久しぶりの書き込ですが、何故なら、最近MTは更新くらいしか触ってないので。

Wordpressを使うことが多くなりました。。。ちょっとした構築はそっちの方が便利。
でも、大きなカスタマイズをする時はMovable Typeの方が好み。なので、これからもMTカスタマイズしていくとおもいます。

と、いいながら。

今日の話題はPCとスマホ同じファイルを使って表示する、そう。

レスポンシブWEBデザイン

についてです。

仕事でもう何回もレスポンジブ対応してみて、だんだんどうやればやりやすいかわかってきました。

とにもかくにも
head内に入れるものとして



<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<link rel="stylesheet" media="all" type="text/css" href="./css/style.css" />
<!-- ※デフォルトのスタイル(style.css) -->
<link rel="stylesheet" media="all" type="text/css" href="./css/smart.css" />
<!-- ※スマートフォン用のスタイル(smart.css) -->
<!--[if IE ]>
<link rel="stylesheet" type="text/css" href="./css/ie.css">
<![endif]-->


まず、viewportのmeta
普通のPC向けのcssと、スマホ向けcss。
必要があればタブレット向けも作ります。

それから重要。
IE対応。

そして外部CSSファイルの用意。
PC向けのCSSは
-----------------

@charset "utf-8";

@media screen and (min-width: 481px){
img{
max-width: 100%;
height: auto;
width /***/:auto; 
}

/*-------------481px以上 pc用レイアウト--------------*/

}


-----------------
スマホ向けは


@charset "utf-8";

@media screen and (max-width:480px){

img{
max-width: 100%;
height: auto;
width /***/:auto; 
}

/*-------------480px以下 スマホ用レイアウト--------------*/

}


で、
@media
がIEでは認識されないので、普通のCSS、「./css/ie.css」を用意するわけです。

進め方としては、
「このあとスマホ対応を考えていく作業があるぞ~」
と思いながら先にPCを組み立てていくのが楽です。

コメントの投稿

トラックバック

トラックバック:URL http://watase.bz/mt/mt-tb.cgi/138