レスポンシブWebデザイン03（デバイスごとの外部CSSの切り替え）

レスポンシブ

ブログ・HTML5の勉強「実践レイアウトパターン（1）」

外部CSSを切り替える

  • head内に以下を記述
<link rel="stylesheet" href="○○.css" media="only screen and (min-width:○○px)">

今回制作したサイト

  • style-s.css、style-m.css、style-l.cssを使って切り替える。

▼PCサイズ▼

▼タブレットサイズ▼

▼スマートフォンサイズ▼

HTML

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>PICKUP STREAM</title>
<link rel="stylesheet" href="style-s.css">
<link rel="stylesheet" href="style-m.css" media="only screen and (min-width:600px)">
<link rel="stylesheet" href="style-l.css" media="only screen and (min-width:980px)">
<link href="http://fonts.googleapis.com/css?family=Maven+Pro:900,400" rel="stylesheet" type="text/css">
<!--[if Ite IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![end if]-->
<!--[if Ite IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"><script>
<![endif]-->
</head>
<body>

<div id="container">

<header>
  <h1><a href="#"><img src="img/logo.png" alt=""></a></h1>
  <ul>
  <li><a href="#"><img src="img/twitter.png" alt="twitter" width="35" height="35"></a></li>
  <li><a href="#"><img src="img/facebook.png" alt="facebook" width="35" height="35"></a></li>
  <li><a href="#"><img src="img/googleplus.png" alt="google plus" width="35" height="35"></a></li>
  <li><a href="#"><img src="img/rss.png" alt="rss" width="35" height="35"></a></li>
  </ul>
  <figure><img src="img/header.jpg" alt="" ></figure>
  </header>

<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>

<div id="wrapper">

<div id="content">

<section class="content">
  <div id="date">
  <p class="day">1</p>
  <p class="month">AUG</p>
  </div>

<h2>海岸のデコレーション</h2>
<p class="category">CATEGORY: 海と海岸と空</p>
<p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p>

<figure><img src="img/sand.jpg" alt=""></figure>

<p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p>

<p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p>
</section>

</div><!-- /content-->

<aside>
<section class="aside">
<h2>CATEGORIES</h2>
<ul>
<li><a href="#">山と森林</a></li>
<li><a href="#">海と海岸と空</a></li>
<li><a href="#">都市と建築</a></li>
<li><a href="#">地下</a></li>
</ul>
</section>

<section class="aside">
<h2>RECENT POSTS</h2>
<ul>
<li><a href="#">海岸のデコレーション</a></li>
<li><a href="#">風車と海風の関係</a></li>
<li><a href="#">ツルを伸ばしてどこまでも</a></li>
<li><a href="#">色とりどりの絨毯</a></li>
<li><a href="#">休日に買い物にいくなら</a></li>
<li><a href="#">高層ビルと風の関係</a></li>
</ul>
</section>
</aside>

</div><!-- /wrapper -->
<footer>
<div class="footer">
<p>PICKUP STREAM</p>
<small>Copyright &copy; PICKUP STREAM, all rights reserved.</small>
</div>
</footer>

</div><!-- /container -->

</body>
</html>

CSS（共通＋スマートフォン対応）

@charset "utf-8";
/* ----リセット・全体------*/
body , div, header, nav, section, article, aside, footer, figure, h1, h2, p, ul, li ,img, small{
  padding: 0;
  margin: 0;
}
ul{
  list-style:none;
}
img{
  vertical-align:bottom;
  border:none;
}
a{
  text-decoration:none;
}
body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  color:#333;
}
/* ------レイアウト---------*/
#container{
  margin-top:5px;
}
/* ------ヘッダー----------*/
header{
  width:100%;
}
header h1{
  margin: 0 auto;
  width:360px;
  height:39px;
  margin-bottom:5px;
  display: block;
}
header h1 img{
  vertical-align:baseline;
}
header ul{
  margin: 0 auto;
  margin-top:2px;
  margin-bottom:5px;
  width:140px;
  overflow:hidden;
}
header ul li{
  float:right;
}
header figure{
}
header figure img{
  width:100%;
}
/* ------ナビゲーション----------*/
nav{
  width:100%;
  background: #000000;
  margin-bottom:20px;
}
nav ul{
  text-align:center;
}
nav ul li{
  width:100%;
  line-height:30px;
  border-top:solid 1px #ffffff;
}
nav ul li:last-child{
  border-bottom:solid 1px #ffffff;
}
nav ul a{
  display:block;
  font-size:14px;
  color:#ffffff;
}
/* ------ラッパー---------*/
#wrapper{
  margin:0 auto;
  overflow:hidden;
}
/* ------コンテンツ（日付）----------*/
#content #date{
  background:#0099dc;
  text-align:center;
  border-radius:50%;
  height:35px;
  width:60px;
  padding:10px;
  float:right;
}
#content #date .day{
  color:#ffffff;
  font-size:24px;
  line-height:24px;
  margin-bottom:0;
}
#content #date .month{
  color:#ffffff;
  font-size:14px;
  font-weight:600;
  line-height:14px;
  margin-bottom:0;
}
/* ------コンテンツ（セクション）---------*/
#content section{
  margin-bottom:20px;
}
#content section h2{
  font-size: 22px;
  border-bottom:solid 1px #d0d0d0;
}
#content section p{
  font-size:14px;
  margin-bottom:10px;
}
#content section p.category{
  color:#777777;
}
#content section figure {
  margin-bottom:10px;
}
#content section figure img{
  width:100%;
}
/* ------サイドバー---------*/
aside{
  width:100%;
}
aside section{
  margin-bottom:40px;
}
aside h2,aside li{
  line-height:40px;
  border-bottom:solid 1px #d0d0d0;
}
aside h2{
  font-size:20px;
  color:#0097d8;
}
aside li{
  text-indent:18px;
  background:url(img/listmark.png) no-repeat left 13px;
}
aside li a{
  font-size:14px;
  color:#666666;
  display:block;
}
aside li a:hover{
  background:#adf0ff url(img/listmark.png) no-repeat left 13px;;
}
/* ------フッター----------*/
footer{
  width:100%;
  height:50px;
  padding-top:10px;
  background:#000000;
  color:#ffffff;
}
footer p{
  font-size:14px;
}
footer small{
  font-size:12px;
  font-weight:600;
}

