質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2686閲覧

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

ampm36

総合スコア13

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/02/22 05:31

編集2019/02/22 06:59

こんにちは、初めて質問させて頂きます。
最近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; }

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/02/22 05:33

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

2019/02/22 05:34

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

2019/02/22 06:49

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

2019/02/22 06:59

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

2019/02/22 07:29

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

回答1

0

ベストアンサー

まず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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ampm36

2019/02/22 09:35

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問