HTML5の文書構造とCSS3の技法でデザインする
HTML5とCSS3を使うことで実現できる事
- 画像を使わずに背景に角丸を作れる
- 背景をグラデーションにできる
- 背景を透過にできる
- 背景の角度を調整できる
- before、afterの指定ができて、指定の前に（後に）何か置く事ができる
- 奇数番目、偶数番目に対して指定ができる
など。
practice.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Green Leaf</title> <link rel="stylesheet" href="css/base.css" media="all"> <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <style> article section figure { float: right; margin: 0 0 15px 15px; } </style> <![endif]--> <!--[if lte IE 9]> <style> article section { filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fff', endColorstr='#dfdfdf'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fff', endColorstr='#dfdfdf')" } </style> <![endif]--> <!--[if lte IE 9]> <style> nav ul { filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#777', endColorstr='#333'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#777', endColorstr='#333')"; } article section { filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fff', endColorstr='#dfdfdf'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fff', endColorstr='#dfdfdf')"; } </style> <![endif]--> <!--[if lte 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 #fff; } nav ul li a:hover { background-color: #017acd; } </style> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <!--▼#container --> <div id="container"> <!--▼header --> <header id="pageheader"> <hgroup> <h1>Green Leaf</h1> <h2>生活を楽しくする情報をもっと身近にお届けします</h2> <p id="billboard"><img src="img/sky.jpg"></p> </hgroup> <!-- ▼nav --> <nav> <ul> <li><a href="#">トップ</a></li> <li><a href="#">森の工房について</a></li> <li><a href="#">季節のイベント</a></li> <li> <a href="#">お問い合わせ</a></li> <li><a href="#">ブログ</a></li> </ul> </nav> <!--▲nav end--> </header> <!-- ▲header end--> <!-- ▼content--> <article itemscope itemtype="#"> <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="img/photo01.jpg" alt="森の中の様子" width="250" height="165"> <figcaption>工房へ続く森の中の道</figcaption></figure> <p> 森の工房は、木々のあふれる森の中にあります。森の入口から細い小道を通り、森の奥に進んでください。しばらくすると、森の中にある小さな丘に出てきます。その丘の上にある木造の建物が「森の工房」です。</p> <p>この丘はちょうど森の中央に位置しており、森の中を散歩したり、自然の中で遊んだりするときにも、ちょうどいい拠点になります。森全体を見渡すことも可能で、夜は満点の星空を満喫できます。 </p> </section> <section> <h1>四季を楽しむことができる場所</h1> <figure><img src="img/photo02.jpg" alt="冬の風景 " width="250" height="165"> <figcaption>季節ごとに変わる景色</figcaption> </figure> <p>森の工房では、春、夏、秋、冬と、四季折々の自然を楽しむことができます。 春には、雪解け水の中から芽を出す新しい命や、新緑の鮮やかな緑。夏には、緑濃く茂った木々の間を吹き抜けるさわやかな風に、川の清流での水遊び。秋には、森全体が赤や黄色に染まり、色鮮やかな紅葉に包まれます。木々の葉が落ち、冬になると、ここは雪に覆われて一面の銀世界になります。</p> </section> <section> <h1>工房のまわりにいる動物たち</h1> <figure><img src="img/photo03.jpg" alt="キツネさん" width="250" height="160" itemprop="image"> <figcaption>工房の近くに姿を見せた鹿</figcaption> </figure> <p>工房のまわりにはいろいろな動物たちが棲んでいます。キツネ、タヌキ、イタチ、ウサギ、リス、シカ、イノシシ…。森の中で出会うこともあれば、ひょこっと工房に顔を出すこともあります。土や雪の上に残った足跡から、正体を探るのも楽しみです。</p> <p>ただし、森の工房では彼らに餌をやることはしていません。自然にあるがままの姿で、いっしょに生活していきたいと考えているからです。彼らに出会ったときには、びっくりさせないように遠くからそっと眺めてあげてください。</p> </section> </div> </article> <!--▼footer --> <footer> <p><small>© Green Leaf, All rights reserved.</small></p> </footer> <!-- ▲footer end --> </div> <!--▲#container--> </body> </html>
base.css
@charset "UTF-8";
/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre,
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"ヒラギノ角ゴ Pro W3",
"Hiragino Kaku Gothic Pro",
"Hiragino Kaku Gothic Pro W3",
"メイリオ",
Meiryo,
Osaka,
"ＭＳ Ｐゴシック",
"MS PGothic",
sans-serif;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ul, ol {
list-style-type: none; /* マーカーを消す */
}
a {
text-decoration: none; /* 下線を消す */
}
img {
border: 0;
}
img, input {
vertical-align: bottom;
}
/* HTML5 */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}
/* body */
body {
font-size: 16px;
text-align: left;
background-color:#e5e5e5;
}
/* link */
a {
color: #017acd;
}
/* container */
#container {
width: 760px;
margin: 0 auto;
background-color:#fff;
padding:0 40px;
-webkit-box-shadow:0 0 30px #bbb;
box-shadow:0 0 30px #bbb;
background-image:url(../img/circle.png), url(../img/circle1.png);
background-repeat:no-repeat;
background-position:20px 330px, 100px 410px;
background-size:94px 94px, 30px 30px;
position:relative;
overflow:hidden;
}
/* header */
header#pageheader {
background: none;
margin: 0 0 30px 0;
padding: 15px 0 0 0;
}
header#pageheader h1 {
float: left;
font-size: 2.5em;
font-family: 'Righteous', cursive
}
header#pageheader h2 {
color: #666;
font-size: 0.75em;
font-weight: normal;
text-align: right;
padding: 20px 0 0 0;
}
header#pageheader#summary{
padding-left:250px;
}
nav {
clear: both;
}
/* nav */
nav ul {
font-size: 0.75em;
margin: 0 0 10px 0;
height: 30px;
background-color: #005087;
border-radius:6px;
background: -webkit-gradient(linear, left top, left bottom, from(#777), color-stop(50%, #444), color-stop(50%, #333), to(#555));
background:-webkit-linear-gradient(#777 0%, #444 50%, #333 51%, #555 100%);
background:-moz-linear-gradient(#777 0%, #444 50%, #333 51%, #555 100%);
background:-o-linear-gradient(#777 0%, #444 50%, #333 51%, #555 100%);
background:-ms-linear-gradient(#777 0%, #444 50%, #333 51%, #555 100%);
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
width: 120px;
line-height: 30px;
text-decoration: none;
text-align: center;
color: #fff;
/* background-color: #005087; */ /*このli aの背景色指定があると、左側が角丸になりません。*/
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:6px 0 0 6px; /* 角丸順序 左上→右上→右下→左下 左上から時計回り。*/
}
/* content */
article {
width: auto;
}
/*----------------------------------------
一世代前のWebKit系ブラウザに対応させる
------------------------------------------*/
article header{
border:solid 1px #aaa;
margin:20px 0 10px 0;
padding:18px;
border-radius:10px;
-webkit-box-shadow:0 2px 3px #ccc, 0 0 4px 3px #fff inset;
box-shadow:0 2px 5px #ccc, 0 0 4px 3px #fff inset;
background-color:rgba(255,255,255,0.4);
}
article header h1 {
color: #000;
font-size: 1.8em;
font-weight: normal;
line-height: 45px;
background: none;
}
article section {
clear: both;
border:solid 1px #aaa;
margin:20px 0 10px 0;
padding:18px 18px 10px 18px;
border-radius:10px;
overflow:hidden;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dfdfdf));
background:-webkit-linear-gradient(0deg, #fff 0%, #dfdfdf 100%);
background:-moz-linear-gradient(0deg,#fff 0%, #dfdfdf 100%);
background:-o-linear-gradient(0deg,#fff 0%, #dfdfdf 100%);
background:-ms-linear-gradient(0deg,#fff 0%, #dfdfdf 100%);
-webkit-box-shadow:0 2px 3px #ccc, 0 0 4px 3px #fff inset;
box-shadow:0 2px 5px #CCC, 0 0 4px 3px #fff inset;
}
article section h1 {
background: none;
font-size: 24px;
font-weight: normal;
line-height: 22px;
margin: 30px 0 20px 0;
}
article p {
font-size: 0.875em;
line-height: 1.6;
margin: 10px 14px 0 14px;
}
/* footer */
footer {
clear: both;
color: #888;
margin: 25px 0 0 0;
padding: 8px 0 8px 0;
border-top:solid 1px #aaa;
}
small:before {
content:'GREEN LEAF';
display: block;
width:200px;
padding:10px 0;
background-color:#800;
color:#fff;
font-family:'Righteous', cursive;
font-size: 1.0em;
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);
}
/* image */
figure {
margin: 0;
}
article section:nth-of-type(odd) figure {
float: right;
margin: 0 0 15px 15px;
}
article section:nth-of-type(even) figure {
float: left;
margin: 0 15px 15px 0;
}
article section figcaption {
color: #666;
font-size: 10px;
display: block;
margin: 10px 0 0 0;
}
article section:nth-of-type(odd) figcaption {
text-align: right;
}
header#postheader p{
}
header#postheader h1{
padding-left:16px;
width:280px;
}
#billboard{
padding-bottom:5px;
}
