課題Q12-HTML - Web学習鑑賞ポートフォリオ

<!doctype html>
<html lang="ja">
<head>
<title>ボタン</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" media="all">
</head>
<body>
<ul>
<li><a href="#">a-link-skyblue</a></li>
<li><a href="#">a-visited-turquoise</a></li>
<li><a href="#">a-hover-coral</a></li>
<li><a href="#">a-active-lawngreen</a></li>
</ul>
</body>
</html>

課題Q12-STYLESHEET

@charset"UTF-8";

body,ul,li,a{
margin:0;
padding:0;
}
img{
vertical-align:bottom;
}
a {
 text-decoration: none;
}
ul{
list-style:none;
width:250px;
border-top:2px solid #ffffff;
border-left:2px solid #ffffff;
border-right:2px solid #ffffff;
}
li{
font-size:18px;
font-weight:bold;
background-color:#87ceeb;
border-bottom:2px solid #ffffff;
}
body{
font-size:16px;
background-color:#3366CC;
color:#7cfc00;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.5;
padding:30px 0 0 60px;
}

li a{
display:block;
padding:12px 0 9px 45px;
}
a:link{
color:#ffffff;
}
a:hover{
color:#ffe4e1;
background-color:#ff4500;
}
a:visited{
color:#556b2f;
}
a:active{
color:#800000;
background-color:#eee8aa;
}

課題Q13〜Q14HTML

<!doctype html>
<html lang="ja">
<head>
<title>枠線と文字</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" media="all">
</head>
<body>
<p>テキストの囲みを表現したい[標準]</p>
<br>
<p>テキストの囲みを表現したい[線の太さ]</p>
<br>
<p>テキストの囲みを表現したい[線のカラー]</p>
<br>
<p>テキストの囲みを表現したい[線のスタイル]</p>
<br>
<p>テキストの囲みを表現したい[複数の指定]</p>
<br>
<p>テキストの囲みを表現したい[複数の指定]</p>
<ul>
<li>アクセシビリティに配慮した文字指定をしたい[100%]</li>
<li>アクセシビリティに配慮した文字指定をしたい[1em]</li>
<li>アクセシビリティに配慮した文字指定をしたい[16px]</li>
<li>アクセシビリティに配慮した文字指定をしたい[medium]</li>
<hr>
<li>アクセシビリティに配慮した文字指定をしたい[200%]</li>
<li>アクセシビリティに配慮した文字指定をしたい[2em]</li>
<li>アクセシビリティに配慮した文字指定をしたい[32px]</li>
<li>アクセシビリティに配慮した文字指定をしたい[xx-large]</li>
</ul>
</body>
</html>

課題Q13〜Q14-STYLESHEET

@charset"UTF-8";

body,p{
margin:0;
padding:0;
}
img{
vertical-align:bottom;
}
a {
 text-decoration: none;
}
ul{
list-style:none;
}
body{
font-size:16px;
background-color:#ffffff;
color:#000000;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.5;
padding:30px 0 0 60px;
}
p{
padding:20px 30px;
}
p:first-of-type{
width:400px;
border:1px solid gray;
}
p:nth-of-type(2){
width:400px;
border:4px solid gray;
}
p:nth-of-type(3){
width:400px;
border:1px solid red;
}
p:nth-of-type(4){
width:400px;
border:1px dotted gray;
}
p:nth-of-type(5){
width:400px;
border-top:2px solid green;
border-left:5px solid green;
border-bottom:1px dotted green;
border-right:1px dotted green;
}
p:nth-of-type(6){
width:400px;
border-top:2.5px solid blue;
border-left:1.5px solid blue;
border-bottom:4px double blue;
border-right:none;
}
li:first-of-type{
font-size:100%;
}
li:nth-of-type(2){
font-size:1em;
}
li:nth-of-type(3){
font-size:16px;
}
li:nth-of-type(4){
font-size:medium;
}
li:nth-of-type(5){
font-size:200%;
}
li:nth-of-type(6){
font-size:2em;
}
li:nth-of-type(7){
font-size:32px;
}
li:nth-of-type(8){
font-size:xx-large;
}

