Responsive Web Design用のHTML5+CSS3のテンプレート素材
Post on:2011年9月14日
sponsors
iPhone, Androidのスマートフォンなどの小さいスクリーンから、デスクトップの大きいスクリーンまで、それぞれの表示サイズに合わせて最適なレイアウトを提供するHTML5+CSS3のテンプレートを紹介します。
サイズ変更時はレイアウトの一部がアニメーションで移動し、面白い仕掛けにも利用できそうです。
Create a Responsive Web Design Template
デモページ
[ad#ad-2]
上記キャプチャは、デモを幅1200pxで表示したものです。
以下、サイズ変更してみます。
デモページ：幅1024pxで表示
デモページ：幅768pxで表示
デモページ：幅480pxで表示
[ad#ad-2]
HTMLの構造
テンプレートはブログを想定して作成されています。
ヘッダ、ナビゲーション、特集記事、最近の記事、サイドバー、フッタ、とシンプルな構成です。
HTML: index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Onextrapixel - Responsive Web Design Template</title> <link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="media-queries.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> <link href='http://fonts.googleapis.com/css?family=Droid+Serif:700,400,400italic,700italic' rel='stylesheet' type='text/css'> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body id="home"> <div id="wrapper"> <header> <h1><a href="index.html">Site Title</a></h1> <h2>Tagline <span>&</span> Some clever comment about the company</h2> <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Portfolio</a> <a href="#">Blog</a> <a href="#">Contact</a> <div class="clearfix"></div> </nav> </header> <section id="main-content"> <div id="featured"> <h3>Featured Article :</h3> <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/> <a href="#">Continue Reading →</a></p> </div> <!-- END Featured --> <hr/> <div id="latest"> <section class="left-col"> <h3>Latest Articles :</h3><br/> <h4><a href="#">Blog 1</a></h4> <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. <a href="#">Continue Reading →</a></p> <h4><a href="#">Blog 2</a></h4> <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. <a href="#">Continue Reading →</a></p> <h4><a href="#">Blog 3</a></h4> <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. <a href="#">Continue Reading →</a></p> </section> <!-- END Left Column --> <aside class="sidebar"> <h4><a href="#">Archives</a></h4> <ul> <li><a href="#">July 2010</a></li> <li><a href="#">August 2010</a></li> <li><a href="#">September 2010</a></li> </ul> <br/> <h4><a href="#">Categories</a></h4> <ul> <li><a href="#">Articles</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Roundups</a></li> </ul> <br/> <h4><a href="#">Social</a></h4> <ul> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">RSS</a></li> <li><a href="#">Google+</a></li> </ul> </aside> </div> <!-- END Latest --> <div class="clearfix"></div> <hr/> <div id="about"> <h3>About</h3> <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.<br/><br/> Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> </div> </section> <hr/> <footer> <p>© 2011 - Responsive Website Template</p> </footer> </div> <!-- END Wrapper --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> </body> </html>
CSSのスタイリング
スタイルシートは3ファイルで構成されています。
CSS: reset.css
ブラウザのスタイルを初期化するスタイルシートです。
a, abbr, acronym, address, applet, article, aside, audio,
b, blockquote, big, body,
center, canvas, caption, cite, code, command,
datalist, dd, del, details, dfn, dl, div, dt,
em, embed,
fieldset, figcaption, figure, font, footer, form,
h1, h2, h3, h4, h5, h6, header, hgroup, html,
i, iframe, img, ins,
kbd,
keygen,
label, legend, li,
meter,
nav,
object, ol, output,
p, pre, progress,
q,
s, samp, section, small, span, source, strike, strong, sub, sup,
table, tbody, tfoot, thead, th, tr, tdvideo, tt,
u, ul,
var{
background: transparent;
border: 0 none;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline; }
CSS: media-queries.css
Media Queries用のスタイルシートです。
各サイズでの指定とimg要素を定義します。
@media screen and (max-width: 478px) {
h1 { font-size: 70px; padding: 1px; }
h2 { font-size: 13px; padding: 1px; }
body { font-size: 13px; }
}
@media screen and (max-width: 740px) {
.left-col { width: 100%; }
.sidebar { width: 100%; }
}
@media screen and (max-width: 480px) {
}
img {
max-width: 100%;
height: auto;
width: auto; /* ie8 */
}
CSS: style.css
メインとなるスタイルシートです。
サイドバーのレイアウト変更などにアニメーションが使用されています。
/*
Project Name: Create a Responsive Web Design Template
Author: Harry Atkins
Published on: http://www.onextrapixel.com/
*/
::-moz-selection { background-color: #91D8f7; color: #fff; }
::selection { background-color: #91D8f7; color: #fff; }
a { outline: 0; color: #222; text-decoration: none; }
a:hover { text-decoration: underline; }
p a:hover { color: #27B3CF; }
a:active { outline: none; position: relative; top: 2px; }
.clearfix { clear: both; }
/*------------------------------------*\
MAIN
\*------------------------------------*/
body {
background: #F9F9F9; color: #222; font-family: 'Droid Serif', serif; font-size: 16px;
-webkit-transition-property: font-size;
-moz-transition-property: font-size;
transition-property: font-size;
-webkit-transition-duration: 0.5s, 0.5s;
-moz-transition-duration: 0.5s, 0.5s;
transition-duration: 0.5s, 0.5s;
-webkit-transition-timing function: linear, ease-in;
-moz-transition-timing function: linear, ease-in;
transition-timing function: linear, ease-in;
}
#wrapper { margin: 10px auto; max-width: 980px; width: 90%; background: #fff; padding: 10px 0; }
header { padding: 3px; }
h1 { font-size: 90px; font-family: 'Droid Serif', serif; line-height: 75px; padding: 10px;
-webkit-transition-property: font-size;
-moz-transition-property: font-size;
transition-property: font-size;
-webkit-transition-duration: 0.5s, 0.5s;
-moz-transition-duration: 0.5s, 0.5s;
transition-duration: 0.5s, 0.5s;
-webkit-transition-timing function: linear, ease-in;
-moz-transition-timing function: linear, ease-in;
transition-timing function: linear, ease-in;
}
h1 a:hover { text-decoration: none; color: #27B3CF; }
h2 { font-family: 'Helvetica'; font-size: 18px; padding: 10px;
-webkit-transition-property: font-size;
-moz-transition-property: font-size;
transition-property: font-size;
-webkit-transition-duration: 0.5s, 0.5s;
-moz-transition-duration: 0.5s, 0.5s;
transition-duration: 0.5s, 0.5s;
-webkit-transition-timing function: linear, ease-in;
-moz-transition-timing function: linear, ease-in;
transition-timing function: linear, ease-in;
}
h3 { font-family: 'Droid Serif', serif; font-size: 30px; }
h4 { font-family: 'Droid Serif', serif; padding: 3px; margin: 5px 0 0 0; }
h4 a { text-decoration: underline; }
h4 a:hover { }
nav { background: #222; padding: 0; margin: 10px 0;}
nav a { color: #F9F9F9; display: block; float: left; padding: 10px; }
nav a:visited { color: #f9f9f9; }
nav a:hover { text-decoration: none; background: #27B3CF; }
nav a:active { position: relative; top: 0; }
.left-col { width: 70%; float: left; }
.sidebar { width: 20%; float: right; margin-bottom: 10px;
-webkit-transition-property: width;
-moz-transition-property: width;
transition-property: width;
-webkit-transition-duration: 0.5s, 0.5s;
-moz-transition-duration: 0.5s, 0.5s;
transition-duration: 0.5s, 0.5s;
-webkit-transition-timing function: linear, ease-in;
-moz-transition-timing function: linear, ease-in;
transition-timing function: linear, ease-in;
}
#featured { padding: 20px; }
#latest { padding: 20px; }
#about { padding: 20px; }
p { padding: 0 5px 0 5px; }
ul { list-style: none; }
ul li { margin: 0 5px; }
footer { padding: 5px; }
pre { overflow: scroll; font-size: 10px; }
sponsors
