レスポンシブ WEB デザイン

レスポンシブWEBデザインでは、まず、head要素に 
<meta name="viewport" content="width=device-width,initial-scale=1.0">
と書きます。

Rsample0.html(じゅげむじゅげむ)

　画面に制約があるため、大きさによって内容を表示させたり、させなかったりしたい場合が あります。 HTMLファイルのstyle要素の中に、 

 .pc-eff { display:block; }     
 .sp-eff { display:none; }      

 @media screen and (max-width: 640px){
   .pc-eff { display:none; }    
   .sp-eff { display:block; }   
 }

と書きましょう。 次に、body要素の中に、 

<div class="sp-eff">"sp-eff"はスマホで有効です。</div> 
<div class="pc-eff">"pc-eff"はPCで有効です。</div>

と書きます。すると、PCの画面では、

"pc-eff"はPCで有効です。

スマホの画面では、

"sp-eff"はスマホで有効です。

と表示されます。結果は、 Rsample1.htmlで確認できます。 ブラウザの幅を変えて、表示が切り替わることを確かめてください。

以下に様々なサンプルを紹介します。