初心者だけどPerlが大好き

コードが世界を変える!

レスポンシブWebデザイン講座

WEB製作

みなもすなる、レスポンシブWebデザインといふものを、われもしてみむとて、するなり
みんなが「めんどくさい」と騒いでいるレスポンシブWebデザイン。
まず、参考にしたのが、こちら。
ASCII.jp：ゼロから始めるレスポンシブWebデザイン入門 菊池 崇氏
http://ascii.jp/elem/000/000/700/700611/

手軽な改造の練習用に探して見つけたアドビのサイトがこちら。レスポンシブではありません。
いきなり最後のページからサンプルコードの完成品をダウンロードします
それを利用して、レスポンシブ化しました
Creating your first website – Part 1 Setting up your site and project files Adobe Developer Connection
https://helpx.adobe.com/dreamweaver/learn/tutorials/how-to/first-website-part6.html



改造後の　HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bayside Beat: Cable Cars</title>
<!-- スマートフォン -->
<link href="styles/phone.css" rel="stylesheet" type="text/css" media="only screen and (max-width:320px)">
<!-- タブレット -->
<link href="styles/tab.css" rel="stylesheet" type="text/css" media="only screen and (min-width:321px) and (max-width:768px)">
<!-- デスクトップ -->
<link href="styles/pc.css" rel="stylesheet" type="text/css" media="only screen and (min-width:769px)">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n6:default.js" type="text/javascript"></script>
<!--[if lte IE 8]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
  <header id="top">
    <h1 class="first" >Bayside Beat</h1>
    <nav id="mainnav">
      <ul>
        <li><a href="index.html" class="thispage">Home</a></li>
        <li><a href="sightseeing.html">Sightseeing</a></li>
        <li><a href="#">Eating Out</a></li>
        <li><a  href="#">What's On</a></li>
        <li><a href="#">Where to Stay</a><a href="#">Maps</a></li>
      </ul>
    </nav>
  </header>
  <div id="hero">
    <article >
      <h2>Be Where It&rsquo;s At</h2>
      <p>San Francisco is one of the most exciting and vibrant cities  on the planet. Bayside Beat is here to keep you informed of the best places to  see, where to eat, what to do, and where to lay down your weary head after an  action-packed day&#8212;or night&#8212;on the town.</p>
    </article>
    <figure > <img class="golden_gate" src="images/golden_gate.jpg"  alt="Golden Gate Bridge in San Francisco Bay"/> </figure>
  </div>
  <article id="main">
    <h2>Riding the Cable Cars</h2>
    <p>No visit to San Francisco is complete without a ride on the  iconic cable cars that climb up the vertiginous hills of the city. Of the  twenty-three lines established between 1873 and 1890, three remain: two routes  from downtown near Union Square to <a href="http://www.fishermanswharf.org/">Fisherman's Wharf</a>, and a third route along  California Street.</p>
    <figure class="centered"><img class="cable" src="images/cable_car1.jpg"  alt=""/>
      <figcaption>The cable car terminus near Union Square</figcaption>
    </figure>
    <figure class="hidden"><img src="images/golden_gate.jpg" width="400" height="266"  alt=""/>
      <figcaption>The cable car terminus near Union Square</figcaption>
    </figure>
    <p>The cable cars rely on cables running constantly beneath the  road&rsquo;s surface. The driver&#8212;or gripman&#8212;uses a lever to grip the cable to pull  the car and its passengers up the hill. The gripman requires not only great  strength, but also great skill. He needs to know where to release the cable to  coast over crossing cables and points. The conductor works in close cooperation  with the gripman, operating the brake at the rear of the car to prevent it from  running out of control on the downward slopes.</p>
    <p>Although the cable cars are now mainly a tourist attraction,  they&rsquo;re still used by local commuters to get to and from work. The California  Street line is particularly popular among commuters on weekdays.</p>
  </article>
  <aside id="sidebar">
    <h2>Cable Car Tips</h2>
    <p>A single ride on a cable car costs $6. If you plan to travel  around the city, it&rsquo;s often cheaper to buy a <a href="http://www.sfmta.com/cms/mfares/passports.htm">Muni Passport</a>, which gives you  unlimited rides on San Francisco&rsquo;s extensive public transport system, including  the cable cars (but not the <a href="http://www.bart.gov/">BART subway</a> system). Even a single-day passport  ($14) will save you money if you make a return trip, and stop off to visit  Chinatown one way.</p>
    <p>There are often long lines at the cable car terminus,  particularly on the Powell-Mason and Powell-Hyde routes. If you don&rsquo;t want to  wait, try walking a few stops along the route. The conductor usually leaves a  small number of places to pick up passengers on the way. The California Street  route is generally less crowded (but not as spectacular).</p>
  </aside>
  <footer>
    <p>&copy; Copyright 2013 Bayside Beat</p>
  </footer>
