レスポンシブWebデザイン
- 概要
- PC/Tablet/SmartPhone向けのサイトを1つのHTMLで実現するためのテクニック(CSSでレイアウトを調整する)
HTMLファイルの作成
<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レスポンシブwebデザイン</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0/build/cssreset/cssreset-min.css">
</head>
<body>
<div id="header">
<div id="footerNavLink"><a href="">+</a></div>
<h1>Header</h1>
<div id="headerNav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
<div id="container">
<div id="main">
<h2>Main</h2>
<img src="cafe.jpg">
<p>Hello.Hello.Hello.Hello.Hello.</p>
</div>
<div id="sub">
<h2>Sub</h2>
<P>Hello.Hello.Hello.Hello.Hello.</p>
</div>
</div>
<div id="footer">
<p>Footer</p>
<div id="FooterNav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
CSSファイルの作成
charset "utf-8"
body {
font-family: Arial,Verdana,sans-serif;
}
# header {
background: red;
}
# footer {
background: green;
}
# container {
}
# main {
background: orange;
}
# sub {
background: yellow;
}
スタイルの振り分け
- メディアクエリーを使い、画面幅に合わせてスタイルを振り分ける
- スマートフォン: 320px-480px
- タブレット: 480px-768px
- PC: 768px以上
共通部分の設定
body {
font-family: Arial,Verdana,sans-serif;
width: 95%;
margin: 0 auto;
}
# headerNav ul {
list-style: none;
over-flow: hidden;
}
# headerNav li {
float: left;
width: 33%;
text-align: center;
}
img {
max-width: 100%;
}
- 左右に余白を作り、中央揃えにする。
- headerをリスト形式ではなく横に並べる。
スマートフォン向けのスタイル
# headerNav {
display: none;
}
<div id="footerNavLink"><a href="#footerNav">+</a></div>
- ヘッダーメニューを消して、フッターメニューへリンクするようにする。
<meta name="viewport" content="width=device-width,initial=1.0>
- スマートフォンデバイスに最適な表示領域を調整する。
タブレット向けのスタイル
@media all and (min-width: 480px) {
#footerNavLink {
display: none;
}
#headerNav {
display: block;
}
#footerNav {
display: none;
}
- 画面サイズが480px以上のとき、footerNavLinkとfooterNavを消して、headerNavは表示を固定させる。
PC向けのスタイル
@media all and (min-width: 768px) {
#container {
overflow: hidden;
}
#main {
float: left;
width: 78.0612245%;
}
#sub {
float: right;
width: 20.4081633%;
}
- 画面を広げていくとsubがmainの横に表示される。
- mainのwidthの計算方法「main(765px) / all(980px) * 100」
- subのwidthの計算方法「sub(200px) / all(980px) * 100」
iframeを埋め込む
- サイトにyoutubeを表示させる。
<div style="width: 75%; margin: 0 auto;">
<div class="movie">
<iframe src="http://www.youtube.com/embed/XvannIPtbQ"frameborder="0"></iftame>
</div>
</div>
.movie {
position: relative;
height: 0;
padding-top: 56.25%;
}
iframe {
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
- 「padding-top: 56.25%;」iframeで表示する箇所のサイズの比率を「16:9」とした場合、56.25%と指定すると、画面に縦幅と基準に「16:9」の比率に調整される。