【考え方】flexboxを使用したヘッダーの記述について

こんにちは、初めて質問させて頂きます。
最近flexboxの勉強をし始めた者です。

とあるコーディング講座にて floatを使用し作成されたヘッダーを flexboxにて記述し直してみたのですが、逆に複雑になってしまいました。
一応、webページ上ではfloatで記述されたものと同じ状態で反映されてはいるのですが、この記述の考え方（記述の仕方）であっているのか不安です。

間違っていたり、もっと効率よい記述の仕方がありましたら、教えて頂けますでしょうか？
どうぞよろしくお願いいたします。

【html】

<header>
　　<div class="wrapper">
　　<div class="img">
　　　<img src="images/tel.png" alt="TEL 012-345-6789">
　　</div><!--.img-->
　　<div class="logo-nav">
　　　<div class="sentence">
　　　　<h1>○○の○○向け○○○○○○○○○○なら<br><span>【お店の名前】</span></h1>
　　　</div><!--.sentence-->
　　　<nav>
　　　<ul>
　　　　<li><a href="#">ホーム</a></li>
　　　　<li><a href="#">メニュー一覧</a></li>
　　　　<li><a href="#">ご予約</a></li>
　　　</ul>
　　　</nav>
　　</div><!--.logo-nav -->
　</div><!--.wrapper-->
</header>

【CSS】

header {
  width:100%;
  margin-bottom: 20px;
  border-top: 5px solid #345c39;
}

.wrapper {
  width: 960px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.img {
  margin-left: auto;
}

.logo-nav {
  height: 69px;
  display: flex;
  justify-content: space-between;
}

.sentence {
  background: url(images/logo.png) no-repeat;
  padding-left: 51px;
}

.logo-nav h1 {
  font-size: 12px;
}

.logo-nav span {
  font-size: 33px;
  font-weight: bold;
  line-height: 54px;
}

.logo-nav ul {
  display: flex;
}

nav {
  margin-top: 40px;
}

a {
  font-weight: bold;
  margin-left: 29px;
}

m.ts10806

2019/02/22 05:33

頭に.も#もつかない場合はそういうタグ名として認識されます。サンプルなのは良いですが、構文は守っていただければと（質問は編集できます）あと、「更に良い意見が欲しい」という方向なのであれば、HTMLもCSSもなるべく完全なものの方が好ましいです。回答者が補完しなければならない部分が多すぎると的確なアドバイスとなりません。

yu-smc

2019/02/22 05:34

div1 - div5がどのような構造でマークアップされているかがわからないと質問文の解読ができないので、ご提示いただけますか？

退会済みユーザー

2019/02/22 06:49

mts10806様、yu-smc様、大変失礼いたしました。誤った記述方法、そして分かりづらい内容にて投稿してしまい、申し訳ございません。ご指摘下さりありがとうございます。内容を修正させていただきました。画像も新しいものに差し替えております。申し訳ございませんが、よろしくお願いいたします。

yu-smc

2019/02/22 06:59

ありがとうございます。ちょっとまだ実現したいことが100%わからないですね・・・。ロゴマーク・日付・お店の名前のブロックと、画像・メニュー一覧のブロックをそれぞれ左端、右端に横並びで配置するということであっていますでしょうか。

退会済みユーザー

2019/02/22 07:29

yu-smc様、ご返信ありがとうございます。意図を上手くお伝え出来ておらず、何度も申し訳ございません…。はい、そのような配置にしたいと思っています。画像のような表示になる事を目指して、floatではなく、初めてflexを使ってマークアップをしました。たしかに画像と同じ状態の配置にはなったのですが、果たしてこの記述方法が最善なのか自信がなく、質問させて頂きました。もしかしたら、本来ならばもっと完結に記述できるものを、複雑に記述してしまっているのではないか？と不安に思っています。（講座の解答は全てfloatのみで記述してあり、flexで記述した場合どのようにマークアップするかが書かれていない状態です。）よろしくお願いいたします。

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

回答1件

ベストアンサー

まずflexの基本的な考え方ですが、
「同じ法則で横並びにする複数の要素を親要素で囲み、親要素にflex指定をして、並び方の法則はflex関連のCSSプロパティで宣言する」と認識しています。

外側からみていきましょう。

①まず一番外側、ロゴマーク、日付、お店の名前の要素を一括り(header-left)にし、画像とメニューの要素を一括り(header-right)にします。
②header-leftとheader-rightを横に並べたいので、さらに上の要素を作り、その要素にflexを指定します。今回は両端に並べるので、justify-content: space-betweenも指定します。

html
1<div class="header">
2  <div class="header-left">
3      ロゴマーク要素
4      日付要素
5      店名要素
6  </div>
7  <div class="header-right">
8    画像要素
9    メニュー要素
10  </div>
11</div>

css
1.header {
2  display: flex;
3  justify-content: space-between;
4}

③このままではheader-left, header-rightの中身が縦並びのままなので、修正します。
④leftは「ロゴマーク」と「その他」を横並びにしたいので、その他の部分を一括りにし、さらにその親であるheader-leftにflex指定をかけます。
⑤rightは縦並びでいいので、そのままです。

html
1<div class="header">
2  <div class="header-left">
3    ロゴマーク要素
4    <div class="date-store">
5      日付要素
6      店名要素
7    </div>
8  </div>
9  <div class="header-right">
10    画像要素
11    メニュー要素
12  </div>
13</div>

css
1.header {
2  display: flex;
3  justify-content: space-between;
4}
5
6.header-left {
7  display: flex;
8}

⑥最後にメニュー要素のli要素が横並びになるようにul要素にflexを指定します。

css
1
2ul {
3  display: flex;
4}
5

複雑に見えますが法則は同じなので、慣れるとfloat嫌いになります笑

うまく説明できているか不安なので、わからないことがあれば聞いてください。

投稿2019/02/22 07:50

編集2019/02/22 07:56

yu-smc

総合スコア610

退会済みユーザー

2019/02/22 09:35

yu-smc様、ご回答ありがとうございます。大変分かりやすくご丁寧に説明して下さり、感謝いたします！順序立ててて詳しく教えて頂いたおかげで、よく理解する事が出来ました。こちらの記述方法にて何度も復習して、しっかり身につけたいと思います。お忙しいところ大変貴重な機会を与えて下さり本当にありがとうございます！！

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