午後のひとときにhtml,cssの腕試しをしてみよう！
細かい指定がない部分はだいたい見た感じが同じならOK。
ただし、最初にヤフーのcssリセットをしてから行うこと。

お題1

注)960ｐｘは画面に対してセンタリングされていること。上部はベタづきでよい

イラストは下からダウンロード

Icon

人物イラスト

1 file(s)   25.63 KB

[解答例]
◎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;
}