復習(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> <imgsrc="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><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修正)
- 以下の表示になるよう設定しなさい
画像は適宜準備すること
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
- 以下の画像をブラウザの中央に表示する設定をしなさい
div,img{ margin: 0; padding: 0; } div { width: 122px; margin: 50% auto; }
<div> <imgsrc="img/q20.jpg"width="122px"height="100px"alt="レモン"> </div>