課題Q15-HTML

<!doctype html>
<html lang="ja">
<head>
<title>行間</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" media="all">
</head>
<body>
<p>複数行の文章が一つのかたまりとして表示されている場合、行と行の間隔を「行間」と見なします。行間が狭いとたくさんの情報量を詰め込むことができますが、読みづらくなる場合があります。逆に行間を広くすると余白が確保されてゆったりとしたレイアウトになりますが、広すぎてスカスカに見えてしまうことがあります。見栄えだけではなく可読性にも影響する重要なものですが、ＣＳＳでは「行間」ではなく「行高」として扱います。</p>
<hr>
<p>複数行の文章が一つのかたまりとして表示されている場合、行と行の間隔を「行間」と見なします。行間が狭いとたくさんの情報量を詰め込むことができますが、読みづらくなる場合があります。逆に行間を広くすると余白が確保されてゆったりとしたレイアウトになりますが、広すぎてスカスカに見えてしまうことがあります。見栄えだけではなく可読性にも影響する重要なものですが、ＣＳＳでは「行間」ではなく「行高」として扱います。</p>
<hr>
<p>複数行の文章が一つのかたまりとして表示されている場合、行と行の間隔を「行間」と見なします。行間が狭いとたくさんの情報量を詰め込むことができますが、読みづらくなる場合があります。逆に行間を広くすると余白が確保されてゆったりとしたレイアウトになりますが、広すぎてスカスカに見えてしまうことがあります。見栄えだけではなく可読性にも影響する重要なものですが、ＣＳＳでは「行間」ではなく「行高」として扱います。</p>
</body>
</html>

課題Q15-STYLESHEET

@charset"UTF-8";

body,p{
margin:0;
padding:0;
}
img{
vertical-align:bottom;
}
a {
 text-decoration: none;
}
ul{
list-style:none;
}
body{
font-size:16px;
background-color:#ffffff;
color:#000000;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.5;
padding:30px 0 0 60px;
}
p{
width:450px;
margin-bottom:5px;
padding:20px 30px;
border:1.5px solid gray;
}
p:first-of-type{
line-height:1em;
}
p:nth-of-type(2){
line-height:2em;
}
p:nth-of-type(3){
line-height:3em;
}

課題Q16-HTML

<!doctype html>
<html lang="ja">
<head>
<title>背景画像1</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" media="all">
</head>
<body>
<h1>Background Design</h1>
<p>Sharing your digital photos with family and friends is such an easy thing to do these days.</p>
</body>
</html>

課題Q16-STYLESHEET

@charset"UTF-8";

body,h1,p{
margin:0;
padding:0;
}
img{
vertical-align:bottom;
}
a {
 text-decoration: none;
}
ul{
list-style:none;
}
body{
font-size:16px;
background-color:#696969;
color:#000000;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.5;
padding:30px 0 0 60px;
background-image:url(img/01.gif);
background-repeat:repeat-y;
background-position:345px 10px;
}
h1{
font-size:34px;
color:#ffffff;
padding-bottom:18px;
}
p{
font-size:20px;
color:#ffffff;
}

課題Q17-HTML

<!doctype html>
<html lang="ja">
<head>
<title>背景画像2</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" media="all">
</head>
<body>
</body>
</html>

課題Q17-STYLESHEET

@charset"UTF-8";

body,h1,p{
margin:0;
padding:0;
}
img{
vertical-align:bottom;
}
a {
 text-decoration: none;
}
ul{
list-style:none;
}
body{
font-size:16px;
background-color:#ffffff;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.5;
padding:30px 0 0 60px;
background-image:url(img/01.jpg);
background-repeat:no-repeat;
background-position:50px 30px;
}

課題Q18-HTML

