96's blog

WEBサイト制作科 6ヶ月コース

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

Q16

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

f:id:web-mind:20130713231911j:image

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

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

f:id:web-mind:20130713233709j:image

p {
  margin: 0;
  padding: 0;
}
body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
img {
 vertical-align: top;
}
<p>
<imgsrc="q17.jpg"width="200px"height="200px"alt="画像">
テキストの位置を指定します。
</p>

Q18(7/16修正)

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

 画像は適宜準備すること

f:id:web-mind:20130714223625j:image

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><imgsrc="img/q19-1.gif"width="150px"height="100px"alt="画像"></li>
<li><imgsrc="img/q19-1.gif"width="150px"height="100px"alt="画像"></li>
<li><imgsrc="img/q19-1.gif"width="150px"height="100px"alt="画像"></li>
<li><imgsrc="img/q19-1.gif"width="150px"height="100px"alt="画像"></li>
<li><imgsrc="img/q19-1.gif"width="150px"height="100px"alt="画像"></li>
<li><imgsrc="img/q19-1.gif"width="150px"height="100px"alt="画像"></li>
<li><imgsrc="img/q19-1.gif"width="150px"height="100px"alt="画像"></li>
<li><imgsrc="img/q19-1.gif"width="150px"height="100px"alt="画像"></li>
</ul>

Q19(7/17修正)

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

 画像は適宜準備すること

f:id:web-mind:20130714224040j:image

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

Q20

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

f:id:web-mind:20130713190646j:image

div,img{
  margin: 0;
  padding: 0;
}
div {
  width: 122px;
  margin: 50% auto;
}
<div>
<imgsrc="img/q20.jpg"width="122px"height="100px"alt="レモン">
</div>