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

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

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

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

Flex

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

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

3153閲覧

HTML/CSS Flexが反映されない。検証ツールでは

missy

総合スコア12

CSS3

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

Flex

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

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2021/04/06 16:50

質問失礼します。

Flexが反映されません。
CSSを新しく書き直しているので。display: block; の記載は1つもないです。なのに、検証ツールで確認してみるとulの所にdisplay: block; が記載されている状況です。おそらくこれが原因かと思います。
でも、そもそもCSSに記載をしていないので、かき消す事もできません。
どのように解消したらいいのでしょうか?

    <header class="header">
<div class="content-wrapper header-nav">
<h1>XX株式会社</h1>
<nav>
<ul>
<li><a href="#">トップページ</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">事業内容</a></li>
<li><a href="#">採用情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</div>
</header>

.header-nav {
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
border: 2px solid #000;
background-color: lightcoral;
margin-left: auto;
}

.header nav ul li {
margin-right: 50px;

}

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

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

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

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

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

guest

回答1

0

ベストアンサー

下記のclassの前の全角空白を半角空白に修正。
<header class="header">

あと、CSSに下記のコードを追加すれば横並びになります。

css

1.header nav ul { 2 display: flex; 3}

投稿2021/04/06 17:20

編集2021/04/07 10:30
hatena19

総合スコア33620

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

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

missy

2021/04/06 20:30

ご回答ありがとうございます。 無事にフレックス反映できました。(半角になっていないだなんて、単純な見落としですね..) 1つ質問いいでしょうか? .header-nav { で display: flex; を記載しているのにも関わらず .header nav ul { でも display: flex; を記載する必要があるのはなぜなのでしょうか? ご回答いただけると大変助かります!
hatena19

2021/04/07 01:10

display: flex; は子要素にしか効果がありません。 li要素も横並びさせたいなら、親要素の ul要素に display: flex; が必要です。
missy

2021/04/07 10:03

なるほど!確実に理解したく思うのでさせてください! 今回の場合、.header-navのdisplay: flex; が .header nav ulに働きかけ、 .header nav ulのdisplay: flex; が .header nav ul li に働きかけた結果フレックスがちゃんと反映されたという事ですね? HTMLおよびCSSを独学で勉強しているため、ご回答いただけると大変うれしく思います。よろしくお願いいたします。
hatena19

2021/04/07 10:33

そういう理解でいいと思います。 用語的には、display: flex;を設定した要素をフレックスコンテナ、その影響を受ける子要素をフレックスアイテムといいます。いろいろ設定がありますので CSS FlexBox で検索して解説ページで学習することをお勧めします。
missy

2021/04/07 11:54

ご丁寧にありがとうございます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問