課題4
Q21
HTML
<body> <div id="nav"> <ul> <li id="new"><a href="#">新着情報</a></li> <li id="info"><a href="#">お知らせ</a></li> <li id="item"><a href="#">製品情報</a></li> <li id="shop"><a href="#">店舗案内</a></li> <li id="company"><a href="#">会社案内</a></li> </ul> </div> </body>
@charset "UTF-8";
/* リセット */
body, div, ul, li {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
/* 全体 */
body {
font-size: 16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
/*レイアウト*/
#nav{
font-size:20px;
font-weight:bold;
margin:100px 0 0 100px;
}
#nav ul{
width:140px;
height:auto;
}
#nav li{
}
#nav li a{
color:#FFFFFF;
display:block;
padding:28px;
width:auto;
height:auto;
}
/*新着*/
#new{
border:2px solid #FF0000;
}
#new a:link,#new a:visited{
background-color:#FF0000;
}
#new a:hover,#new a:active{
color:#FF0000;
background-color:#FFFFFF;
}
/*お知らせ*/
#info{
border:2px solid #FF9900;
}
#info a:link,#info a:visited{
background-color:#FF9900;
}
#info a:hover,#info a:active{
background-color:#FFFFFF;
color:#FF9900;
}
/*製品*/
#item{
border:2px solid #33CC66;
}
#item a:link,#item a:visited{
background-color:#33CC66;
}
#item a:hover,#item a:active{
background-color:#FFFFFF;
color:#33CC66;
}
/*店舗*/
#shop{
border:2px solid #00CC00;
}
#shop a:link,#shop a:visited{
background-color:#00CC00;
}
#shop a:hover,#shop a:active{
background-color:#FFFFFF;
color:#00CC00;
}
/*会社*/
#company{
border:2px solid #00CCFF;
}
#company a:link,#company a:visited{
background-color:#00CCFF;
}
#company a:hover,#company a:active{
background-color:#FFFFFF;
color:#00CCFF;
}
Q22
HTML
<body> <div id="nav"> <ul> <li id="new"><a href="#">新着情報</a></li> <li id="info"><a href="#">ニュース/お知らせ</a></li> <li id="item"><a href="#">製品情報</a></li> <li id="shop"><a href="#">店舗案内</a></li> <li id="company"><a href="#">会社案内</a></li> </ul> </div> </body>
@charset "UTF-8";
/* リセット */
body, div, ul, li {
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a {
text-decoration:none;
}
/* 全体 */
body {
font-size: 16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
/*レイアウト*/
#nav{
font-size:18px;
font-weight:bold;
margin:100px 0 0 100px;
}
#nav ul{
width:200px;
height:auto;
}
#nav li{
margin-bottom:5px;
}
#nav li a{
color:#66CCFF;
display:block;
padding:8px 5px 5px 15px;
width:auto;
height:auto;
border-top:2px dotted #66CCFF;
background-image:url(../img/11.jpg);
background-repeat:no-repeat;
background-position:1px;
}
#nav a:hover{
color:#FF9900;
}
#nav a:active{
color:#FF0000;
}
#company{
border-bottom:2px dotted #66CCFF;
}
Q23
HTML
<body> <div id="nav"> <ul> <li id="new"><a href="#">新着情報</a></li> <li id="info"><a href="#">ニュース/お知らせ</a></li> <li id="item"><a href="#">製品情報</a></li> <li id="shop"><a href="#">店舗案内</a></li> <li id="company"><a href="#">会社案内</a></li> </ul> </div> </body>
@charset "UTF-8";
/* リセット */
body, div, ul, li {
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a {
text-decoration:none;
}
/* 全体 */
body {
font-size: 16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
/*レイアウト*/
#nav{
font-size:18px;
font-weight:bold;
margin:100px 0 0 100px;
}
#nav ul{
width:200px;
height:auto;
}
#nav li{
margin-bottom:10px;
}
#nav li a{
color:#66CCFF;
display:block;
padding:8px 5px 5px 15px;
width:auto;
height:auto;
border:2px solid #66CCFF;
}
#nav a:hover{
color: #FFFFFF;
background-color:#66CCFF;
}Q24
HTML
<body> <div id="container"> <div id="danraku1"> <p class="mozi1">段落1のテキストです。段落1のテキストです。段落1のテキストです。</p> <img src="./img/07.jpg" width="200" height="132" alt="" class="sky1"> </div> <p>段落2のテキストです。段落2のテキストです。段落2のテキストです。段落2のテキストです。段落2のテキストです。段落2のテキストです。段落2のテキストです。</p> <div id="danraku2"> <p class="mozi2">段落3のテキストです。段落3のテキストです。段落3のテキストです。</p> <img src="./img/07.jpg" width="200" height="132" alt="" class="sky2"> </div> <p>段落4のテキストです。段落4のテキストです。段落4のテキストです。段落4のテキストです。段落4のテキストです。段落4のテキストです。段落4のテキストです。</p> </div> </body>
@charset "UTF-8";
/*全体*/
body,div,p {
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
margin:0;
padding:0;
}
#container{
width:380px;
height:auto;
margin:0 auto;
}
/*上部のフロート*/
#danraku1{
overflow:hidden;
width:380px;
height:auto;
margin:5px 0;
}
.mozi1{
width:180px;
height:132px;
float:right;
}
.sky1{
width:200px;
height:132px;
float:left;
}
/*下部のフロート*/
#danraku2{
overflow:hidden;
width:380px;
height:auto;
margin:5px 0;
}
.mozi2{
width:180px;
height:132px;
float:left;
}
.sky2{
width:200px;
height:132px;
float:right;
}
Q25
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/Q25.css"> <title> </title> </head> <body> <div id="container"> <p class="block1">ブロックA</p> <div id="content"> <p class="block2">ブロックB</p> <p class="block3">ブロックC</p> </div> <p class="block4">ブロックD</p> </div> </body> </html>
@charset "UTF-8";
/*全体*/
body,div,p{
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
margin:0;
padding:0;
}
#container{
width:500px;
height:auto;
margin:0 auto;
}
.block1{
background-color:#FFFF33;
width:500px;
height:auto;
padding-bottom:20px;
margin-bottom:5px;
}
.block4{
background-color:#FFCCFF;
width:500px;
height:auto;
padding-bottom:20px;
margin-bottom:5px;
}
/*フロート*/
#content{
overflow:hidden;
width:500px;
height:auto;
}
.block2{
background-color:#99CCFF;
width:250px;
height:auto;
float:left;
padding-bottom:20px;
margin-bottom:5px;
}
.block3{
background-color:#66FF99;
width:240px;
height:auto;
float:right;
padding-bottom:20px;
margin-bottom:5px;
}