<!doctype html>
<html lang="ja">
<head>
<title>背景画像3</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" media="all">
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="content">
<ul>
<li div class="usa1"><img src="img/01.jpg" width="200" height="200" alt="usa1" style="position : fixed ; top : 10px ; left : 0;" ></li>
<li div class="usa2"><img src="img/02.jpg" width="200" height="200" alt="usa2"  style="position : fixed ; top : 10px ; left : 210px ;"></li>
<li div class="usa3"><img src="img/03.jpg" width="200" height="200" alt="usa3"  style="position : fixed ; top : 10px ; left : 420px ;"></li>
<li div class="usa4"><img src="img/04.jpg" width="200" height="200" alt="usa4"  style="position : fixed ; top : 220px ; left : 0;"></li>
<li div class="usa5"><img src="img/05.jpg" width="200" height="200" alt="usa5"  style="position : fixed ; top : 220px ; left : 210px;"></li>
<li div class="usa6"><img src="img/06.jpg" width="200" height="200" alt="usa6"  style="position : fixed ; top : 220px ; left : 420px;"></li>
<li div class="usa7"><img src="img/07.jpg" width="200" height="200" alt="usa7"  style="position : fixed ; top : 430px ; left : 0;"></li>
<li div class="usa8"><img src="img/08.jpg" width="200" height="200" alt="usa8"  style="position : fixed ; top : 430px ; left : 210px ;"></li>
</ul>
</div><!-- /#content -->
</div><!-- /#wrapper -->
</div><!-- /#container -->
</body>
</html>

課題Q18-STYLESHEET

@charset"UTF-8";

body,h1,p{
margin:0;
padding:0;
}
img{
vertical-align:bottom;
}
a {
 text-decoration: none;
}
ul{
list-style:none;
}
body{
font-size:16px;
background-color:#ffffff;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.5;
padding:30px 0 0 60px;
background-repeat:no-repeat;
background-position:50px 30px;
}

課題Q19-HTML

<!doctype html>
<html lang="ja">
<head>
<title>背景画像4</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" media="all">
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="content">
<table width="700" cellspacing="30" border="0">
<tr>
<td><img src="img/01.jpg" width="200" height="200" alt="usa1">
<p>うさ1</p></td>
<td><img src="img/02.jpg" width="200" height="200" alt="usa2">
<p>うさ2</p></td>
<td><img src="img/03.jpg" width="200" height="200" alt="usa3">
<p>うさ3</p></td>
</tr>
<tr>
<td><img src="img/04.jpg" width="200" height="200" alt="usa4">
<p>うさ4</p></td>
<td><img src="img/05.jpg" width="200" height="200" alt="usa5">
<p>うさ5</p></td>
<td><img src="img/06.jpg" width="200" height="200" alt="usa6">
<p>うさ6</p></td>
</tr>
<tr>
<td><img src="img/07.jpg" width="200" height="200" alt="usa7">
<p>うさ7</p></td>
<td><img src="img/08.jpg" width="200" height="200" alt="usa8">
<p>うさ8</p></td>
</tr>
</table>
</div><!-- /#content -->
</div><!-- /#wrapper -->
</div><!-- /#container -->
</body>
</html>

課題Q19-STYLESHEET

@charset"UTF-8";

body,h1,p,table,tr,td,img{
margin:0;
padding:0;
}
img{
vertical-align:bottom;
}
a {
 text-decoration: none;
}
ul{
list-style:none;
}
body{
font-size:17px;
background-color:#ffffff;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.5;
padding:30px 0 0 60px;
background-repeat:no-repeat;
background-position:50px 30px;
}
table {
  border: 0px solid #ffffff;
  border-collapse: separate;
  border-spacing: 18px 20px;
}
td {
  border: 1px solid #c0c0c0;
  padding: 1px;
}
td.empty {
  border: 0px;
}
p {
  font-size: 15px;
  text-align: center;
}

課題Q20-HTML

<!doctype html>
<html lang="ja">
<head>
<title>背景画像5</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" media="all">
</head>
<body>
<div>
  <img src="img/01.jpg" width="150" height="120" alt="レモン">
</div>
</body>
</html>

課題Q20-STYLESHEET

@charset"UTF-8";

body,h1,p{
margin:0;
padding:0;
}
img{
vertical-align:bottom;
}
a {
 text-decoration: none;
}
ul{
list-style:none;
}
body{
font-size:16px;
background-color:#ffffff;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.5;
background-repeat:no-repeat;
}
div{
  padding:50%;
  margin:auto;
}

