Q&A
ご回答ありがとうございます。
確かに"wrapper"はHTML全体を通して何度も使いまわすクラスですので
効率化を図って記述を進める意図があるのかもしてないですね。
この先のページ作成も進めていく中で、再び"wrapper"が出てくる場面があると思いますので
どのような使われ方をしているか注目してみますね。
前提・実現したいこと
お世話になります。
かなり初歩的な質問だと思われ、自分でも探してみたのですが、きっと同じような質問はあるのだと思うのですが・・・。
まだこうした方面での語彙力が乏しく、検索時の適切なワード選びなどができず
上手く見つけ出せなかったので新たにご質問をさせていただきたいです。
現在Manaさんが執筆されました”１冊ですべて身につく HTML＆CSSとWebデザイン入門講座”でサイト制作の実習をしています。
最初のheaderの作成で１個所疑問点がございます。
display:flexでheader内のロゴとナビメニューを左右に配置するのですが
その後ロゴのメニューが両端に寄っているのを少し中央側に寄せるために
追加でCSSで記述を行う指示が出ています。
この部分で疑問がございます。
flexを適用するためにまず”page-header”というクラスをheaderに付与しますが
その後上記の調整のために”wrapper”を追加しております。
ここで
max-width: 1100px;
margin: 0 auto;
padding: 0 4%;
を”page-header”ではなく"wrapper"に分けて記述する理由はなんなのでしょうか。
試しに"wrapper"をコメントアウトし、上記の３行を”page-header”に追加した際は
表示の結果は同じであるように見えました。
なぜここでわざわざクラスを分けて記述を行うのか
初歩的な内容で恐れ入りますが、ご教示いただけますと幸いです。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
-index.html-
<body> <header class="page-header wrapper"> <h1><a href="index.html"><img src="images/logo.svg" alt="WCBカフェホーム" class="logo"></a></h1> <nav> <ul class="main-nav"> <li><a href="news.html">News</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> </body>-style.css-
.page-header {
display: flex;
justify-content: space-between;
}
.wrapper {
max-width: 1100px;
margin: 0 auto;
padding: 0 4%;
}
試したこと
"page-header"に、”wrapper”の記述を行い表示結果を確認してみた。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
0
ベストアンサー
"page-header"と"wrapper"に記述されている内容を見てみると2つクラスは役割が分けられていることに気づくと思います。
"page-header"…flexレイアウトの指定
"wrapper"…幅、中央寄せの指定
flexレイアウトか中央寄せ、どちらか一方だけを使いたいという場面が今後出てくると想定して二つに分けているのかとおもいます。
"page-header"はおそらくページ内に1回しか登場しないでしょうから、wrapperの幅指定を使いまわしたいということなのではと推測します。
投稿2021/09/05 03:20
総合スコア50
0
その書籍が手元に無いのでわかりませんが、後々wrapperが付く要素が出てくるのでは。
（例えばフッタエリアを作成する際に、同じ幅を持たせるならclass="page-footer wrapper"とできる）
投稿2021/09/05 02:36
総合スコア69407
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/09/05 06:12