Bootstrap使えばある程度よいかもしれないんですが、理解するために勉強です。あ、あと、単純にドットインストールの数をこなしたい的なところもあります。
メディアクエリ
@mediaを利用して条件に合致した場合のみCSSを適用するようにする。min-widthの部分は条件設定。下記の場合、480pxより横幅が狭ければ基本スタイルに加えてスマホのスタイルだけが読み込まれる。480-768pxならば真ん中、768px以上なら最後だけ読み込まれる。
/* 基本的なスタイル */
...
/* スマホのスタイル */
#headerNav {
display: none;
}
/* タブレットのスタイル */
@media all and (min-width: 480px) {
#footerNavLink {
display:none;
}
#headerNav {
display: block;
}
#footerNav {
display: none;
}
}
/* PCのスタイル */
@media all and (min-width: 768px) {
#container {
overflow: hidden;
}
#main {
float: left;
width: 78.061225%;
}
#sub {
float: right;
width: 20.4081633%;
}
}
非表示
display: none;で非表示。
#headerNav {
display: none;
}
viewport
スマホなどのデバイスに対応しているよということを宣言。(参考)
<meta name="viewport" content="width=device-width, initial=1.0">
iframeの表示
iframeの表示にはコツが必要らしい。今回はYoutubeの例。最上位のdivはちょっと手抜きでhtmlファイル内に記載されている様子。
html
<div style="width: 75%; margin:0 auto">
<div class="movie">
<iframe width="560" height="315" src="http://www.youtube.com/embed/PlqVgkVq1gw" frameborder="0" allowfullscreen></iframe>
</div>
</div>
.movie {
position: relative;
height: 0;;
padding-top: 56.25%; /* youtube 16:9 */
}
*css*
iframe {
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
