完成イメージ
使用画像
HTML
このHTMLを元に完成イメージに近づけてみてください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>あいうえお</title>
</head>
<body>
</body>
</html>
ヒント
- ブラウザタブの表示も注意してみてください。
- 画像それぞれに余白があります。
- 画像の縁には線があり、色がついています。また角が丸くなっています。
- 左から右に画像を2枚配置されると次の行でまた画像が表示されています。
- 全体的に中央に表示されています。
Answer
後ほど公開します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>★★ここも変えてください★★</title>
<style>
#main {
text-align: center;
}
img {
margin: 10px;
border-radius: 15px;
}
.left {
border: solid 5px orange;
}
.right {
border: solid 5px yellow;
}
.bottom {
box-shadow: 10px 10px 15px gray;
}
</style>
</head>
<body>
<div id="main">
<div>
<img class="left top" src="photo1.jpg" alt="タヒチの写真1" />
<img class="right top" src="photo2.jpg" alt="タヒチの写真2" />
</div>
<div>
<img class="left bottom" src="photo3.jpg" alt="タヒチの写真3" />
<img class="right bottom" src="photo4.jpg" alt="タヒチの写真4" />
</div>
</div>
</body>
</html>