Q&A
> 上手く表示ができず
どう、うまくいっていないのか（期待する結果と違うのは具体的にどこか）を説明していただけますか？
とりあえず質問のコードで横並びで表示されているようには見えましたが。
前提・実現したいこと
添付画像のようにヘッダーのタイトル、言語切り替えボタン、ナビゲーションを横並びにて表示したいのですが、display:flex;にて上手く表示ができずおります。他の方法も検索にて試したのですが、うまくできず、もし解決法をご存知の方がおられましたらご教示いただけますと幸いです。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
html
1ソースコード 2```<body> 3 <!-- ヘッダー --> 4 <header id=”header” class="wrapper"> 5 <h1 class="site-title">TITLE</h1> 6 <!-- 言語切り替えボタン作成必要 --> 7 <a class="langage">languages</a> 8 <nav> 9 <ul class="main-nav"> 10 <li><a href="#about">事業紹介</a></li> 11 <li><a href="#achievement">実績</a></li> 12 <li><a href="#echnology">技術情報</a></li> 13 <li><a href="#infomation">会社案内</a></li> 14 <li><a href="contact">お問い合わせ</a></li> 15 </ul> 16 </nav> 17 </header> 18 19 20 21 22```CSS 23ソースコード 24```#header{ 25 display: flex; 26 justify-content: space-between; 27} 28 29.site-title{ 30 font-size: 28px; 31 margin-top: 30px; 32 margin-left: 33px; 33 font-family: 'Open Sans', sans-serif; 34} 35 36.language{ 37 display: inline-block; 38 border: solid 1px #263391; 39 border-radius: 15px; 40 padding: 6px 45px 5px 35px; 41} 42 43.main-nav{ 44 display: flex; 45 font-size: 16px; 46 font-family: 'ヒラギノ角ゴシック'; 47 margin-top: 62px; 48 margin-bottom: 20px; 49 list-style: none; 50} 51 52.main-nav li{ 53 margin-left: 74px; 54} 55 56.main-nav a{ 57 color:#141319; 58} 59 60 61よろしくお願いいたします。 62 63↓完成形 64 65↓現状況 66
提示されているコードをそのままCodePenに貼ってみました。
https://codepen.io/itagagaki/pen/jOLPYNZ
「現状況」のように折り返されてはいないので、何か他の部分が影響しているのでは。
itagagakiさん
ありがとうございます。他の部分も確認してみます。
回答1件
0
ベストアンサー
id=”header” の引用符が全角になってます。
diff
1 <!-- ヘッダー --> 2- <header id=”header” class="wrapper"> 3+ <header id="header" class="wrapper"> 4 <h1 class="site-title">TITLE</h1>
投稿2021/10/13 11:40
総合スコア34075
hatena19さん
ありがとうございます。こちら見逃してしまっておりました。
修正してみたところ、無事反映されました。感謝です。
あなたの回答
tips
プレビュー
