Q&A
他のブラウザだと適用されるのでしょうか？
また、
ソースコードは、画像ではなく、
質問本文に、コードブロックを使って記載してください。
```html か、css
ここにソースコード
```
のような形式です。
CSSがChromeで適応されません
まじでなぜだかわかりません
</body> </html><header> <div class="container"> <div class="header-logo"> <a href="#"> <img src="img/logo.svg" alt="ロゴ画像"> </a> </div> <div class="header-list"> <ul> <li><a href="https://code-step.com/demo/html/profile/#about">About</a></li> <li><a href="https://code-step.com/demo/html/profile/#bicycle">Bicycle</a></li> </ul> </div> </div> </header>
header {
height: 60px;
}
これです
何も変わりませんでした
回答2件
0
画像を貼られているのに表示されてる profile というのが
img/logo.svg でしたら、
imgのwidth、もしくはheightを指定していないのが原因なので、
表示したいサイズを決めて(仮に高さを60pxとしたら)
img{ height:60px; width:auto; }
のように(widthに数値を指定するならheightはautoで)CSSを書き加えてみてください。
投稿2021/04/04 13:23
編集2021/04/04 13:33
総合スコア296
0
ベストアンサー
結論として，私の手元の環境(windows10で動作するGoogle Chrome)で試すとCSSは読み込まれていました．
ただ，オーバーフローが発生していたため，指定された枠（height:60px;)をはみ出して表示されていました．
height:60pxが反映されているか確認
試しにcssを以下のように書くと，はみ出した部分（オーバーフロー）が切り取られるため，正しくCSSが反映されているか分かると思います．
css
1header { 2 height: 60px; 3 overflow:hidden; 4}
overlow:hiddenははみ出した部分は非表示にする命令です．
やりたいことを推測した解決策
ソースコードから予想したやりたいことを以下に示します．
- profileとメニュー全体で指定の高さに設定する．
上記を実現するには，画像や字のサイズを指定し，結果的に60pxとなるようにCSSファイルに記述する方法があります．例えば，画像は30pxの高さにして，字のサイズは10pxにするといった方法です．
念のため，例のcssを以下に示します．（高さを60pxにすることはできてないです）
css
1header { 2 height: 60px; 3 4} 5img{ 6 height:30px; 7} 8 9li{ 10 font-size:10px; 11}
CSSのデバッグ方法
CSSが反映されない（ように見える）といった問題はよく発生すると考えています．Google Chromeなどのブラウザには開発者用の画面があります．F12キーを押すことで開発者用の画面を表示できます．
開発者用の画面の画像を以下に示します．
開発者用の画面でやってみた操作を以下に示します．
- 今回のCSSはheaderタグを対象としてスタイルを指定しているため，真ん中のソースコードの部分で
<header>タグをクリック - 右側の赤枠を付けている部分で適用されたスタイルを確認（style.cssに記述されたheight:60pxが有効になっていることが確認できる）
投稿2021/04/04 13:42
総合スコア78
一番目のやつはロゴの上部歯科でなくなっちゃいましたが、二番目のやつでできました！
ありがとうございました！
あなたの回答
tips
プレビュー
