facebookのトップページの模写をしたいです。

前提・実現したいこと

facebookのトップページの模写

発生している問題・エラーメッセージ

入力欄がヘッダーの青い幅に収まらない＆横並びに出来ません

のようにしたいのですが

のように、右上の入力欄がヘッダーの幅内に収まりきらず、横並びにも出来ません。

該当のソースコード

(以下HTML)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Facebookの模写</title> <link rel="icon" href="favicon.ico"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header> <div class="container"> <div class="header-left"> <h1>facebook</h1> </div> <div class="header-right"> <p>メールアドレスまたは電話番号</p> <input type="text"> <p>パスワード</p> <input type="text" > <p2>アカウントを忘れた場合</p2> </div> </div> </header> </body> </html>

(以下CSS)
body {
margin: 0;
padding: 0;
}

.container {
background-color:rgb(17, 71, 219);
height:84px;
}

.header-left{
color:white;
font-family:Tahoma ;
font-size:18px;
float:left;
padding-left:170px;
}

.header-right{
float:right;
display: inline;
}

.header-right ,input{
display: block;
}

試したこと

CSSのコードを色々試してみました。

補足情報（FW/ツールのバージョンなど）

プログラミング学び始めてまだ3週間ほどです。用語などもまだよく覚えていません。
今回が初めての質問投稿です。
他に補足情報など必要ならおっしゃってください。
visual studio code 使ってます。
よろしくお願いします。

kei344

2020/05/07 15:17

何かの課題でしょうか。そうでないならHTML/CSSの教科書等で基礎的な組み方を学習した上で「模写」をすることをお勧めします。

Seongha

2020/05/07 15:30

回答ありがとうございます！ ProgateのHTML & CSS 学習コース Flexbox編まで終えたので自己学習のために課題として選びました！

m.ts10806

2020/05/07 19:14

もう少し、簡単なところからされた方が。模写より自分で考えたレイアウトの方が良いかとは思いますけど（せっかく覚えたflexbox使わないんですか？）ひとまず、コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

Seongha

2020/05/07 21:21

教えていただきありがとうございます！色々調べ直して、勉強続けていきます！

行動規範の内容に同意します

回答1件

ベストアンサー

回答が得られていない様だったので、、

今回の質問に対する直接の回答にならないかもしれませんが、今後の指針になれば幸いです。

では、まず最初に模写をする上でのお話です。
模写をすること自体は個人的にはあまりお勧めはしないです。模写をしたからといって自身のスキルにしないで、作って終わりとなってしまう人が多いためです。もちろん自分のスキルにする人であれば良いと思います。

今回の模写元の例だと横並びにするにはどうしたら良いのだろうか？
flexbloxという手法で要素を横並びにしているのか。。など発見があるはずです。

また、物にはよりますが模写元の大体のコードはソースを表示してどの様になっているか確認することができます。

今回の場合トップページの模写ができないのではなく、メニューバーもっというと要素の横並びメニューさらに深くするとflexbloxが自分ではきないことに気づきます。これを気づけれるか・そして自分で調べ次は使える様になるかが大きな別れ道だと思います。

今回、このコードでできると言ってしまっては質問者さんのスキル向上にはつながらないかと思いますので、横並びメニューの簡単な実装方法をご紹介します。
これを応用するとできるかと思いますので、参考になれば幸いです。

フレックスボックスを使用した要素の横並べのシンプルな例です。フレックスボックスについては下記リンクで使用等がまとまっていますのでご参照ください。
個人的にはフレックスボックスを使用する際はそのマークアップやその親要素などDOMが重要だったりしますので、模写などではそちらも参考にしてみてください。

フレックスボックス|MDN

HTML
1
2<header>
3    <nav>
4      <ul>
5        <li><a href="">Menu</a></li>
6        <li><a href="">Menu</a></li>
7        <li><a href="">Menu</a></li>
8      </ul>
9    </nav>
10  </header>
11

CSS
1
2header {
3  display: flex;
4}
5
6nav {
7  margin-left: auto;
8}
9
10nav ul {
11  list-style: none;
12  display: flex;
13}
14
15nav a {
16  width: 80px;
17  text-align: center;
18  line-height: 64px;
19  display: block;
20}