実践演習課題その3
[HTML]13
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Patisserie camellia</title> <link href="css/reset.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="style.css" media="all"> </head> <body> <div id="container"> <div id="header"> <h1><span>Patisserie camellia</span></h1> </div> <div id="nav"> <ul> <li id="Information"><a href="#"><em>Information</em></a></li> <li id="Menu"><a href="#"><em>Menu</em></a></li> <li id="Access"><a href="#"><em>Access</em></a></li> <li id="Mail"><a href="#"><em>Mail</em></a></li> </ul> </div> <!--/#nav--> <div id="content"> <table> <tr> <td rowspan="2" colspan="2" id="t3"><span>ワッフル</span></td> <td id="t5"><span>キャンドル</span></td> <td colspan="3"><span>blank</span></td> </tr> <tr> <td><span>blank</span></td> <td id="t6"><span>イチゴスムージー</span></td> <td rowspan="2" colspan="2" id="t1"><span>プリン</span></td> </tr> <tr> <td id="t4"><span>コーヒー</span></td> <td><span>blank</span></td> <td id="t7"><span>イチゴプリン</span></td> <td><span>blank</span></td> </tr> <tr> <td><span>blank</span></td> <td rowspan="2" colspan="2" id="t2"><span>ショートケーキ</span></td> <td id="t8"><span>ヨーグルト</span></td> <td><span>blank</span></td> <td id="t10"><span>コーヒー</span></td> </tr> <tr> <td><span>blank</span></td> <td><span>blank</span></td> <td id="t9"><span>ライト</span></td> <td><span>blank</span></td> </tr> </table> <div id="camp"><img src="img/campaign.gif" width="170" height="100" alt="キャンペーン情報"></div> </div> </div> <!--/#content--> </div> <!--/#container--> </body> </html>
[CSS]13
@charset"UTF-8";
body, div, h1, h2, h3, h4, h5, p, ul, li, img, header, small {
margin:0;
padding:0;
}
ul {
list-style:none;
}
img {
vertical-align:bottom;
border:0;
}
em {
visibility: hidden;
}
table{
border-collapse:collapse;
border:none;
}
body {
font-size:16px;
font-family:
"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
line-height:1.0;
background:url(img/shadow.gif);
}
#container {
width:800px;
height:auto;
background-color:#FFFFFF;
padding:20px;
position:absolute;
left:50px;
top:50px;
}
#nav {
margin-top:20px;
margin-left:10px;
}
#nav ul li a em {
visibility:hidden;
}
#nav ul{
line-height:1.7;
}
#nav ul li#Information{
background:url(img/m_info.gif) no-repeat;
}
#nav ul li#Menu{
background:url(img/m_menu.gif) no-repeat;
}
#nav ul li#Access{
background:url(img/m_access.gif) no-repeat;
}
#nav ul li#Mail{
background:url(img/m_mail.gif) no-repeat;
}
#header {
position: absolute;
top: 240px;
left: 30px;
}
#header h1{
background:url(img/logo.gif) no-repeat;
width: 267px;
height: 129px;
}
#header span{
visibility: hidden;
}
#content {
float: right;
}
#content span {
visibility: hidden;
}
#content td {
width: 80px;
height: 80px;
}
#content table{
margin-top:-148px;
margin-bottom:-20px;}
#t1 {
background: url(img/photo01.jpg) no-repeat;
}
#t2 {
background: url(img/photo02.jpg) no-repeat;
}
#t3 {
background: url(img/photo03.jpg) no-repeat;
}
#t4 {
background: url(img/photo04.jpg) no-repeat;
}
#t5 {
background: url(img/photo05.jpg) no-repeat;
}
#t6 {
background: url(img/photo06.jpg) no-repeat;
}
#t7 {
background: url(img/photo07.jpg) no-repeat;
}
#t8 {
background: url(img/photo08.jpg) no-repeat;
}
#t9 {
background: url(img/photo09.jpg) no-repeat;
}
#t10 {
background: url(img/photo10.jpg) no-repeat;
}
#camp {
position: absolute;
top: -23px;
right: -15px;
}
[HTML]14
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>H14・C14</title> <link rel="stylesheet" href="style.css" media="all"> </head> <body> <div id="container"> <header> <p>header</p> </header> <div id="wrapper"> <div id="sidemenu"> <p>sidemenu</p> </div> <div id="aside"> <p>aside</p> </div> <div id="content"> <p>content</p> </div> </div> <footer> <p>(c)</p> </footer> </div> </body> </html>
[CSS]14
@charset "utf-8";
/* CSS Document */
body, div, p, div {
margin:0;
padding:0;
}
body {
font-size:18px;
font-family:"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
#container {
width:80%;
height:auto;
margin: 0 auto;
}
header {
height:80px;
margin-bottom:10px;
background:#993399;
}
#wrapper {
width:100%;
height:750px;
background:#006699;
overflow:hidden;
}
#content {
width:1300px;
height:750px;
margin-left:20px;
margin-right:20px;
background:#9C6;
}
#aside {
width:250px;
height:750px;
float:left;
background:#CC3300;
}
#sidemenu {
width:250px;
height:750px;
float:right;
background:#FF3333;
}
footer {
width:auto;
height:80px;
margin-top:10px;
background:#939;
clear:both;
}
p {
text-align:center;
}
[HTML]15
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>H15・C15</title> <link rel="stylesheet" href="style.css" media="all"> </head> <body> <div id="container"> <header> <p></p> </header> <div id="header-inner"> <p></p> </div> <nav> <ul class="u3"> <li class="home"><a href="#">ホーム</a></li> <li class="shakai"><a href="#">社会</a></li> <li class="seigi"><a href="#">政治</a></li> <li class="kurashi"><a href="#">暮らし</a></li> <li class="bunka"><a href="#">文化</a></li> <li class="sprot"><a href="#">スポーツ</a></li> <li class="music"><a href="#">音楽</a></li> </ul> </nav> <div id="wrapper"> <div id="sidemenu"> <p></p> </div> <div id="aside"> <h3>特集記事</h3> <ul class="u2"> <li class="l2"><a href="#">春の味覚特集</a></li> <li class="l2"><a href="#">お花見スポット</a></li> <li class="l2"><a href="#">花粉情報</a></li> </ul> <h3>特集記事</h3> <ul class="u2"> <li class="l2"><a href="#">春の味覚特集</a></li> <li class="l2"><a href="#">お花見スポット</a></li> <li class="l2"><a href="#">花粉情報</a></li> </ul> <h3>特集記事</h3> <ul class="u2"> <li class="l2"><a href="#">春の味覚特集</a></li> <li class="l2"><a href="#">お花見スポット</a></li> <li class="l2"><a href="#">花粉情報</a></li> </ul> </div> <div id="content"> <h1>本格チョコレートのラインナップに新作が登場</h1> <p>厳選されたカカオ豆だけを使用し、日本発の本格チョコレートとして特に女性に人気の高い「Cacao Sample Chocolate Shop」では、5月からこれまでのラインナップに加え、新作のチョコレートを5種類追加することを発表した。</p> <br> <p>ラインナップに登場するのは「スイス」、「ガーナ」、「マダガスカル」、「ベルギー」、「フランス」と、5つの国名が付けられたチョコレート。さらに「スイス」と「ベルギー」はミルクとビターの2種類に分けられる。</p> <br> <p>厳選されたカカオ豆だけを使用し、日本発の本格チョコレートとして特に女性に人気の高い「Cacao Sample Chocolate Shop」では、5月からこれまでのラインナップに加え、新作のチョコレートを5種類追加することを発表した。</p> <br> <p>ラインナップに登場するのは「スイス」、「ガーナ」、「マダガスカル」、「ベルギー」、「フランス」と、5つの国名が付けられたチョコレート。さらに「スイス」と「ベルギー」はミルクとビターの2種類に分けられる。</p> <br> <p class="p1">2013年07月01日13時00分</p> <ul class="u4"> <h2>関連記事</h2> </ul> <ul class="u1"> <li class="l1"> <a href="#">サンプル チョコレート ショップ」2号店が登場</a></li> <li class="l1"> <a href="#">フランスチョコレートのおいしさの秘密を探る</a></li> <li class="l1"> <a href="#">いよいよ「カカオ サンプル チョコレート ショップ」がオープン</a></li> </ul> <h2>関連記事</h2> <ul class="u1"> <li class="l1"> <a href="#">サンプル チョコレート ショップ」2号店が登場</a></li> <li class="l1"> <a href="#">フランスチョコレートのおいしさの秘密を探る</a></li> <li class="l1"> <a href="#">いよいよ「カカオ サンプル チョコレート ショップ」がオープン</a></li> </ul> </div> </div> <footer> <p><small>Copyright © Cascading Morning News All Rights Reserved</small></p> </footer> </div> </body> </html>
[CSS]15
@charset "utf-8";
/* CSS Document */
body, div, p, div,h2,u1,u2,l1,l2,nav,a,footer,p1,h3,ul,li {
margin:0;
padding:0;
}
img {
vertical-align:bottom;
}
ul {
list-style:none;
}
nav ul li a {
text-decoration:none;
}
body {
font-size:18px;
font-family:"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
#container {
width:80%;
height:auto;
margin: 0 auto;
overflow:hidden;
}
header {
height:50px;
background:url(img/logo.gif) no-repeat;
background-color:#06F;
}
h1{
font-size: 28px;
text-align: center;
}
#header-inner {
height:20px;
background:url(img/print.gif) no-repeat;
background-position:right bottom;
background-color:#06F;
}
.u3 {
overflow: hidden;
width: 100%;
height:25px;
background:#CCCCCC;
background:url(img/global_nav_bg.gif) repeat-x;
border-bottom: 5px solid #CCC;
margin-bottom: 25px;
}
.u3 li {
float:left;
width:122px;
padding-top:5px;
font-size:15px;
border-right: 1px solid #CCC;
border-left: 1px solid #CCC;
display:inline;
color:#000;
text-align: center;
color: black;
}
#wrapper {
width:100%;
height:1050px;
background:#ffffff;
overflow:hidden;
}
#content {
width:1300px;
height:1050px;
margin-left:20px;
margin-right:20px;
background:#fff;
}
#aside {
width:250px;
height:1050px;
float:left;
background:url(img/leftside_bg.gif)
}
#sidemenu {
width:150px;
height:1050px;
float:right;
background:url(img/ad.jpg) no-repeat;
}
footer {
width:auto;
height:80px;
margin-top:10px;
background:#ffffff;
clear:both;
text-align: center;
}
footer p{
border-top: solid gray;
}
.p1{
color:#999999;
text-align:right;
}
h2{
border-bottom: solid gray;
border-left: solid blue;
padding: 5px;
}
.l1{
list-style-image:url(img/arrow.gif);
}
.l2{
list-style-image:url(img/arrow.gif);
padding: 2px;
}
.u2{
margin-left: 30px;
}
h3{
color: #fff;
background-color: blue;
text-align: center;
width: 200px;
}
.l1{
margin-left: 50px;
padding: 3px;
}
