2014-12-11
2014-12-11
メディアクエリ基礎
Media Queries
Media Queries menu1 menu2 menu3 Contents Menu1 Contents Menu2 2014.10.07 レスポンシブWebデザインのサイトを制作するには、メディアクエリを自由に使いこなせることが必要です。きちんと把握するようにしましょう。 2014.10.06 メディアクエリに加えて、フルードイメージとフルードグリッドの利用も必須です。あらゆるデバイスに対応する際に重要な知識になります。 2014.10.03 このページはメディアクエリの使い方を解説するための簡易的なページです。構成は非常にシンプルですが、メディアクエリの使い方がよくわかると思います。 2014.10.02 今後はレスポンシブWebデザインのサイト制作が非常に重要になることが考えられます。とても奥の深い制作方法ですので、さまざまな情報を参照して制作方法を学んでください。 2014.10.01 PC向けでは2カラム構成ですが、スマートフォン向けでは1カラム構成になるように設定しています。 © 2014 Webデザインの勉強
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="utf-8"> <metaname="viewport"content="width=device-width"> <linkrel="stylesheet"href="css/style.css"> <title>メディアクエリ</title> <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <divid="container"> <header> <h1>Media Queries</h1> </header><!-- /header --> <nav> <ul> <li><ahref="#">menu1</a></li> <li><ahref="#">menu2</a></li> <li><ahref="#">menu3</a></li> </ul> </nav><!-- /nav --> <divid="content"> <aside> <section> <h2>content Menu1</h2> </section> <section> <h2>content Menu2</h2> </section> </aside> <article> <section> <h3>2014.10.07</h3> <p>レスポンシブWebデザインのサイトを制作するには、メディアクエリを自由に使いこなせることが必要です。きちんと把握するようにしましょう。</p> </section> <section> <h3>2014.10.06</h3> <p>メディアクエリに加えて、フルードイメージとフルードグリッドの利用も必須です。あらゆるデバイスに対応する際に重要な知識になります。</p> </section> <section> <h3>2014.10.03</h3> <p>このページはメディアクエリの使い方を解説するための簡易的なページです。構成は非常にシンプルですが、メディアクエリの使い方がよくわかると思います。</p> </section> <section> <h3>2014.10.02</h3> <p>今後はレスポンシブWebデザインのサイト制作が非常に重要になることが考えられます。とても奥の深い制作方法ですので、さまざまな情報を参照して制作方法を学んでください。</p> </section> <section> <h3>2014.10.01</h3> <p>PC向けでは2カラム構成ですが、スマートフォン向けでは1カラム構成になるように設定しています。</p> </section> </article> </div> <footer> <small>© 2014 Webデザインの勉強</small> </footer><!-- /footer --> </div><!-- /#container --> </body> </html>
@charset "UTF-8"; /* reset */ html, body, div, h1, h2, h3, p, small, dl, dt, dd, ul, li, article, aside, footer, header, nav, section { margin:0; padding:0; } ul { list-style:none; } a { text-decoration: none; } /* 共通設定およびスマートフォン向けのスタイル */ body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; width: 100%; font-size: 16px; line-height: 1.5; background: #FFF; } header { text-align: center; background: #333; } header h1 { font-size: 2.3em; padding: 0.4em 0 0.4em 0; margin: 0 0 0.2em; color: #FFF; } nav { background: #B9DEF3; overflow: hidden; } nav ul li { width: 100%; text-align: center; line-height: 2.0em; color: #FFF; border-bottom: 1px solid #FFF; } nav li a { color: #000; font-weight: bold; } nav li a:hover { color: #FFF; background: #379DEC; display: block; } #content { width: 80%; margin: 1em auto 1em; } #content h1{ font-weight: bold; } section h2 { color: #FFF; font-size: 1.2em; } section h3 { font-size: 1.1em; } section { margin: 0 0 1em 0; } article p { margin-left: 2em; } aside > section { height: 130px; background: #1D80EF; padding: 15px 0 0 20px; } article > section { padding-bottom: 10px; border-bottom: 1px solid #CCC; } footer { width: 100%; text-align: center; } /* Media Queries による切り替え */ /* タブレット向けのスタイル:481px ~ 768px */ @media only screen and (min-width: 481px) { nav { padding: 0 0 0 7%; } nav ul { } nav ul li { float:left; width: 100px; text-align: center; line-height: 3.0em; border-left: 1px solid #FFF; border-right: 1px solid #FFF; border-bottom: none; } aside section { width: 90%; float: left; display: block; } } /* PC向けのスタイル:769px~960px */ @media only screen and (min-width: 769px) { article { width: 65%; float: right; } aside { width: 30%; float: left; } footer { clear: both; }