</div>
</body>
</html>

注意)掲載画像は、大きすぎたため三枚にして縦につなぎました







phone.css

@charset "utf-8";

/* @group reset */
* {
		padding: 0;
		margin: 0;
}

body {
		margin: 0px;
		color: #151515;
		font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}

a {
		text-decoration : none
}

ul, ol {
		list-style : none
}

/* @end */
#wrapper {
		background-color: #FFFFFF;
		width: 100%;
		max-width: 320px;
		margin: 0 auto;
}

h1, h2 {
		color: #3399CC;
		font-style: normal;
		font-weight: 600;
		font-family: source-sans-pro;
}

h1 {
		font-size: 36px;
		text-align: center;
		text-transform: uppercase;
		margin-top: 0px;
		margin-bottom: 0px;
}

h1.first {
		font-size: 36px;
		text-align: center;
		text-transform: uppercase;
		margin-top: 10px;
		margin-bottom: 0px;
}

h2 {
		font-size: 16px;
		text-align: center;
		text-transform: uppercase;
		margin-top: 0px;
		margin-bottom: 0px;
}

h2.short {
		font-size: 14px;
}

#top {
		width : 90%;
		margin : 0 auto;
}

#mainnav ul {
		overflow:hidden;
		display:inline;
		list-style-type: none;
}

#mainnav ul li {
		float: left;
		font-size :70%;
		width: 33.32%;
}

#mainnav ul li a {
		white-space:nowrap;
		display: block;
		background-color: #4D4D4D;
		text-align: center;
		color: #FFFFFF;
		text-transform: uppercase;
		padding-top: 6px;
		padding-bottom: 6px;
}

#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage {
		text-decoration: none;
		background-color: #43A6CB;
}

article, aside, figure, footer, header, nav {
		display: block;
}

#hero {
		clear:both;
		width : 90%;
		margin : 0 auto;
		text-align : center;
		background-color: #FAA356;
		color: #FFFFFF;
}

#hero h2 {
		margin : 0 auto;
		color: #FFFFFF;
		text-transform: uppercase;
}

#main {
		width : 90%;
		text-align : center;
		margin-right: auto;
		margin-bottom: 0;
		margin-left: auto;
}

#sidebar {
		width : 90%;
		margin : 0 auto;
		text-align : center
}

p {
		padding-left: 10px;
		padding-right: 10px;
		margin-bottom : 24px;
		text-align : left
}

img {
		max-width : 100%;
		height:auto;
		border-radius: 15px;
		margin-bottom:30px;
}

figure.centered {
		text-align: center;
		background-color: #FFFFFF;
		-webkit-box-shadow: 1px 1px 15px #999999;
		box-shadow: 1px 1px 15px #999999;
		border-radius: 15px;
		padding:10px 10px;
}

figure.hidden {
		display:none;
}

figcaption {
		clear:both;
		margin : 0 auto;
		display: block;
		text-align: center;
		font-weight: bold;
		font-size: 12px;
		margin-top:-20px;
}

