HTML5+CSS3―CSS3でデザイン

webサイト制作 HTML5 授業



CSS3でデザイン


  • CSS3を使いデザインする



ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>森の工房についてGreen Leaf</title>

<link rel="stylesheet" href="css/style72.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>
<![endif]-->
<style>
article,aside,dialog,figure,footer,header,hgroup,menu,nav,secton{ display: block;}
</style>

<!-- InternetExplorer 9 以下に対応させる -->
<!--[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]-->

</head>
<body>
<!-- ▼#container -->
<div id="container">

<!-- ▼header -->
<header id="pageheader">
<hgroup>
<h1>Green Leaf</h1>
<h2>生活を楽しくする情報をもっと身近にお届けします</h2>
</hgroup>

<!-- ▼nav -->
<nav>
<ul>
<li><a href="index.html">トップ</a></li>
<li><a href="about.html">森の工房について</a></li>
<li><a href="event.html">季節のイベント</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
<li><a href="http://blog.xxx.xxx/">ブログ</a></li>
</ul>
</nav>
<!-- ▲nav -->

<img src="img2/yama.jpg" width="900" height="300" alt="">

</header>
<!-- ▲header -->
<!-- ▼content -->
<article itemscope itemtype="#">
<header id="postheader">
<h1 itemprop="name">森の工房について</h1>

<p id="summary" itemprop="description">Forest Studioでは、自然の中にある「森の工房」を運営しています。森の工房では、四季を通してイベントを開催したり、さまざまな商品の開発を行っています。</p>
</header>

<div itemprop="articleBoby">
<section>
<h1>森の中にある工房</h1>
<figure>
<img src="images/photo01.jpg" alt="森の中の様子" width="250" height="165">
<figcaption>工房へ続く森の中の道</figcaption>
</figure>

<p>森の中の様子 森の工房は、木々のあふれる森の中にあります。森の入口から細い小道を通り、森の奥に進んでください。しばらくすると、森の中にある小さな丘に出てきます。その丘の上にある木造の建物が「森の工房」です。</p>
<p>この丘はちょうど森の中央に位置しており、森の中を散歩したり、自然の中で遊んだりするときにも、ちょうどいい拠点になります。森全体を見渡すことも可能で、夜は満点の星空を満喫できます。</p>
</section><!-- ▲/ section2-1 -->

<section>
<h1>四季を楽しむことができる場所</h1>

<figure><img src="images/photo02.jpg" alt="冬の風景" width="250" height="165">
<figure>季節ごとに変わる景色</figure>
</figure>
<p>冬の風景 森の工房では、春、夏、秋、冬と、四季折々の自然を楽しむことができます。<br>
春には、雪解け水の中から芽を出す新しい命や、新緑の鮮やかな緑。夏には、緑濃く茂った木々の間を吹き抜けるさわやかな風に、川の清流での水遊び。秋には、森全体が赤や黄色に染まり、色鮮やかな紅葉に包まれます。木々の葉が落ち、冬になると、ここは雪に覆われて一面の銀世界になります。</p>
</section><!-- ▲/ section2-2 -->

<section>
<h1>工房のまわりにいる動物たち</h1>
<figure>
<img src="images/photo03.jpg" alt="キツネさん" width="250" height="165">
<figcaption>工房の近くに姿を見せた鹿</figcaption>
</figure>
<p>キツネさん 工房のまわりにはいろいろな動物たちが棲んでいます。キツネ、タヌキ、イタチ、ウサギ、リス、シカ、イノシシ…。森の中で出会うこともあれば、ひょこっと工房に顔を出すこともあります。土や雪の上に残った足跡から、正体を探るのも楽しみです。</p>
<p>ただし、森の工房では彼らに餌をやることはしていません。自然にあるがままの姿で、いっしょに生活していきたいと考えているからです。彼らに出会ったときには、びっくりさせないように遠くからそっと眺めてあげてください。</p>
</section><!-- ▲/ section1-4 -->
</div>
</article>
<!-- ▲content -->
<!-- ▼footer -->

<!-- ▼footer -->
<footer>
<p><small>Copyright (C) Green Leaf, All rights reserved.</small></p>
</footer><!-- ▲footer -->

</div><!-- ▲/ container -->
</body>
</html>

ソースコード【 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 {
bertical-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: 900px;
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(../img2/circle.png), url(../img2/circle2.png);
/* 背景画像を繰り返しなしで表示する */
background-repeat: no-repeat;
/* 背景画像の表示位置を調節する */
background-position: 20px 410px, 90px 500px;
background-size: 94px 94px, 30px 30px;
	
/* サイト名を枠の右下に揃えて表示する */
position: relative;
	
/* 枠からはみ出した部分をカットする */
overflow: hidden;
}

/* container */
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;
}

nav {
clear: both;
}

/* nav */
nav ul {
font-size: 0.75em;
margin: 0 0 10px 0;
height: 30px; background-color: #005087;
border-radius: 6px; /* ナビゲーションバーを角丸にする */

/* 一世代前のWebKit系ブラウザに対応させる */	
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%, #555 100%);
/* ベンダープレフィックス（主要ブラウザに対応させる） */
background: -moz-linear-gradient(#777 0%, #444 50%, #333 51%, #555 100%);
/* 中間に色を入れる */
background: -webkit-linear-gradient(#777 0%, #444 50%, #333 51%, #555555 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;  */

/* [ rgba(255, 255, 255, 0.2) ]区切り線の色をRGBで指定し半透明にする */
border-right: 1px solid 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;
}

article header {
border: 1px solid #aaa;
margin: 20px 0 10px 0;
padding: 18px;
border-radius: 10px;
/* 一世代前のWebKit系ブラウザに対応させる[ (0 0 4px 3px #fff inset)枠の内側に白い影をつける ] */
-webkit-box-shadow: 0 2px 3px #ccc, 0 0 4px 3px #fff inset;
/* 枠に影をつける[ 影をぼかす:ぼかしの大きさ「5px」 ],[ (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.5);
}

article header h1 {
color: #000;
font-size: 1.8em;
font-weight: normal;
line-height: 45px;
background: none;
}

article section {
clear: both;
border: 1px solid #aaa;
margin: 20px 0 10px 0;
padding: 18px 18px 10px 18px;
border-radius: 10px;
overflow: hidden;
	
/* 一世代前のWebKit系ブラウザに対応させる */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dfdfdf));
/* 白からグレーにグラデーション(「0deg」で左から右へ０度) */
background: -webkit-linear-gradient(#fff 0%, #dfdfdf 100%);
background: -moz-linear-gradient(#fff 0%, #dfdfdf 100%);/* ベンダープレフィックス（主要ブラウザに対応させる） */
background: -o-linear-gradient(#fff 0%, #dfdfdf 100%);
background: -ms-linear-gradient(#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: 1px solid #aaa; /* フッターを罫線で区切って表示する */
}

small {
font-size: 0.75em;
font-style: normal;
text-align: left;
display: block;
}

small:before {
  content: 'GREEN LEAF'; /* サイト名をCSSで挿入する */
  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;
	
/* 反時計回りに「45度」回転 */
-webkit-transform: rotate(-45deg) translate(62px, 20px);
	
/* ベンダープレフィックス（主要ブラウザに対応させる） */
-maz-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;
}


ブラウザで表示【 Chrome 】





HTML5 Outliner【 Chrome 】