<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-scale=1">
<title>練習</title>
<style>
body{margin:0;}
header{height:50vh;
background:url(A_01.jpg)no-repeat center top/cover;
padding-top:50px;
margin-bottom:100px;}
h1{color:white;
font-size:2em;
text-align:center;
line-height:50px;
font-weight:bold;
margin:0;}
h1 img{position:absolute;
top:30px;
left:30px;
width:100px;}
ul{margin:0;
padding:0;
list-style:none;}
li{display:block;
margin-bottom:40px;
padding:0 20px;
background-color:#cccccc;}
img{max-width:100%;}
footer div{height:100px;text-align:center;
background-color:#eeeeee;}
footer div img{width:100px;
transform:translateY(16px);}
</style>
</head>
<body>
<header>
<h1>練習<img src="A_02.png"alt="トップのロゴ"></h1>
</header>
<ul>
<li><img src="B_01.jpg"alt="画像 - 1"></li>
<li><img src="B_02.jpg"alt="画像 - 2"></li>
<li><img src="B_03.jpg"alt="画像 - 3"></li>
</ul>
<footer>
<div><img src="C_01.png"alt="画像_footerのlogo"></div>
</footer>
</body>
</html>