figcaption.sightseeing {
		font-size: 12px;
		text-align: left;
		padding-left: 20px;
		margin-top:-20px;
}

footer {
		color:#fff;
		background-color : #6C3;
}

footer p {
		padding-top: 30px;
		padding-bottom: 30px;
		text-align : center;
		margin-bottom:0;
}

注意)掲載画像は、大きすぎたため三枚にして縦につなぎました







tab.css

@charset "utf-8";

/* @group reset */
* {
		padding: 0;
		margin: 0;
}

body {
		margin: 0px;
		color: #151515;
		font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}

a {
		text-decoration : none
}

ul, ol {
		list-style : none
}

/* @end */
#wrapper {
		background-color: #FFFFFF;
		width: 100%;
		min-width: 321px;
		max-width: 768px;
		margin: 0 auto;
}

h1, h2 {
		color: #3399CC;
		font-style: normal;
		font-weight: 600;
		font-family: source-sans-pro;
}

h1 {
		font-size: 36px;
		text-align: center;
		text-transform: uppercase;
		margin-top: 0px;
		margin-bottom: 0px;
}

h1.first {
		font-size: 36px;
		text-align: center;
		text-transform: uppercase;
		margin-top: 10px;
		margin-bottom: 0px;
}

h2 {
		font-size: 24px;
		text-align: center;
		text-transform: uppercase;
		margin-top: 0px;
		margin-bottom: 0px;
}

h2.short {
		font-size: 20px;
}

#top {
		width : 90%;
		margin : 0 auto;
}

#mainnav ul {
		overflow:hidden;
		display:inline;
		list-style-type: none;
}

#mainnav ul li {
		float: left;
		float: left;
		font-size :70%;
		width: 33.32%;
}

#mainnav ul li a {
		white-space:nowrap;
		display: block;
		background-color: #4D4D4D;
		text-align: center;
		color: #FFFFFF;
		text-transform: uppercase;
		padding-top: 6px;
		padding-bottom: 6px;
}

#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage {
		text-decoration: none;
		background-color: #43A6CB;
}

article, aside, figure, footer, header, nav {
		display: block;
}

#hero {
		clear:both;
		width : 90%;
		margin : 0 auto;
		text-align : center;
		background-color: #FAA356;
		color: #FFFFFF;
}

#hero h2 {
		margin : 0 auto;
		color: #FFFFFF;
		text-transform: uppercase;
}

#main {
		width : 90%;
		margin : 0 auto;
		text-align : center
}

#sidebar {
		width : 90%;
		margin : 0 auto;
		text-align : center
}

p {
		padding-left: 10px;
		padding-right: 10px;
		margin-bottom : 24px;
		text-align : left
}

img {
		max-width : 100%;
		margin:0 auto;
		margin-bottom : 24px;
		border-radius: 15px;
}

figure.centered {
		text-align: center;
		background-color: #FFFFFF;
		-webkit-box-shadow: 1px 1px 15px #999999;
		box-shadow: 1px 1px 15px #999999;
		border-radius: 15px;
		padding:10px 10px;
}

figure.hidden {
		text-align: center;
		margin-top:10px;
		background-color: #FFFFFF;
		-webkit-box-shadow: 1px 1px 15px #999999;
		box-shadow: 1px 1px 15px #999999;
		border-radius: 15px;
		padding:10px 10px;
}

figcaption {
		display: block;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		margin-top:-10px;
}

figcaption.sightseeing {
		display: block;
		clear:both;
		text-align: center;
		font-weight: bold;
		font-size: 12px;
		padding-left: 20px;
		margin-top:-10px;
}

footer {
		clear:both;
		color:#fff;
		background-color : #6C3;
}

footer p {
		padding-top: 30px;
		padding-bottom: 30px;
		text-align : center;
		margin-bottom:0;
}



pc.css

 @charset "utf-8";

/* @group reset */

* {
		padding: 0;
		margin: 0;
}

body {
		margin: 0px;
		color: #151515;
		font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}