課題Q21-HTML

<!doctype html>
<html lang="ja">
<head>
<title>ナビ１</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" media="all">
</head>
<body>
<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>
</body>
</html>

課題Q21-STYLESHEET

@charset"UTF-8";

body,ul,li,div,a{
margin:0;
padding:0;
}
img{
 vertical-align:bottom;
}
a {
 text-decoration: none;
}
ul{
list-style:none;
width:140px;
}
li{
font-size:18px;
font-weight:bold;
background-color:#87ceeb;
border-bottom:2px solid #ffffff;
}
body{
font-size:16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.5;
padding:30px 0 0 60px;
}

li a{
display:block;
padding:12px 0 4px 30px;
}
li#new a:link{
color:#ffffff;
background-color:#ff0000;
border:2px solid#ff0000;
}
li#new a:hover{
color:#ff0000;
background-color:#ffffff;
}
li#new a:visited{
color:#556b2f;
}
li#new a:active{
color:#800000;
background-color:#ff0000;
}
li#info a:link{
color:#ffffff;
background-color:#ff8c00;
border:2px solid#ff8c00;
}
li#info a:hover{
color:#ff4500;
background-color:#ffffff;
}
li#info a:visited{
color:#556b2f;
}
li#info a:active{
color:#800000;
background-color:#ff8c00;
}
li#item a:link{
color:#ffffff;
background-color:#7cfc00;
border:2px solid#7cfc00;
}
li#item a:hover{
color:#7cfc00;
background-color:#ffffff;
}
li#item a:visited{
color:#556b2f;
}
li#item a:active{
color:#800000;
background-color:#7cfc00;
}
li#shop a:link{
color:#ffffff;
background-color:#228b22;
border:2px solid#228b22;
}
li#shop a:hover{
color:#006400;
background-color:#ffffff;
}
li#shop a:visited{
color:#556b2f;
}
li#shop a:active{
color:#800000;
background-color:#228b22;
}
li#company a:link{
color:#ffffff;
background-color:#00bfff;
border:2px solid#00bfff;
}
li#company a:hover{
color:#00bfff;
background-color:#ffffff;
}
li#company a:visited{
color:#556b2f;
}
li#company a:active{
color:#800000;
background-color:#00bfff;
}

課題Q22-HTML

<!doctype html>
<html lang="ja">
<head>
<title>ナビ2</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" media="all">
</head>
<body>
<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>
</body>
</html>

課題Q22-STYLESHEET

@charset"UTF-8";

body,ul,li,div,a{
margin:0;
padding:0;
}
img{
 vertical-align:bottom;
}
a {
 text-decoration: none;
}
ul{
list-style:url(01.gif);
width:180px;
}
li{
font-size:18px;
font-weight:bold;
background-color:#87ceeb;
border-bottom:1px dotted #00bfff;
}
body{
font-size:16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.5;
padding:30px 0 0 60px;
}

li a{
display:block;
padding:12px 0 5px 1px;
}
li#new a:link{
color:#00bfff;
background-color:#ffffff;
}
li#new a:hover{
color:#ff8c00;
background-color:#ffffff;
}
li#new a:visited{
color:#556b2f;
}
li#new a:active{
color:#800000;
background-color:#ff0000;
}
li#info a:link{
color:#00bfff;
background-color:#ffffff;
}
li#info a:hover{
color:#ff8c00;
background-color:#ffffff;
}
li#info a:visited{
color:#556b2f;
}
li#info a:active{
color:#800000;
background-color:#ff8c00;
}
li#item a:link{
color:#00bfff;
background-color:#ffffff;
}
li#item a:hover{
color:#ff8c00;
background-color:#ffffff;
}
li#item a:visited{
color:#556b2f;
}
li#item a:active{
color:#800000;
background-color:#7cfc00;
}
li#shop a:link{
color:#00bfff;
background-color:#ffffff;
}
li#shop a:hover{
color:#ff8c00;
background-color:#ffffff;
}
li#shop a:visited{
color:#556b2f;
}
li#shop a:active{
color:#800000;
background-color:#228b22;
}
li#company a:link{
color:#00bfff;
background-color:#ffffff;
}
li#company a:hover{
color:#ff8c00;
background-color:#ffffff;
}
li#company a:visited{
color:#556b2f;
}
li#company a:active{
color:#800000;
background-color:#00bfff;
}

