【Day1】 Top page like the Google's.
最初の課題はグーグルみたいなトップページをつくるというチャレンジ。
ボタンを押したらどこかに飛ぶ、などの動きはなし。
見た目のみ。
Language
HTML
CSS
My code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>googrun</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="container">
<img src="googrun.jpg" alt="logo">
<input class="box" type="search word" name="searchbox" placeholder="googrunを検索またはURLを入力">
<p><input class="button1" type="button" name="search" value="googrun検索"></p>
<p><input class="button2" type="button" name="search" value="I'm Feeling Lucky"></p>
</div>
</body></html>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 400px;
}
img{
width: 272px;
padding-top: 109px;
height: auto;
}
.box {width: 420px;
height: 34px;
}
body {width: 100%;
text-alighn: center;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;}
Reference
WebクリエイターボックスのCSS Flexboxの記事。
これを見つつ、真ん中に揃えたいんだけどなあと思いつつ格闘しました。
Note
flexboxをつかってCSSを作成したのだが、基本条件が抜けていることに気づかずかなり時間を無駄にしました。
そのときの記事。
