午後のひとときにhtml,cssの腕試しをしてみよう！
細かい指定がない部分はだいたい見た感じが同じならOK。

お題1


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

Icon

人物イラスト

1 file(s)   25.63 KB

[解答例]
◎index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>課題1</title>
    <link rel="stylesheet" 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">
      <ul>
        <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>
    </div>
  </body>
</html>

◎main.css

#container{
  width:960px;
  margin:0 auto;
  background: #eee;
}
#container ul{
  display: flex;
  height:500px;
  justify-content: space-around;
  align-items: center;
}
#container ul li{
  width:200px;
  height:200px;
  border-radius: 50%;
  overflow: hidden;
}
#container ul li img{
  width:100%;
}

お題2

[解答例]
◎index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>課題2</title>
    <link rel="stylesheet" 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="box">
        <div>Point!</div>
        <p>Outputが大事!</p>
      </div>
    </div>
  </body>
</html>

◎main.css

#container{
  width:960px;
  margin:0 auto;
  background: #eee;
  padding:100px 0;
}
#box{
  width:600px;
  height:300px;
  position: relative;
  background: yellow;
  margin:0 auto;
}
#box > div{
  position: absolute;
  top:-50px;
  left:-50px;
  width:100px;
  height:100px;
  border-radius: 50%;
  background: red;
  color:white;
  text-align: center;
  line-height: 100px;
}
#box p{
  text-align: center;
  line-height: 300px;
  font-size:60px;
  color:#333;
}