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