レスポンシブWebデザイン02(MediaQuery)
ブログ・HTML5の勉強「Media Queries基礎」
PC上で各デバイス表示(Mac・Winやスマートフォン・タブレット)に切り替え
- safariを使用。
- 右上の歯車アイコンのメニューから[設定]を開く。
- [詳細]タブの一番下の[メニューバーに”開発”メニューを表示]にチェック。
- メニューバー(表示していない場合は、再び歯車のメニューから[メニューバーを表示])から[開発]→[ユーザーエージェント]
- 表示したいデバイスを選択。
このサイトが詳しいです。
レスポンシブにする方法
Media Queryを構築する
タブレット @media only screen and (min-width: 481px) { ここにCSSを書く } PC @media only screen and (min-width: 769px) { ここにCSSを書く }
clearfix
overflow:hidden;を使わないのはなぜだろう
今回制作したサイト
▼タブレットサイズで表示▼
▼スマートフォンサイズで表示▼
HTML
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>sample1</title> <link rel="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> <div id="stage"> <header> <h1>Media Queries</h1> </header> <nav> <ul> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> </ul> </nav> <div id="content"> <aside> <section class="menu1"> <h2>Contents Menu1</h2> </section> <section class="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向けでは2カラム構成ですが、スマートフォン向けでは1カラム構成になるように設定しています。</p> </section> </article> </div><!-- /content --> <footer> <small>© 2013 Webデザインの勉強</small> </footer> </div><!-- /stage --> </body> </html>
@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; } }