CSS（タブレット対応）

@charset "utf-8";
/* CSS Document */

header{
  margin: 0 auto;
  overflow:hidden;
}
header h1{
  float:left;
}
header ul{
  width:140px;
  float:right;
}
nav{
  border-top:solid 1px #ffffff;
  border-bottom:solid 1px #ffffff;
}
nav ul{
  overflow:hidden;
}
nav ul li{
  width:150px;
  line-height:25px;
  border-top:none;
  border-right:solid 1px #ffffff;
  float:left;
}
nav ul li:last-child{
  border-bottom:none;
}
#content{
  width:68%;
  float:left;
}
aside{
  width:28%;
  float:right;
}

CSS（PC対応）

@charset "utf-8";
/* CSS Document */
#content section figure img{
width:500px;
}
header{
  width:960px;
  margin: 0 auto;
}
header figure img{
  width:960px;
}
nav ul{
  padding-right:2px;
  width:960px;
  margin: 0 auto;
  border-left:solid 1px #ffffff;
}
#wrapper{
  margin:0 auto;
  width:960px;
}

footer .footer{
  margin:0 auto;
  width:960px;
}

その他

  • 制作段階では手でブラウザの幅を動かしてレイアウトを確認するが、実際にサイトを使う人はデバイスごとのサイズで見るだけなので、各サイズでの崩れがなければOK。
  • メディアクエリーに必須の↓を覚える。
<meta name="viewport" content="width=device-width"
  • レイアウトはdivでもOK。文章構造はHTML5で。
  • ブラウザ幅で外部CSSを切り替えた場合、その外部CSS内で@media〜を使って幅ごとに切り替えることはできなかった。外なら外、中なら中で切り替える。