96's blog

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

レスポンシブWebデザイン02（MediaQuery）

レスポンシブ

ブログ・HTML5の勉強「Media Queries基礎」

PC上で各デバイス表示（Mac・Winやスマートフォン・タブレット）に切り替え

  • safariを使用。
  • 右上の歯車アイコンのメニューから[設定]を開く。
  • [詳細]タブの一番下の[メニューバーに”開発”メニューを表示]にチェック。
  • メニューバー（表示していない場合は、再び歯車のメニューから[メニューバーを表示]）から[開発]→[ユーザーエージェント]
  • 表示したいデバイスを選択。

このサイトが詳しいです。

レスポンシブにする方法

  • レイアウトをスマートフォン、タブレット、ＰＣで切り替えるには、ブラウザの幅によってCSSの内容が変わる記述をする（＝Media Query）。
  • 各デバイスに切り替わるところをブレイクポイントという。

Media Queryを構築する

  • CSSで各デバイス共通項目とスマートフォン対応の記述してから、タブレットとＰＣの設定する。
  • ブレイクポイントの設定は、
タブレット
@media only screen and (min-width: 481px) { ここにCSSを書く }

ＰＣ
@media only screen and (min-width: 769px) { ここにCSSを書く }

clearfix

overflow:hidden;を使わないのはなぜだろう

今回制作したサイト

▼ＰＣサイズで表示▼

f:id:webtm2013:20131030135114p:image

▼タブレットサイズで表示▼

f:id:webtm2013:20131030135115p:image:w500

▼スマートフォンサイズで表示▼

f:id:webtm2013:20131030135116p:image

HTML

<!DOCTYPE HTML>
<htmllang="ja">
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width">
<title>sample1</title>
<linkrel="stylesheet"href="./css/style.css"media="all">
<!--[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="stage">

<header>
  <h1>Media Queries</h1>
</header>

<nav>
  <ul>
  <li><ahref="#">menu1</a></li>
  <li><ahref="#">menu2</a></li>
  <li><ahref="#">menu3</a></li>
  </ul>
</nav>

<divid="content">

<aside>
  <sectionclass="menu1">
    <h2>Contents Menu1</h2>
  </section>
  <sectionclass="menu2">
    <h2>Contents Menu2</h2>
  </section>
</aside>

<article>
  <section>
    <h3>2013.10.14</h3>
    <p>レスポンシブWebデザインのサイトを制作するには、メディアクエリを自由に使いこなせることが必要です。きちんと把握するようにしましょう。</p>
  </section>
  <section>
    <h3>2013.10.12</h3>
    <p>メディアクエリに加えて、フルードイメージとフルードグリッドの利用も必須です。あらゆるデバイスに対応する際に重要な知識になります。</p>
  </section>
  <section>
    <h3>2013.09.25</h3>
    <p>このページはメディアクエリの使い方を解説するための簡易的なページです。構成は非常にシンプルですが、メディアクエリの使い方がよくわかると思います。</p>
  </section>
  <section>
    <h3>2013.09.10</h3>
    <p>今後はレスポンシブWebデザインのサイト制作が非常に重要になることが考えられます。とても奥の深い制作方法ですので、さまざまな情報を参照して制作方法を学んでください。</p>
  </section>
  <section>
    <h3>2013.09.09</h3>
   <p>PC向けでは２カラム構成ですが、スマートフォン向けでは１カラム構成になるように設定しています。</p>
  </section>
</article>

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

<footer>
<small>&copy; 2013 Webデザインの勉強</small>
</footer>

</div><!-- /stage -->

</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
body , div, header, nav, aside, article, footer, section, h1, h2, h3, p, ul, li {
  padding: 0;
  margin: 0;
}
ul{
  list-style:none;
}
a{
  text-decoration:none;
  color:#ffffff;
}
a:hover{
  color:#333333;
}
body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  color:#333333;
  font-size:14px;
  line-height:1.6;
}

#stage{
  width:100%;
}
header{
  background:#333333;
  padding:10px 0;
  text-align:center;
  margin-bottom:10px;
}
header h1{
  font-family:  Carbon Block;
  font-size:36px;
  color:#ffffff;
  line-height:1em;
}
nav{
  width:100%;
  background:#1c9961;
  margin-bottom:10px;
}
nav ul li{
  text-align:center;
  padding: 0 5px;
  line-height:2em;
  border-bottom:solid 1px #ffffff;
}
nav ul li a{
  display:block;
}
#content{
  width:80%;
  margin: 0 auto;
  clear:both;
  margin-bottom:10px;
  overflow:hidden;
}
#content aside section{
  height:120px;
  background:#44cc00;
  padding:10px;
  margin-bottom:10px;
}
#content aside section h2{
  color:#ffffff;
  font-size:20px;
  font-weight:500;
}
#content article section{
  border-bottom:1px solid #aaaaaa;
  margin-bottom:10px;
}
#content article section h3{
  color:#009966;
  font-size:18px;
  font-weight:500;
}
footer{
  background: #333333;
  color:#ffffff;
  padding:5px;
  text-align:center;
  clear:both;
}
/* タブレット向けのスタイル：481px ～ 768px */
@media only screen and (min-width: 481px) {
nav ul{
  padding-left:8%;
  overflow:hidden;
}
nav ul li{
  width:7em;
  line-height:3em;
  border-left:solid 1px #ffffff;
  border-bottom:none;
  float:left;
}
nav ul li:last-child{
  border-right:solid 1px #ffffff;
}
#content aside section.menu1{
  width:44%;
  float:left;
}
#content aside section.menu2{
  width:44%;
  float:right;
}
}
/*  PC向けのスタイル：769px～960px */
@media only screen and (min-width: 769px) {
#content aside{
  width:30%;
  margin-right:20px;
  float:left;
}
#content aside section.menu1,
#content aside section.menu2{
  width:100%;
  float:left;
}
#content article{
  width:65%;
  float:right;
}
}

その他

  • HTML5の記述は上位表示しやすい。
  • 来年は勧告があるので必須。
  • divを多用するとスマートフォンで崩れる恐れあり。