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

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

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

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

Q&A

解決済

1回答

1181閲覧

HTML headerのul li がなぜか反映されない

AyakaFujimoto

総合スコア4

HTML5

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

0グッド

0クリップ

投稿2021/08/31 14:28

HTML CSSを独学で学んでおります。
基礎をある程度動画教材で学び、現在
転職でポートフォリオにのせるコーポレートサイトをつくっています。

トップページをだいたいHTMLでセクションごとに区切り、
ヘッダー部分に取り掛かろうとしたところ、
HTMLのheaderのナビゲーション、

<nav><ul><li>部分 こちらがプレビューしてもなにも文字が出てきません。 コードがまちがっているわけではなさそうなのですが、 しらべてもわからず、お手上げ状態です。 ちなみにNEWSで使用しているnavはきっちり繁栄されています。

どなたかご教授くださいませ、、、

発生している問題・エラーメッセージ

ヘッダーのナビゲーション部分(トップページ 会社概要など)のHTMLが反映しない
文字がででこない

該当のソースコード

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>あああああ</title> <meta name="description" content="ああああ"> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" href="../newjeyes/css/stylesheet.css"> <link rel="icon" type="image/png" href="images/favicon-02.png"> </head> <body> <div class="container">
<header class="header"> <h1 class="logo"><img src="#" alt="あああ"> </h1> <nav> <ul> <li>トップページ</li> <li>トップページ</li> <li>トップページ</li> <li>トップページ</li> <li>トップページ</li> </ul> </nav>
<ul> <li>トップページ</li> </ul>
</header> <div class="topphoto"> <img src="#" alt="メイン画像"> </div> <main class="main"> <article class="maintext"> ああああああああああああああああああ。</p> </article> <section class="NEWS"> <h2>NEWS</h2> <nav class="nav_news"> <ul class="ul_news"> <li> <div class="day">2021.8.3</div> <div class="label">ラベル</div> <div class="text">夏季休業のお知らせ</div> </li> <li> <div class="day">2021.7.14</div> <div class="label">ラベル</div> <div class="text">7月の祝日移動に伴う営業日変更のお知らせ</div> </li> <li> <div class="day">2018.12.27</div> <div class="label">ラベル</div> <div class="text">ホームページをリニューアル致しました。</div> </li> </ul> </nav> </section> <div class="products"> <h2>製品紹介</h2> <img src="../images/グループ 8.png" alt="製品紹介"> <img src="../images/グループ 6.png" alt="製品紹介"> <img src="../images/グループ 2.png" alt="製品紹介"> <img src="../images/グループ 16.png" alt="製品紹介"> <img src="../images/グループ 14.png" alt="製品紹介"> <img src="../images/グループ 12.png" alt="製品紹介"> </div> <div class="facilitys"> <h2>設備内容</h2> </div> <div class="flow"> <h2>ご注文の流れ</h2> </div> <div class="qa"> <h2>よくあるご質問</h2> </div>

 <!---お電話メールお問い合わせはこちら-->

<!---お電話メールお問い合わせはこちら--> <!-- <img src="#" alt="採用情報"> ---> </div> </main> <footer> <p>あああああ</p> </footer> </div> </body> </html> ### 試したこと NEWSのnavと被ったのかと思いクラスで名前など分けてみたが効果なし ### 補足情報(FW/ツールのバージョンなど) グーグルクローム エディタ VSC

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

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

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

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

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

itagagaki

2021/08/31 14:34

<link rel="stylesheet" 2つを消すとどうなりますか?
AyakaFujimoto

2021/08/31 14:46

早速ありがとうございます>< 今cssのリンク二つを消してみると、 ul liの文字が出てきました!! cssの装飾で隠れていたということなのでしょうか、、 またこの後cssをどのようにすれば良いかなどアドバイスを頂ければ幸いです...><
itagagaki

2021/08/31 14:59

CSSのコードのどれかが影響していたのでしょうね。 まずは、2つのうち、どちらが影響していたか?ですね。 ../newjeyes/css/stylesheet.css かな?という気がしますが。 その中の設定を、半分ずつとか、1ブロックずつとか、消して試してみてはどうでしょうか。
AyakaFujimoto

2021/08/31 15:22

ヘッダーのナビゲーションのすぐ下にあったメイン画像を消して、 cssでdisplay flexで横並びにして、 ヘッダーのロゴ部分と並ぶような形で表示してみると、できました、、! 隠れてた?ような形でした>< ご教授いただき、ありがとうございました!
guest

回答1

0

自己解決

ヘッダーのナビゲーションのすぐ下にあったメイン画像を消して、
cssでdisplay flexで横並びにして、
ヘッダーのロゴ部分と並ぶような形で表示してみると、できました、、!
隠れてた?ような形でした><

投稿2021/08/31 15:22

AyakaFujimoto

総合スコア4

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問