課題Q23-HTML

<!doctype html>
<html lang="ja">
<head>
<title>ナビ3</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" media="all">
</head>
<body>
<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>
</body>
</html>

課題Q23-STYLESHEET

@charset"UTF-8";

body,ul,li,div,a{
margin:0;
padding:0;
}
img{
 vertical-align:bottom;
}
a {
 text-decoration: none;
}
ul{
list-style:none;
width:180px;
}
li{
font-size:18px;
font-weight:bold;
background-color:#87ceeb;
border:2px solid #00bfff;
margin-bottom:7px;
}
body{
font-size:16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.5;
padding:30px 0 0 60px;
}

li a{
display:block;
padding:12px 0 5px 1px;
}
li#new a:link{
color:#00bfff;
background-color:#ffffff;
}
li#new a:hover{
color:#ffffff;
background-color:#00bfff;
}
li#new a:visited{
color:#556b2f;
}
li#new a:active{
color:#800000;
background-color:#ff0000;
}
li#info a:link{
color:#00bfff;
background-color:#ffffff;
}
li#info a:hover{
color:#ffffff;
background-color:#00bfff;
}
li#info a:visited{
color:#556b2f;
}
li#info a:active{
color:#800000;
background-color:#ff8c00;
}
li#item a:link{
color:#00bfff;
background-color:#ffffff;
}
li#item a:hover{
color:#ffffff;
background-color:#00bfff;
}
li#item a:visited{
color:#556b2f;
}
li#item a:active{
color:#800000;
background-color:#7cfc00;
}
li#shop a:link{
color:#00bfff;
background-color:#ffffff;
}
li#shop a:hover{
color:#ffffff;
background-color:#00bfff;
}
li#shop a:visited{
color:#556b2f;
}
li#shop a:active{
color:#800000;
background-color:#228b22;
}
li#company a:link{
color:#00bfff;
background-color:#ffffff;
}
li#company a:hover{
color:#ffffff;
background-color:#00bfff;
}
li#company a:visited{
color:#556b2f;
}
li#company a:active{
color:#800000;
background-color:#00bfff;
}

課題Q24-HTML

<!doctype html>
<html lang="ja">
<head>
<title>文章と画像</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" media="all">
</head>
<body>
<ul>
<div>
<p><img src="01.jpg" width="180" height="130px">段落１のテキストです。段落１のテキストです。段落１のテキストです。</p>
<p>段落２のテキストです。段落２のテキストです。段落２のテキストです。段落２のテキストです。段落２のテキストです。段落２のテキストです。段落２のテキストです。</p>
<p><img src="01.jpg" width="190" height="140px">段落３のテキストです。段落３のテキストです。段落３のテキストです。</p>
<p>段落４のテキストです。段落４のテキストです。段落４のテキストです。段落４のテキストです。段落４のテキストです。段落４のテキストです。段落４のテキストです。</p>
</div>
</ul>
</body>
</html>

課題Q24-STYLESHEET

@charset"UTF-8";

body,ul,div,a{
margin:0;
padding:0;
}
img{
 vertical-align:bottom;
}
a {
 text-decoration: none;
}
ul{
list-style:none;
}
body{
font-size:16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.5;
padding:30px 0 0 60px;
}
div{
  width: 370px;
}
p:first-of-type img{
  float: left;
}
p:nth-of-type(2){
  clear: both;
}
p:nth-of-type(3) img{
  float: right;
}
p:nth-of-type(4){
  clear: both;
}

課題Q25-HTML

<!doctype html>
<html lang="ja">
<head>
<title>文章と画像</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" media="all">
</head>
<body>
<ul>
<div>
<p>ブロックＡ</p>
<p>ブロックＢ</p>
<p>ブロックＣ</p>
<p>ブロックＤ</p>
</div>
</ul>
</body>
</html>

