レスポンシブweb デザイン
-PC/Tablet/Smartphone向けのサイトを一つのhtmlを実現

スタイルの振り分け

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

ポイント

●@media all and (min-width: px)
　を利用してデバイスで振り分け

●基本％で指定

●display:none; でデバイスごとに要素を変える

cssの例

/*共通の設定*/
body{
     font-family:Arial, Verdana, san-serif;
     width:95%;
     margin:0 auto;
}

/*スマホのスタイル*/
# headerNav{
     display:none;
}

/*タブレットのスタイル*/
@media all and (min-width: 480px){
     #footerNavLink{
          display:none;
     }

     #headerNav{
          display:block;
     }

     #footerNav{
          display:block;
     }
}
/*PCのスタイル*/
@media all and (min-width: 480px){
     #container{
          overflow:hidden;
     }

     #main{
          float:left;
          width:78%;
     }

     #sub{
          float:right;
          width:20%;
     }
}

スマホのViewport

この設定によって、仮想的に幅980px(iphone)として表示されるスマホの画面をスマホの画面サイズとして表示させる

<head>
<meta name=“viewport” content=“width=device-width, initial=1.0”>
</head>

iframeの埋め込み

<div style=“width: 75%; margin:  0 auto;”>
<div class=“movie”>
<iframe src=“http://www.youtube.com/embed/XvannIjPtQ” frameborder=“0”></iframe>
</div>
</div>

/* css　以下、ハック的手法*/

.movie{
     position: relative;
     height:0;
     padding-top:56.25%; /*16:9*/
     }

iframe{
     height:100%;
     position:absolute;
     left:0;
     top:0;
     width:100%;
     }