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

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

外部CSSを切り替える

head内に以下を記述

<linkrel="stylesheet"href="○○.css"media="only screen and (min-width:○○px)">

サイト全体共通＋スマートフォン用CSSを読み込み、次にタブレット用CSS、PC用CSSを読み込む。

今回制作したサイト

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

▼PCサイズ▼

▼タブレットサイズ▼

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

HTML

<!DOCTYPE HTML>
<htmllang="ja">
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width">
<title>PICKUP STREAM</title>
<linkrel="stylesheet"href="style-s.css">
<linkrel="stylesheet"href="style-m.css"media="only screen and (min-width:600px)">
<linkrel="stylesheet"href="style-l.css"media="only screen and (min-width:980px)">
<linkhref="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>

<divid="container">

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

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

<divid="wrapper">

<divid="content">

<sectionclass="content">
  <divid="date">
  <pclass="day">1</p>
  <pclass="month">AUG</p>
  </div>

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

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

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

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

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

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

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

</div><!-- /wrapper -->
<footer>
<divclass="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。
メディアクエリーに必須の↓を覚える。

<metaname="viewport"content="width=device-width"

レイアウトはdivでもOK。文章構造はHTML5で。
ブラウザ幅で外部CSSを切り替えた場合、その外部CSS内で@media～を使って幅ごとに切り替えることはできなかった。外なら外、中なら中で切り替える。

96's blog

WEBサイト制作科　６ヶ月コース

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

外部CSSを切り替える

今回制作したサイト

その他