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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

Q&A

解決済

2回答

684閲覧

html css でのflexboxの使い方について

manachos

総合スコア2

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

0グッド

0クリップ

投稿2020/05/09 09:40

編集2020/05/11 03:19

HTML,CSSでflexboxの使い方について教えていただきたいのですが、ヘッダー部分のリストを右側に寄せて横並びにしたいのですが、float:rightを使わずにflexboxを使い右寄せ横並びにしたいです。 
調べながらflexを使ってみたのですが、ヘッダーリストがヘッダーの下にはみ出してしまいます。
どのようにしたら見本の画像のようにヘッダーリストを配置できるのでしょうか、初歩的な質問で申し訳ないですがよろしくお願いいたします。

見本の画像

見本の画像のfloatを使っての HTML

<header> <div class="container"> <div class="header-left"> <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png"> </div> <div class="header-right"> <span class="fa fa-bars menu-icon"></span> <a href="#">レッスン</a> <a href="#">新規登録</a> <a href="#" class="login">ログイン</a> </div> </div> </header>

見本の画像のfloatを使ってのcssコード

header { height: 65px; width: 100%; background-color: rgba(34, 49, 52, 0.9); position :fixed; top: 0; z-index: 10; } .logo { width: 124px; margin-top: 20px; } .header-left { float: left; } .header-right { float: right; margin-right: -25px; } .header-right a { line-height: 65px; padding: 0 25px; color: white; display: block; float: left; transition: all 0.5s; }

flexを使ってのコード HTML

<header> <div class="container"> <div class="header-left"> <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png"> </div> <div class="header-right"> <div class="header-list"> <a href="#">レッスン</a> <a href="#">新規登録</a> <a href="#">ログイン</a> </div> </div> </div> </header>

flexを使ってのコード CSS

header { height: 65px; width: 100%; background-color: rgba(34, 49, 52, 0.9); } .header-left { display: flex; } .logo { width: 124px; margin: 20px 30px; } .header-right { display: flex; justify-content: flex-end; }

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

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

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

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

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

m.ts10806

2020/05/09 09:43

全ての人がProgateを利用するわけではありません。 「現役のエンジニア」だとほとんど利用してないのではないでしょうか。 いずれにしても何かしら自身で書いたコードと起きている問題を具体的に提示してください。 タイトルもこのタイトルでは何も要件が分からないので、調整してください。 質問は編集できます。
kei344

2020/05/10 17:21

(質問文は編集できます)ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
manachos

2020/05/11 01:54

質問へのご指摘ありがとうございました。質問の仕方を良く調べず質問してしまいました。 今後は気を付けたいと思います。わからない箇所、コードなど詳しく載せたいと思います。
m.ts10806

2020/05/11 01:59

質問は編集できます。
guest

回答2

0

ベストアンサー

flexは親要素に指定します。

CSS

1.container { 2 display: flex; 3} 4.header-right { 5 align-self: center; 6 margin-left: auto; 7} 8```**動くサンプル:**[https://jsfiddle.net/m7kohfLt/](https://jsfiddle.net/m7kohfLt/) 9 10--- 11 12【これからのCSSレイアウトはFlexboxで決まり! | Webクリエイターボックス】 13[http://www.webcreatorbox.com/tech/flexbox/](http://www.webcreatorbox.com/tech/flexbox/) 14 15【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】 16[http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html](http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html) 17 18【CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LIG】 19[http://liginc.co.jp/web/html-css/css/21024](http://liginc.co.jp/web/html-css/css/21024)

投稿2020/05/11 03:28

kei344

総合スコア69366

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

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

manachos

2020/05/11 04:45

回答ありがとうございます。 見本と同じように配置することができました!参考サイトも教えて頂きありがとうございました。 さっそく参考にさせていただきます。
guest

0

flexboxを使うんじゃなくて、text-align: right;でやってみてください!!

投稿2020/05/11 03:15

zen22vv

総合スコア137

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

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

manachos

2020/05/11 04:51

回答ありがとうございます。 参考にさせていただきます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問