HTML5とCSS3をページ全体or少しずつ導入するチュートリアル
Post on:2011年3月2日
sponsors
ウェブページの全体または試しに少しずつ、HTML5とCSS3を導入してみるために役立つチュートリアルを紹介します。
Tutorial: Case Study with Html5 + CSS3
デモページ
[ad#ad-2]
HTML5とCSS3を導入したページ全体のレイアウトは下記のようになります。
デモページの全体のキャプチャ
下記は各ポイントを意訳したものです。
全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。
ウェブページにHTML5を導入
デモページのHTMLの構造は、下記のようになっています。
HTML5：ページのベース
各エレメントを配置する前のHTMLのベースは、下記のようになります。
<!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> </body> </html>
HTML5：ヘッダ
HTML5の新要素の全てをサポートする目的ではないため、シンプルにheader, sectionを使用して実装します。
<header id="main-header">
<section id="block-twitter">
<p class="tweet-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.<span class="tweet-time">21 minutes ago via Twitter</span></p>
</section>
<section id="block-title">
<h1>Ferris Bueller</h1>
</section>
</header>
HTML5：コンテンツ
コンテンツ（#content）箇所の2カラムの実装です。
<div id="main-content">
<section id="content">
<section class="one-col">
<h3>Hey guys,</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="two-col">
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est culpa qui officia deserunt mollit anim id estmollit anim id est enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
<ul id="social-icons">
<li class="bt-twitter"><a href="#">Twitter</a></li>
<li class="bt-facebook"><a href="#">Facebook</a></li>
<li class="bt-linkedin"><a href="#">Linkedin</a></li>
</ul>
</section>
<section class="one-col">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<aside id="form">
<form action="template_submit" method="get">
<input id="name" name="name" type="text" class="textfield nome" placeholder="Escreva seu nome" >
<input id="email" name="email" type="text" class="textfield email" placeholder="Email">
<textarea id="message" name="message" type="textarea" placeholder="Mensagem"></textarea>
<input type="submit" value="Enviar" class="submit">
</form>
</aside>
</section>
HTML5：サイドバー
サイドバーには画像と動画を配置しています。
<section id="portfolio">
<figure>
<a href="#" class="link-thumbs"><img src="images/thumb-1.png" alt="Nome do projeto"></a>
<a href="#" class="link-thumbs"><img src="images/thumb-2.png" alt="Nome do projeto"></a>
<a href="#" class="link-thumbs"><img src="images/thumb-3.png" alt="Nome do projeto"></a>
<a href="#" class="link-thumbs"><img src="images/thumb-4.png" alt="Nome do projeto"></a>
<a href="#" class="link-thumbs"><img src="images/thumb-5.png" alt="Nome do projeto"></a>
<a href="#" class="link-thumbs"><img src="images/thumb-6.png" alt="Nome do projeto"></a>
</figure>
<video controls width="380" height="210" poster="images/placeholder.jpg">
<source src="video/video-1.mp4" type="video/mp4">
<object type="application/x-shockwave-flash" width="380" height="268" data="player.swf?file=video/video-1.mp4">
<param name="movie" value="player.swf?file=video/video-1.mp4">
</object>
</video>
</section>
</div>
HTML5：フッタ
フッタも極シンプルです。
<footer> <p>Design by Fabiano Meneghetti<br/> 2011 - Oficina Campus Party</p> </footer>
[ad#ad-2]
ウェブページにCSS3を導入
CSS3を導入している箇所は、下記の通りです。
CSS3はアニメーション機能も利用しているので、Chrome, Safariなどの対応ブラウザでご覧ください。
CSS：HTML5の対応
HTML5をサポートしていないブラウザ用に、使用しているHTML5の要素をblockでします。
@import url("reset.css");
/* New HTML5 elements */
article, aside, figure, footer, header, hgroup, nav, section {
display:block;
}
/* -------- */
CSS：基本のスタイルシート
基本的なエレメントのスタイルシートです。
body {
margin: 0;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-size: 13px;
line-height: 20px;
color: #5F5E59;
background: url(images/bg_body.jpg) left top repeat;
}
a:link, a:active, a:visited {
color: #305F9B;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
}
/* ID's */
header {
background: url(images/bg_header.jpg) left top repeat-x;
margin-bottom: 25px;
}
#block-twitter {
width: 700px;
height: 60px;
position: relative;
margin: 0 auto;
padding: 20px 200px 0 0;
}
#block-title {
width: 900px;
height: 80px;
position: relative;
margin: 0 auto;
padding-top: 25px;
}
#main-content {
width: 900px;
position: relative;
margin: 0 auto;
}
footer {
width: 900px;
position: relative;
margin: 0 auto;
clear: both;
padding: 30px 0;
background: url(images/img_star.png) left top repeat-x;
}
/* -------- */
CSS3：テキストシャドウ・マルチカラム
アニメーションでスライド
いよいよCSS3を使用します。
ここでは、ヘッダ箇所のテキストシャドウ、コンテンツのマルチカラムとスライドのアニメーションです。
/* Header */
#block-twitter p.tweet-text {
color: #FFF;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-size: 14px;
text-shadow: 0 -1px 0 #000;
}
#block-twitter span.tweet-time {
color: #E3BACA;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-size: 12px;
text-shadow: 0 -1px 0 #000;
padding-left: 6px;
}
header h1 {
width: 454px;
height: 53px;
background: url(images/img_ferris.png) left top no-repeat;
text-indent: -9000px;
margin: 0 auto;
}
/* -------- */
/* Text */
section#content {
width: 400px;
float: left;
text-shadow: 0 1px 0 #FFF;
padding-bottom: 40px;
}
section#content h3 {
margin-bottom: 15px;
color: #949691;
font-size: 18px;
font-weight: bold;
}
section#content p {
margin-bottom: 15px;
}
section#content section.two-col {
-moz-column-count: 2;
-moz-column-gap: 40px;
-webkit-column-count: 2;
-webkit-column-gap: 40px;
column-count: 2;
column-gap: 40px;
padding-bottom: 20px;
}
section#content section.two-col p {
font-size: 20px;
line-height: 28px;
}
ul#social-icons {
border-top: 2px dashed #AAA19F;
width: 180px;
height: 55px;
padding-top: 20px;
}
ul#social-icons li,
ul#social-icons li a {
width: 60px;
height: 55px;
float: left;
display: block;
text-indent: -9000px;
}
ul#social-icons li a:link,
ul#social-icons li a:active,
ul#social-icons li a:visited{
-webkit-transition: background 0.3s ease-out;
}
#social-icons li.bt-twitter a {
background: url(images/social_icons.png) 2px top no-repeat;
}
#social-icons li.bt-twitter a:hover {
background: url(images/social_icons.png) 2px -56px no-repeat;
}
#social-icons li.bt-facebook a {
background: url(images/social_icons.png) -59px top no-repeat;
}
#social-icons li.bt-facebook a:hover {
background: url(images/social_icons.png) -59px -58px no-repeat;
}
#social-icons li.bt-linkedin a {
background: url(images/social_icons.png) -121px top no-repeat;
}
#social-icons li.bt-linkedin a:hover {
background: url(images/social_icons.png) -121px -57px no-repeat;
}
/* -------- */
CSS3：フォーム
アニメーションで拡大
フォームにはデザイン面とユーザーのアクションによるアニメーションを設定します。
/* Form */
aside#form input.textfield,
aside#form textarea {
width: 380px;
padding-left: 8px;
margin-bottom: 10px;
border: 1px solid #CCC;
padding: 10px;
color: #6C595F;
-webkit-box-shadow:inset 1px 1px 2px #999;
-moz-box-shadow:inset 1px 1px 2px #999;
-khtml-box-shadow:inset 1px 1px 2px #999;
box-shadow:inset 1px 1px 2px #999;
-webkit-transition: border 0.4s ease-out;
-webkit-transition:-webkit-transform .2s ease-in;
}
aside#form textarea {
height: 100px;
}
aside#form input.textfield:hover,
aside#form textarea:hover {
border: 1px solid #999;
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
}
aside#form input.textfield:focus,
aside#form textarea:focus {
outline: none;
border: 1px solid #6C595F;
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
}
#form form input.submit {
background: #6C595F;
font-size: 13px;
font-weight: bold;
color: #FFF;
padding: 5px 10px;
border: none;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;
float: right;
-webkit-transition: background 0.4s ease-out;
cursor: pointer;
}
#form form input.submit:hover {
background: #333;
}
/* -------- */
CSS3：ポートフォリオ
アニメーションで回転
ポートフォリオでの仕掛けは、JavaScriptもFlashも使用していません。
/* Portfolio */
section#portfolio {
width: 410px;
float: right;
padding-bottom: 40px;
}
#portfolio figure a.link-thumbs {
width: 190px;
height: 156px;
display: block;
float: left;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 1px 1px 2px #999;
-box-box-shadow: 1px 1px 2px #999;
-khtml-box-shadow: 1px 1px 2px #999;
box-shadow: 1px 1px 2px #999;
margin: 0 20px 20px 0;
opacity: .6;
-webkit-transition: opacity 0.4s ease-out;
-webkit-transition: -webkit-transform 0.4s ease-out;
}
#portfolio figure a.link-thumbs:hover {
opacity: 1;
-webkit-transform:rotate(-15deg);
}
#portfolio figure a.link-thumbs:nth-child(2n) {
margin-right: 0;
}
#portfolio video {
background: #C9CEC8;
padding: 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 1px 1px 2px #999;
-box-box-shadow: 1px 1px 2px #999;
-khtml-box-shadow: 1px 1px 2px #999;
box-shadow: 1px 1px 2px #999;
clear: both;
}
/* -------- */
CSS3：フッタ
フッタにも少しだけCSS3を使用します。
/* Footer */
footer p {
font-size: 11px;
line-height: 18px;
background: url(images/logo_abduzeedo.png) right center no-repeat;
text-shadow: 0 1px 0 #FFF;
}
/* -------- */
sponsors
