headerのコードについて

皆さん、初めまして
調べてもうまくいかないため、ご質問させてください。
模写コーディングしているのですが・・・
headerで躓いてます。

フレックスボックスを使うんだろうとは思うのですが、参考にしているサイトのようにいきません。
どういうコードにすれば、この画像のようになりますか？
基本で申し訳ございません。

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

回答2件

ベストアンサー

構図をざっくり図で表すと以下のようになります。

黒枠がheaderになります。
headerが親要素になるので、display:flexをかけて青色のboxを横並びにさせます。
次に、電話番号の部分と「Web予約」ボタンが横並びになっているので、右側の青い箱を親要素にしてdisplay:flexをかけます。
右寄せになっているので、justify-content:flex-endを記述すると画像の通りになります。

下記サンプルコードです。
100%これが正解というわけではないので、あくまでも参考までにしてください。

flexboxについて詳しく書かれたサイトもあります。
これをみて自分でレイアウトを組み立てるなど練習してみてください。
日本語対応！CSS Flexboxのチートシート

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<link rel="stylesheet" href="style.css">
7	<title>Document</title>
8</head>
9<body>
10	<header>
11		<div id="img">ロゴ画像</div>
12			<div class="flexbox">
13				<div id="tel">
14					<p>お電話でのご予約はこちら</p>
15					<h2>03-1234-5678</h2>
16				</div>
17				<div id="button">
18					<p>Web予約</p>
19				</div>
20			</div>
21	</header>
22</body>
23</html>

CSS
1*{
2    margin: 0;
3    padding: 0;
4}
5header{
6    display: flex;
7    width: 100%;
8    justify-content: space-around;
9}
10#img{
11    display:block;
12    background-color: #369;
13    width: 300px;
14    height: 100px;
15    color: #fff;
16    margin-left: 50px;
17}
18.flexbox{
19    display: flex;
20    width: 100%;
21    justify-content: flex-end;
22}
23#tel{
24    color: #6C757D;
25}
26#tel p{
27    font-size: 12px;
28    padding-top: 20px;
29}
30#button{
31    display:block;
32    width: 150px;
33    height: 50px;
34    margin: 20px;
35    background-color: #6C757D;
36    border-radius: 10px;
37}
38#button p{
39    color: #fff;
40    text-align: center;
41    margin-top: 15px;
42}