課題3

課題

Q16　背景画像
HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/Q16.css">
<title>
</title>
</head>
<body>
<div id=nav>
<h1>Background Design</h1>
<p>Sharing your digital photos with family and<br>
friends is such an easy thing to do these days.</p>
</div>
</body>
</html>

CSS

@charset "UTF-8";

body,h1,p{
  font-family:
    "Hiragino Kaku Gothic ProN",
     meiryo,
     sans-serif;
  margin:0;
  padding:0;
}
#nav{
  width:450px;
  height:250px;
  margin:50px;
  color:#FFFFFF;
  background-color:#333333;
  background-image:url(../img/01.gif);
  background-repeat:repeat-y;
  background-position:300px 0;
}
h1{
  padding:20px 0 0 20px;
}
p{
  padding:20px 0 0 20px;
}


Q17 画像とテキストの位置
HTML

<body>
<p><img src="./img/02.jpg" width="300" height="300" alt="">
テキストの位置を指定します。</p>
</body>

CSS

@charset "UTF-8";

body,p{
  font-family:
    "Hiragino Kaku Gothic ProN",
     meiryo,
     sans-serif;
  margin:0;
  padding:0;
}
img{
  vertical-align:top;
}

Q18　画像
HTML

<body>
<img src="./img/03.jpg" width="200" height="132">
<img src="./img/04.jpg" width="200" height="132">
<img src="./img/05.jpg" width="200" height="132"><br>
<img src="./img/06.jpg" width="200" height="132">
<img src="./img/07.jpg" width="200" height="132">
<img src="./img/08.jpg" width="200" height="132"><br>
<img src="./img/09.jpg" width="200" height="132">
<img src="./img/10.jpg" width="200" height="132">
</body>

CSS

@charset "UTF-8";

body,p{
  font-family:
    "Hiragino Kaku Gothic ProN",
     meiryo,
     sans-serif;

}
#container{
  width:800px;
  height:auto;
}

p{
  float:left;
}

Q19
HTML

<body>
<div id="container">
<div class="image">
<p><img src="./img/03.jpg" width="200" height="132"></p>
<p>青空</p>
</div>
<div class="image">
<p><img src="./img/04.jpg" width="200" height="132"></p>
<p>砂浜</p>
</div>
<div class="image">
<p><img src="./img/05.jpg" width="200" height="132"></p>
<p>水中</p>
</div>
<div class="image">
<p><img src="./img/06.jpg" width="200" height="132"></p>
<p>夕日</p>
</div>
<div class="image">
<p><img src="./img/07.jpg" width="200" height="132"></p>
<p>雲</p>
</div>
<div class="image">
<p><img src="./img/08.jpg" width="200" height="132"></p>
<p>夕焼け</p>
</div>
<div class="image">
<p><img src="./img/09.jpg" width="200" height="132"></p>
<p>レモン</p>
</div>
<div class="image">
<p><img src="./img/10.jpg" width="200" height="132"></p>
<p>桃</p>
</div><!-- /image -->
</div><!-- /container -->
</body>

CSS

@charset "UTF-8";

body,p,div{
  margin: 0;
  padding: 0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
#container{
  width:700px;
  height:auto;
  overflow: hidden;
}

.image{
  width: 208px;
  float:left;
  border: 1px solid #333333;
  text-align: center;
  margin: 0 20px 20px 0;
}
img{

  padding: 2px 2px 0 2px;
}


Q20
HTML

<body>
<img src="./img/20.jpg" width="122" height="100" alt="">
</body>

CSS

@charset "UTF-8";

body,p,img{
  font-family:
    "Hiragino Kaku Gothic ProN",
     meiryo,
     sans-serif;
  margin:0;
  padding:0;
}
img{

  margin:50%;
}