課題Q25-STYLESHEET

@charset"UTF-8";

body,ul,div,a,p{
margin:0;
padding:0;
}
img{
 vertical-align:bottom;
}
a {
 text-decoration: none;
}
ul{
list-style:none;
}
body{
font-size:16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.5;
padding:35px 0 0 60px;
}
div{
  width:165px;
}
p{
display:block;
padding:14px 0 10px 1px;
margin-bottom:2px;
}
p:first-of-type{
 clear: both; 
 background:#ffd700;
}
p:nth-of-type(2){
 float:left; 
 background:#87ceeb;
}
p:nth-of-type(3){
 float:right; 
 background:#7cfc00;
}
p:nth-of-type(4){
 clear: both; 
 background:#ffb6c1;
}

課題Q26-HTML

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページ制作</title>
<link rel="stylesheet"href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>Homepage Title</h1>
<p>サブタイトルサブタイトルサブタイトル</p>
</div><!--/#header-->
<div id="wrapper">
<div id="content">
<h2>コンテンツタイトル</h2>
<p class="p1">　コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p>
<br>
<p class="p2">　コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p>
</div><!--/#content-->
<div id="nav">
<ul>
<li id="m1"><a href="#">メニューのリンク１</a></li>
<li id="m2"><a href="#">メニューのリンク２</a></li>
<li id="m3"><a href="#">メニューのリンク３</a></li>
<li id="m4"><a href="#">メニューのリンク４</a></li>
<li id="m5"><a href="#">メニューのリンク５</a></li>
<li id="m6"><a href="#">メニューのリンク６</a></li>
</ul>
</div><!--/#nav-->
</div><!--/#wrapper-->
<div id="footer">
<p><small>copyright(c)AUTHOR NAME, All Rights Reserved</small></p>
</div><!--/#footer-->
</div><!--/#container-->
</body>
</html>

課題Q26-STYLESHEET

@charset"UTF-8";
body,div,h1,h2,p,p1,p2,ul,li,img,a,footer,small,header{
margin:0;
padding:0;
}
body{
font-size:16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.5;
background-image:url(01.jpg);
background-repeat: no-repeat;
background-position: -600px 0;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
img{
 vertical-align:bottom;
}
#container{
width:800px;
height:auto;
margin:0 auto;
}
#header{
padding:50px 0 100px;
}
h1{
color:#ffffff;
margin-bottom:16px;

}
#wrapper{
width:800px;
height:auto;
overflow:hidden;
margin-bottom:60px;
}
#content{
width:550px;
height:auto;
float:left;
}
#content h2{
width:544px;
line-height:36px;
background-color:#ffff00;
margin-bottom:16px;
}
#content p{
margin-bottom:16px;
}
p:first-of-type,p:nth-of-type(2){
 color:#ffffff; 
}
#nav {
width:204px;
height:auto;
float:right;
}
#nav ul{
width:200px;
height:240px;
border-top: 2px solid #FFFFFF;
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
}
#nav ul li{
width:200px;
height:38px;
border-bottom:2px solid #ffffff;
}
#nav li a{
display:block;
width:200px;
height:28px;
color:#ffffff;
font-size:20px;
text-align:center;
padding:10px 0 0 0;
}
#nav li a:hover{
background-color:#66CDAA;
}
#footer{
width:800px;
text-align:center;
padding-top:12px;
border-top:6px solid #ffff00;
}

本日の参考サイト一覧：
ラインタグ一覧
http://copicopi.com/line.html
表示と配置
http://w3g.jp/css/display_position/
セルの間隔を指定する
http://www.tagindex.com/html_tag/table/table_cellspacing.html
箇条書きに画像【list-style-image】：CSS入門
http://kumacrow.blog111.fc2.com/blog-entry-274.html
無料Web素材三角（5）
http://kumacrow.blog111.fc2.com/blog-entry-202.html
画像にキャプションを入れたい
http://homepage.decoweb.jp/page/homepage/edit_caption