レスポンシブ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%;
}