2014-11-24
2014-11-24
可変レイアウトパターン:構造
可変レイアウトパターン
- Lサイズ:980px以上
- Mサイズ:600px~979px以上
- Sサイズ:599px以下
PICKUP STREAM HOME ABOUT CONTACT 1 AUG 海岸のデコレーション CATEGORY: 海と海岸と空 海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。 こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。 ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。 CATEGORIES 山と森林 海と海岸と空 都市と建築 地下 RECENT POSTS 海岸のデコレーション 風車と海風の関係 ツルを伸ばしてどこまでも 色とりどりの絨毯 休日に買い物にいくなら 高層ビルと風の関係 PICKUP STREAM Copyright © PICKUP STREAM, all rights reserved.
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="utf-8"> <title>Type A</title> <metaname="viewport"content="width=device-width"> <linkrel="stylesheet"href="css/style-l.css"> <linkrel="stylesheet"href="css/style-m.css"media="only screen and (min-width:600px) and (max-width:979px)"> <linkrel="stylesheet"href="css/style-s.css"media="only screen and (max-width:599px)"> <!-- Webフォントの設定 --> <linkhref='http://fonts.googleapis.com/css?family=Maven+Pro:900,400'rel='stylesheet'type='text/css'> <!--[if lt IE 9]> <link rel="stylesheet" href="style-l.css"> <![endif]--> </head> <body> <divid="container"> <divid="header"> <divid="site"> <h1><imgsrc="img/logo.png"alt="PICKUP STREAM"></h1> </div><!-- /#site --> <divid="iconmenu"> <ul> <li><ahref="url"><imgsrc="img/twitter.png"alt="Twitter"></a></li> <li><ahref="url"><imgsrc="img/facebook.png"alt="Facebook"></a></li> <li><ahref="url"><imgsrc="img/googleplus.png"alt="Google Plus"></a></li> <li><ahref="url"><imgsrc="img/rss.png"alt="RSS Feed"></a></li> </ul> </div><!-- /#iconmenu --> <divid="headerimg"> <imgsrc="img/header.jpg"alt=""> </div><!-- /#headerimg --> <divid="nav"> <ul> <li><ahref="#">HOME</a></li> <li><ahref="#">ABOUT</a></li> <li><ahref="#">CONTACT</a></li> </ul> </div><!-- /#nav --> </div><!-- /#header --> <divid="content"> <divclass="date"><span>1</span> AUG</div> <h2>海岸のデコレーション</h2> <divclass="cat">CATEGORY: <ahref="#">海と海岸と空</a></div> <p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p> <p><imgsrc="img/sand.jpg"alt="海岸線で生息する小さな植物"></p> <p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p> <p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p> </div><!-- /#content --> <divid="sidebar"> <divclass="menu"> <h3>CATEGORIES</h3> <ul> <li><ahref="#">山と森林</a></li> <li><ahref="#">海と海岸と空</a></li> <li><ahref="#">都市と建築</a></li> <li><ahref="#">地下</a></li> </ul> </div><!-- /.menu --> <divclass="menu"> <h3>RECENT POSTS</h3> <ul> <li><ahref="#">海岸のデコレーション</a></li> <li><ahref="#">風車と海風の関係</a></li> <li><ahref="#">ツルを伸ばしてどこまでも</a></li> <li><ahref="#">色とりどりの絨毯</a></li> <li><ahref="#">休日に買い物にいくなら</a></li> <li><ahref="#">高層ビルと風の関係</a></li> </ul> </div><!-- /.menu --> </div> <!-- /#sidebar --> <divid="footer"> <p>PICKUP STREAM</p> <small>Copyright © PICKUP STREAM, all rights reserved.</small> </div> <!-- /#footer --> </div> <!-- /#container --> </body> </html>
《style-l.css》
@charset "UTF-8"; /* layout */ #container { width: 960px; margin: auto; } #header { margin: 0 0 50px; } #content { width: 62.5%; float: left; } #sidebar { width: 31.25%; float: right; } #footer { clear: both; } /* #header */ #site { float: left; } #iconmenu { float: right; position: static; } #nav li { width: 120px; } /* #content */ .date { display: block; float: right; font-size: 16px; line-height: 1.2; padding: 8px 22px; border-radius: 55px / 48px; } .date span { display: block; font-size: 32px; line-height: 1; } #content h2 { font-size: 28px; } /* #footer */ #footer { padding-bottom: 20px; }
《style-m.css》
@charset "UTF-8"; /* layout */ #header { margin: 0 0 50px; } #content { width: 62.5%; float: left; } #sidebar { width: 31.25%; float: right; } #footer { clear: both; } /* #header */ #site { float: left; } #iconmenu { float: right; position: static; } #nav li { width: 120px; } /* #content */ .date { display: block; float: right; font-size: 16px; line-height: 1.2; padding: 8px 22px; border-radius: 55px / 48px; } .date span { display: block; font-size: 32px; line-height: 1; } #content h2 { font-size: 28px; } /* #footer */ #footer { padding-bottom: 20px; }
《style-s.css》
@charset "UTF-8"; /* layout */ body { margin: 24px 10px; font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif; } #header { margin: 0 0 15px; } #content { margin: 0 0 50px; } #sidebar { margin: 0 0 50px; } /* img */ img { max-width: 100%; height: auto; } /* #header */ #site h1 { margin: 0; line-height: 1; } #iconmenu { text-align: right; } #iconmenu ul { margin: 0; padding: 3px 0 0; } #iconmenu li { display: inline; list-style-type: none; float: left; margin-left: 5px; } #iconmenu img { border: none; } #headerimg img { vertical-align: bottom; } /* #nav */ #nav { font-family: 'Maven Pro', Helvetica, Arial, sans-serif; font-size: 14px; overflow: hidden; border-top: solid 1px #FFF; background-color: #000000; } #nav ul { margin: 0; padding: 0; } #nav li { list-style-type: none; float: left; } #nav li a { display: block; width: auto; padding: 5px 8px; border-right: solid 1px #FFF; color: #FFF; text-align: center; text-decoration: none; } #nav li a:hover { background-color: #0097D8; } /* #content */ .date { display: inline; background-color: #0097d8; padding: 3px 10px; border-radius: 5px; text-align: center; font-family: 'Maven Pro', Helvetica, Arial, sans-serif; font-weight: bold; font-size: 12px; line-height: 2.5; color: #FFF; } .date span { font-size: 12px; } #content h2 { font-size: 24px; border-bottom: solid 1px #AAA; margin: 0 0 6px; padding: 0 0 3px; } .cat { font-size: 14px; color: #666; } .cat a { text-decoration: none; color: #666; } #content p { line-height: 1.6; } /* #sibar */ .menu { margin-bottom: 50px; } .menu h3 { font-family: 'Maven Pro', Helvetica, Arial, sans-serif; font-size: 26px; color: #66C1E8; margin: 0 0 5px; } .menu ul { margin: 0; padding: 0; border-top: solid 1px #AAA; } .menu li { margin-bottom: 0; list-style: none; border-bottom: solid 1px #AAA; } .menu li a { display: block; font-size: 14px; text-decoration: none; color: #666; padding: 10px 0 10px 20px; background: url(img/listmark.png) no-repeat 0 50%; } .menu li a:hover { background-color: #B4F0FF; } /* #footer*/ #footer { font-family: 'Maven Pro', Helvetica, Arial, sans-serif; color: #FFF; background-color: #000; padding: 10px 10px 20px; } #footer p { margin: 0; } #footer small { font-size: 12px; font-weight: bold; display: block; } /* #iconmenu */ #container { position: relative; } #iconmenu { position: absolute; right: 8px; bottom: 6px; } #footer { padding-bottom: 60px; } #site, #iconmenu { float: none; }