3連休の課題(3) - ichisemasashi's blog

[http://d.hatena.ne.jp/web-mind/20130614/p1:[CSS]復習(3)画像と背景画像]

A16

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TITLE</title>
<style>
body, h1, p, div {
   margin: 0;
   padding: 0;
}

#content {
   color: #FFFFFF;
   background-color: #3B3537;
   width: 500px;
   height: 300px;
   padding: 10px;
   background-image: url("http://cdn-ak.f.st-hatena.com/images/fotolife/w/web-mind/20130713/20130713232008.gif");
   background-repeat: repeat-y;
   background-position: 70% -5%;

}
h1 {
   margin-top: 20px;
   margin-bottom: 20px;
}
</style>
<body>
<div id="content">
<h1>Background Design</h1>
<p>Sharing your digital photos with family and friends is such an easy thing to do these days.</p>
</div>
</body>
</html>

A17

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TITLE</title>
<style>
body, p {
   margin: 0;
   padding: 0;
}

#content {
   width: 100px;
   height: 100px;
   float: left;
}

</style>
<body>
<img src="image.jpg" id="content" alt="image"><p>テキストの位置を指定します。</p>
</body>
</html>

A20
できませんでした。