#wrapper {
		background-color: #FFFFFF;
		width: 100%;
		min-width: 769px;
		max-width: 960px;
		margin: 0 auto;
}

a {
		text-decoration : none
}

ul, ol {
		list-style : none
}

/* @end */
 body {
		background-color: #EFF5F8;
}

#wrapper {
		background-color: #FFFFFF;
		width: 100%;
		min-width: 769px;
		max-width: 960px;
		margin: 0 auto;
}

h1, h2 {
		color: #3399CC;
		font-style: normal;
		font-weight: 600;
		font-family: source-sans-pro;
}

h1 {
		font-size: 72px;
		text-align: center;
		text-transform: uppercase;
		margin-top: 0px;
		margin-bottom: 0px;
}

#top {
		width : 100%;
		margin : 0 auto;
}

#mainnav ul {
		overflow:hidden;
		display:inline;
		list-style-type: none;
}

#mainnav ul li {
		float: left;
		font-size :90%;
		width: 16.651%;
}

#mainnav ul li a {
		white-space:nowrap;
		display: block;
		background-color: #4D4D4D;
		text-align: center;
		color: #FFFFFF;
		text-transform: uppercase;
		padding-top: 6px;
		padding-bottom: 6px;
}

#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage {
		text-decoration: none;
		background-color: #43A6CB;
}

article, aside, figure, footer, header, nav {
		display: block;
}

#hero {
		position: relative;
		clear: left;
}

#hero article {
		width: 36%;
		padding-left: 10px;
		padding-right: 10px;
		position: absolute;
		top: 40px;
		right: 43px;
		background-color: #FAA356;
		color: #FFFFFF;
		border-radius: 15px;
}

#hero h2 {
		color: #FFFFFF;
		text-transform: uppercase;
		margin-top: 5px;
		margin-bottom: -7px;
}

#hero img {
		max-width: 100%;
		height: auto;
}

#main {
		width: 58%;
		margin-left: 2%;
		float: left;
}

#sidebar {
		width: 34%;
		margin-left: 4%;
		float: left;
}

p {
		padding-left: 10px;
		padding-right: 10px;
		margin-bottom : 24px;
		text-align : left
}

p.pc {
		clear:both;
}

img {
		max-width : 100%;
		height:auto;
		margin-bottom:30px;
}

figure.centered {
		text-align: center;
		background-color: #FFFFFF;
		-webkit-box-shadow: 1px 1px 15px #999999;
		box-shadow: 1px 1px 15px #999999;
		border-radius: 15px;
		padding:20px 0;
}

figure.centered img {
		max-width : 100%;
		height:auto;
		border-radius: 15px;
		margin-bottom:30px;
}

figure.floatright {
		text-align: center;
		background-color: #FFFFFF;
		-webkit-box-shadow: 1px 1px 15px #999999;
		box-shadow: 1px 1px 15px #999999;
		border-radius: 15px;
		padding:20px 0;
}

figure.floatleft {
		text-align: center;
		background-color: #FFFFFF;
		-webkit-box-shadow: 1px 1px 15px #999999;
		box-shadow: 1px 1px 15px #999999;
		border-radius: 15px;
		padding:20px 0;
}

figure.hidden {
		display:none;
}

figcaption {
		display: block;
		clear:both;
		text-align: center;
		font-weight: bold;
		font-size: 14px;
}

figcaption.sightseeing {
		padding-left:10px;
}

footer {
		clear:both;
		color:#fff;
		background-color : #6C3;
}

footer p {
		padding-top: 30px;
		padding-bottom: 30px;
		text-align : center;
}

.floatleft {
		text-align: center;
}

.floatright {
		text-align: center;
		margin-left: 10px;
		float: right;
}

a {
		font-weight: bold;
		text-decoration: none;
}

a:link {
		color: #FF6600;
}

a:visited {
		color: #FF944C;
}

a:hover, a:active, a:focus {
		color: #7F3300;
		text-decoration: underline;
		margin-bottom:0;
}