ブラウザ画面の横幅が900ピクセル以上の場合にのみ3段組みに関するスタイルシートの設定を@media only screen and (min-width:900px){~}で囲みます。@mediaは「メディアクエリ」と呼ばれる機能で、スタイルシートの適用先となる閲覧環境を指定することができます。ここでは、「min-width:900px」と指定して、ブラウザ画面の横幅が900ピクセル以上の場合に適用するようにしています。
ファイル名:sample_a/sample_a.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>森の工房 [Forest Studio] - 森の工房について</title> <link href='http://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'> <style> body {font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif; background-color: #e5e5e5; margin: 0} a {color: #017acd} /* コンテナ */ div#container {width: 900px; margin-left: auto; margin-right: auto; background-color: #ffffff; padding:0 40px; -webkit-box-shadow: 0px 0px 50px #bbbbbb; box-shadow: 0px 0px 10px #666666; background-image: url(circle.png), url(circle-yellow.png); background-repeat: no-repeat; background-position: 15px 420px, 90px 500px; background-size: 94px 94px, 30px 30px; position: relative; overflow: hidden} /* ヘッダー */ header#pageheader {background:none; padding: 15px 0 0} header#pageheader h1 {margin: 0; float: left; font-size: 40px; font-weight: normal; font-family: 'Righteous', cursive} header#pageheader h2 {color: #666666; font-size: 0.75em; margin: 0; padding-top: 20px; text-align: right; font-weight: normal} nav {clear: both} /* メニュー */ nav ul {font-size: 0.75em; margin-top: 0; margin-bottom: 10px; margin-left: 0; padding-left: 0; height: 30px; background-color: #333333; border-radius: 5px; background: -webkit-gradient(linear, left top, left bottom, from(#777777), color-stop(50% #444444), color-stop(51% #333333), to(#555555)); background: -webkit-linear-gradient(#777777 0%, #444444 50%, #333333 51%, #555555 100%); background: -moz-linear-gradient(#777777 0%, #444444 50%, #333333 51%, #555555 100%); background: -o-linear-gradient(#777777 0%, #444444 50%, #333333 51%, #555555 100%); background: -ms-linear-gradient(#777777 0%, #444444 50%, #333333 51%, #555555 100%)} nav ul li {list-style-type: none; float: left} nav ul li a {display: block; width: 120px; line-height: 30px; text-decoration: none; text-align: center; color: #ffffff; border-right: solid 1px rgba(255,255,255,0.2)} nav ul li a:hover {background-color: rgba(1,122,205,0.3)} nav ul li:first-of-type a:hover {border-radius: 5px 0 0 5px} /* コンテンツ */ article {width: auto; margin-left: auto; margin-right: auto} article header {border: solid 1px #aaaaaa; margin: 20px 0 10px; padding: 18px; border-radius: 5px; -webkit-box-shadow: 0px 2px 3px #cccccc, 0px 0px 4px 3px #ffffff inset; box-shadow: 0px 2px 3px #cccccc, 0px 0px 4px 3px #ffffff inset; background-color: rgba(255,255,255,0.5)} article header h1 {background:none; font-size: 28px; color: #000000; line-height: 45px; padding-left: 0; margin: 0; font-weight:normal; float: left} article header p {font-size: 16px; color: #444444; margin-left: 300px} article section {clear: both; border: solid 1px #aaaaaa; margin: 20px 0 10px; padding: 18px; border-radius: 5px; overflow: hidden; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dfdfdf)); background: -webkit-linear-gradient(#ffffff 0%, #dfdfdf 100%); background: -moz-linear-gradient(#ffffff 0%, #dfdfdf 100%); background: -o-linear-gradient(#ffffff 0%, #dfdfdf 100%); background: -ms-linear-gradient(#ffffff 0%, #dfdfdf 100%); -webkit-box-shadow: 0px 2px 3px #cccccc, 0px 0px 4px 3px #ffffff inset; box-shadow: 0px 2px 3px #cccccc, 0px 0px 4px 3px #ffffff inset} article section h1 {background:none; font-size: 24px; font-weight: normal; line-height: 22px; padding-left: 0; margin-top: 0; margin-bottom: 20px; margin-left: 0; margin-right: 0} article p {font-size: 0.75em; line-height: 1.6; margin-top: 10px; margin-left: 0; margin-right: 0} /* フッター */ footer {color: #888888; margin-top: 25px; padding-top: 8px; padding-bottom: 8px; clear: both; border-top: solid 1px #aaaaaa} small {font-size: 0.75em; font-style: normal; text-align: left; display: block} small::before {content: 'GREEN LEAF'; display: block; width: 200px; padding: 10px 0; background-color: #880000; color: #ffffff; font-family: 'Righteous', cursive; font-size: 16px; text-align: center; position: absolute; right: 0; bottom: 0; -webkit-transform: rotate(-45deg) translate(62px, 20px); -moz-transform: rotate(-45deg) translate(62px, 20px); -o-transform: rotate(-45deg) translate(62px, 20px); -ms-transform: rotate(-45deg) translate(62px, 20px)} /* 画像の配置 */ figure {margin: 0} article section:nth-of-type(odd) figure {float: right; margin-left: 15px; margin-bottom: 0} article section:nth-of-type(even) figure {float: left; margin-right: 15px; margin-bottom: 0} article section figcaption {color: #666666; font-size: 10px; display: block} article section:nth-of-type(odd) figcaption {text-align: right} /* ===== PC用の設定 ===== */ @media only screen and (min-width:900px){ /* 3段組み */ article div[itemprop="articleBody"] {display: -webkit-box; display: -moz-box; display: -ms-box} article section {width: 288px; margin-right: 18px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; overflow: visible} article section h1 {height: 48px; line-height: 1.2} article section:nth-of-type(1n) figure {float: none; margin: 0} article section:nth-of-type(1n) figcaption {text-align: center; margin-bottom: 15px} /* 3段組み IE8~9 & Opera */ article section {clear: none; float: left; position: relative} article section + section + section {margin-right: 0} } </style> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <style> article section figure {float: right; margin-left: 15px; margin-bottom: 15px} nav ul li a {border-right: solid 1px #ffffff} nav ul li a:hover {background-color: #017acd} </style> <![endif]--> <!--[if lt IE 10]> <style> nav ul {filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#777777',endColorstr='#333333'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#777777',endColorstr='#333333')"} article section {filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff',endColorstr='#dfdfdf'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff',endColorstr='#dfdfdf')"} </style> <![endif]--> <!--[if lt IE 8]> <style> article section {width: 250px} article section figure {margin-left: 0} </style> <![endif]--> </head> <body> <!-- コンテナ --> <div id="container"> <!-- ヘッダー --> <header id="pageheader"> <hgroup> <h1>Green Leaf</h1> <h2>生活を楽しくする情報をもっと身近にお届けします</h2> </hgroup> <!-- メニュー --> <nav> <ul> <li><a href="index.html">トップ</a></li> <li><a href="about.html">森の工房について</a></li> <li><a href="event.html">季節のイベント</a></li> <li><a href="contact.html">お問い合わせ</a></li> <li><a href="http://blog.xxx.xxx/">ブログ</a></li> </ul> </nav> <img src="header.jpg" alt=""> </header> <!-- コンテンツ --> <article itemscope itemtype="http://schema.org/Article"> <header id="postheader"> <h1 itemprop="name">森の工房について</h1> <p id="summary" itemprop="description">Forest Studioでは、自然の中にある「森の工房」を運営しています。森の工房では、四季を通してイベントを開催したり、さまざまな商品の開発を行っています。</p> </header> <div itemprop="articleBody"> <section> <h1>森の中にある工房</h1> <figure><img src="photo01.jpg" alt="森の中の様子" width="250" height="165"> <figcaption>工房へ続く森の中の道</figcaption> </figure> <p>森の工房は、木々のあふれる森の中にあります。森の入口から細い小道を通り、森の奥に進んでください。しばらくすると、森の中にある小さな丘に出てきます。その丘の上にある木造の建物が「森の工房」です。</p> <p>この丘はちょうど森の中央に位置しており、森の中を散歩したり、自然の中で遊んだりするときにも、ちょうどいい拠点になります。森全体を見渡すことも可能で、夜は満点の星空を満喫できます。</p> </section> <section> <h1>四季を楽しむことができる場所</h1> <figure><img src="photo02.jpg" alt="冬の風景" width="250" height="165"> <figcaption>季節ごとに変わる景色</figcaption> </figure> <p>森の工房では、春、夏、秋、冬と、四季折々の自然を楽しむことができます。<br /> 春には、雪解け水の中から芽を出す新しい命や、新緑の鮮やかな緑。夏には、緑濃く茂った木々の間を吹き抜けるさわやかな風に、川の清流での水遊び。秋には、森全体が赤や黄色に染まり、色鮮やかな紅葉に包まれます。木々の葉が落ち、冬になると、ここは雪に覆われて一面の銀世界になります。</p> </section> <section> <h1>工房のまわりにいる動物たち</h1> <figure><img src="photo03.jpg" alt="キツネさん" width="250" height="165" itemprop="image"> <figcaption>工房の近くに姿を見せたキツネ</figcaption> </figure> <p>工房のまわりにはいろいろな動物たちが棲んでいます。キツネ、タヌキ、イタチ、ウサギ、リス、シカ、イノシシ…。森の中で出会うこともあれば、ひょこっと工房に顔を出すこともあります。土や雪の上に残った足跡から、正体を探るのも楽しみです。</p> <p>ただし、森の工房では彼らに餌をやることはしていません。自然にあるがままの姿で、いっしょに生活していきたいと考えているからです。彼らに出会ったときには、びっくりさせないように遠くからそっと眺めてあげてください。</p> </section> </div> </article> <!-- フッター --> <footer> <small>Copyright (C) Green Leaf, All rights reserved.</small> </footer> </div> </body> </html>