午後のひとときにhtml,cssの腕試しをしてみよう！
細かい指定がない部分はだいたい見た感じが同じならOK。
ただし、最初にヤフーのcssリセットをしてから行うこと。
お題1
注)960ｐｘは画面に対してセンタリングされていること。上部はベタづきでよい
イラストは下からダウンロード
[解答例]
◎index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>q1</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<ul id="box">
<li><img src="images/baby.jpg"></li>
<li><img src="images/man1.jpg"></li>
<li><img src="images/man2.jpg"></li>
<li><img src="images/man3.jpg"></li>
</ul>
</body>
</html>
◎main.css
ul{
width:960px;
height:500px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-around;
background:#eee;
}
li{
width:200px;
height:200px;
overflow:hidden;
border-radius:50%;
}
img{
width:100%;
}
お題2
注)Point!の小さい文字は16px
[解答例]
◎index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>q2</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="container">
<div id="inner">
<div id="point">Point!</div>
<p>Outputが大事!</p>
</div>
</div>
</body>
</html>
◎main.css
#container{
background:#eee;
width:960px;
height:500px;
display:flex;
margin:0 auto;
text-align:center;
}
#inner{
margin:auto;
background:yellow;
width:600px;
height:300px;
position:relative;
font-size:60px;
line-height:300px;
}
#point{
position:absolute;
top:-50px;
left:-50px;
width:100px;
height:100px;
border-radius:50%;
background:red;
color:white;
line-height:100px;
font-size:16px;
}
コメント