html,cssの勉強をしている者です。どうしても理解できなかったことがあるので詳しい方に教えて頂

解決済

質問者：mmuuuuu
質問日時：2021/07/24 22:32
回答数：1件

html,cssの勉強をしている者です。

どうしても理解できなかったことがあるので詳しい方に教えて頂きたいです。また、勉強を始めたばかりなのでわかりにくい箇所があるかと思いますがお手柔らかにお願い致します。。

完成header部は、ロゴとメニューが両端に横並びに配置されているような状態です。

htmlは、
<header>
<div class=クラス名>
<h1><img src=ロゴ画像></h1>
<nav><ul>
<li><img src=メニュー画像1></li>
<li><img src=メニュー画像2></li>
<li><img src=メニュー画像3></li>
<li><img src=メニュー画像4></li>
</ul></nav>
</div></header>

cssは、
header{background-color:#fff
padding:10px 0;}
header.クラス名{width:900px;
margin:auto;
display:flex;
justify-content:space-between;}
nav ul{display:flex;}
nav ul li{width:100px;
height:50px;}
nav ul li{display:block;
width:100%
height:100%
color:transparent;
line-height:0;}

①上記記述でなぜdivクラス名が必要なのか？
cssでheader全体とクラス名と別れて記述されていますが、私の理解では大きいタグとその中で加工を別にしたいものにクラス名をつけてcssでわけて記述すると思っていたのですが、そもそもこのhtmlではクラス名をつける必要はありますか？

②cssの記述で、nav ul liの記述が２つありますが、これは１つにまとめても問題はありませんか？（どちらにもwidthやhightが違う値で記述あるのも不明で）

vs Codeで検証してみてるのですが上手くできずご教授頂きたいです。
宜しくお願い致します！

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： gura_
回答日時：2021/07/25 17:22

mmuuuuuさん

････なぜdivクラス名が必要なの･･････
････記述が２つあります･･････

色々、無駄などがあるようですね。
この部分だけ考えたら、貴方の考えの方が正しいようですが。

色々弄って確かめてみたら如何ですか。

例↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
header { background-color:#ffe; padding:10px 0;
width:900px;
margin:auto;
display:flex;
justify-content:space-between;}
nav ul{display:flex;}
nav ul li{width:100px;
height:50px;
display:block;}
</style>
</head>
<body>
<header>
<h1><img src="https://oshiete.xgoo.jp/images/v2/pc/qa/question …
<nav><ul>
<li><img src="https://oshiete.xgoo.jp/images/v2/common/profile …
<li><img src="https://oshiete.xgoo.jp/images/v2/common/profile …
<li><img src=メニュー画像3></li>
<li><img src=メニュー画像4></li>
</ul></nav>
</header>
</body>
</html>