復習(3)画像と背景画像

課題

Q16

  • 以下の表示になるよう設定しなさい

h1,p {
  margin: 0;
  padding: 0;
}
body {
  background-color: #222222;
  background-image: url(img/q16.gif);
  background-repeat: repeat-y;
  background-position: 280px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  color: #ffffff;
}
h1 {
  margin: 10px 0;
}

<h1>Background Design</h1>
<p>Sharing your digital photos with family and 
<br>friends is such an easy thing to do these days.
</p>

Q17

  • 以下の表示になるよう設定しなさい

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

<p>
<img src="q17.jpg" width="200px" height="200px" alt="画像">
テキストの位置を指定します。
</p>

Q18（7/16修正）

  • 以下の表示になるよう設定しなさい

　画像は適宜準備すること

ul {
  margin: 0;
  padding: 0;
}
ul {
  background-color:#ffffff;
  list-style: none;
  width: 522px;
  overflow: hidden;
}
li {
  border: 1px solid #c0c0c0;
  margin: 10px 10px;
  padding: 1px 1px;
  float: left;
}
img {
  vertical-align: bottom;
}

<ul>
<li><img src="img/q19-1.gif" width="150px" height="100px" alt="画像"></li>
<li><img src="img/q19-1.gif" width="150px" height="100px" alt="画像"></li>
<li><img src="img/q19-1.gif" width="150px" height="100px" alt="画像"></li>
<li><img src="img/q19-1.gif" width="150px" height="100px" alt="画像"></li>
<li><img src="img/q19-1.gif" width="150px" height="100px" alt="画像"></li>
<li><img src="img/q19-1.gif" width="150px" height="100px" alt="画像"></li>
<li><img src="img/q19-1.gif" width="150px" height="100px" alt="画像"></li>
<li><img src="img/q19-1.gif" width="150px" height="100px" alt="画像"></li>
</ul>

Q19（7/17修正）

  • 以下の表示になるよう設定しなさい

　画像は適宜準備すること

ul, p {
  margin: 0;
  padding: 0;
}
ul {
  background-color:#ffffff;
  list-style: none;
  width: 522px;
  overflow: hidden;
}
li {
  border: 1px solid #c0c0c0;
  margin: 10px 10px;
  padding: 1px 1px;
  float: left;
}
img {
  vertical-align: bottom;
}

<ul>
  <li>
    <img src="img/q19-1.gif" width="150px" height="100px" alt="画像">
    <p>写真のキャプション</p>
  </li>
  <li>
    <img src="img/q19-1.gif" width="150px" height="100px" alt="画像">
    <p>写真のキャプション</p>
  </li>
  <li>
    <img src="img/q19-1.gif" width="150px" height="100px" alt="画像">
    <p>写真のキャプション</p>
  </li>
  <li>
    <img src="img/q19-1.gif" width="150px" height="100px" alt="画像">
    <p>写真のキャプション</p>
  </li>
  <li>
    <img src="img/q19-1.gif" width="150px" height="100px" alt="画像">
    <p>写真のキャプション</p>
  </li>
  <li>
    <img src="img/q19-1.gif" width="150px" height="100px" alt="画像">
    <p>写真のキャプション</p>
  </li>
  <li>
    <img src="img/q19-1.gif" width="150px" height="100px" alt="画像">
    <p>写真のキャプション</p>
  </li>
  <li>
    <img src="img/q19-1.gif" width="150px" height="100px" alt="画像">
    <p>写真のキャプション</p>
  </li>
</ul>

Q20

  • 以下の画像をブラウザの中央に表示する設定をしなさい

div,img{
  margin: 0;
  padding: 0;
}
div {
  width: 122px;
  margin: 50% auto;
}

<div>
<img src="img/q20.jpg" width="122px" height="100px" alt="レモン">
</div>