HTML/CSS Flex反映後の文字間の調節と位置

Question

質問失礼致します。

現在、模写コーディングをやっている最中なのですが、Flexboxは問題なく反映されているのですが各リストの間隔と位置の修正ができなくて困っています。

やりたい事
①各liの間隔を近くする（ナビゲーションバーのように）
②ulをclass="addressの位置と均等になる様に左側に置く

<footer class="footer">
            <div class="content-wrapper">
                <div class="address">
                    <h2>XX株式会社</h2>
                    <p>
                        〒000-0000<br>
                        東京都新宿区新宿1-2-3<br>
                        TEL [phone]<br>
                        FAX [phone]<br>
                </div>
                <ul>
                    <li><a href="#">トップページ</a></li>
                    <li><a href="#">会社概要</a></li>
                    <li><a href="#">事業内容</a></li>
                    <li><a href="#">採用情報</a></li>
                    <li><a href="#">お問い合わせ</a></li>
                </ul>
            </section>

.footer contact-wrapper {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 0;
}

.address h2 {
  width: 30%;
  margin-top: 80px;
  margin-left: 45px;
}

.address p {
  line-height: 1.8; 
  width: 30%;
  margin-top: 60px;
  margin-left: 45px; 
}

.footer ul {
  height: 100px;
  display: flex;
  justify-content: space-between;
  margin-left: auto;
  align-items: center;
  font-size: 1rem;
}

.footer ul li {
  margin-right: 50px;
  margin-left: auto;
}

HTML/CSS独学を始めたばかりで、調べても調べても模範の様にならなく途方に暮れています。

Comments

[mari.rinn]

私の書き込みと入れ違いで同じ内容のコメントがついてたので私の書き込みは削除しました。

Answer 1

HTMLもCSSもツッコミどころ満載ですね。

HTML

• footer要素の閉じタグがない。
• p要素の閉じタグがない。
• div要素の閉じタグが不足している。
• section要素は開始タグがない。

CSS

• .footer contact-wrapperセレクタに対応するHTML要素がない。

たぶん.footer .content-wrapper のことだと思われます。

まずは、上記の間違いを修正しましょう。話はそれからです。

Comments

[missy]

ご回答いただきありがとうございます。
独学でやっている次第、ツッコんでいただきたく質問させてもらっております(^^)ありがとうございます！

footerの閉じタグは、記載漏れでした...

ご回答内容修正したのですが、そのごどう修正すればいいのかご教授いただけませんでしょうか？
よろしくお願いいたします。

Answer 2

こんにちは。

Flexboxは問題なく反映されている

反映されていないと思います。

.footer contact-wrapper {→.footer .content-wrapper {

---

①各liの間隔を近くする（ナビゲーションバーのように）

マージンで余白を取っていることが原因では。

.footer ul li {
  margin-right: 50px; /* ←これを調節する */
  margin-left: auto;
}

---

__②ulをclass="addressの位置と均等になる様に左側に置く __

均等、というのがよくわからないですが、.address と ul の幅を同じに、ということであれば、width:50%やflex-basis:50%などとした方が手っ取り早いと思います。
また、ulを左側に置くのであれば、HTMLの順序を変えて ul を .address の前に書くのが筋だとは思いますが、HTMLを変更できない事情があるのでしたら、flex-direction: row-reverseがいいと思います。

.footer .content-wrapper {
	flex-direction: row-reverse;
}
.address,ul{
    flex-basis: 50%;
}

Comments

[missy]

ご丁寧なご回答ありがとうございます！

縦表記だったulが、横表記になっているのでフレックスが適応されているものだと思っていました。

ご回答いただきました件で、いくつかお教えくださいませ。

①.footer contact-wrapper {→.footer .content-wrapper {
→.footerとcontact-wrapperの間に「.」を入れるのはなぜでしょうか？
「.」を入れるCSSの書き方もあれば、「.」を入れない書き方との区別が未だに苦しんでおります。

②ulをclass="addressの位置と均等になる様に左側に置く→すみません、こちら"右側"の間違えでした。
よくあるナビゲーションバーのスタイル、左側：ロゴ、右：ナビゲーションバーのように、
addressを左に、ulの部分を右側に寄せたいのです。(マージンで右側を少し調節して)

私の質問力が怠らず、すみませんでした。
お助けいただけると大変うれしいです。

[Lhankor_Mhy]

①
.cls で、class="cls" の要素を示す、ということをご存じない、ということですか？
それとも、.cls1 .cls2 のようなクラスを複数指定するときに、どこにドットを打つべきかわからない、みたいな話ですか？

②
左側でいいならば、回答の flex-direction: row-reverse は必要ないです。

[missy]

ご回答ありがとうございます。

①.cls で、class="cls" の要素を示す件知りませんでした。
Progateや独学で勉強している本に詳細がなく、あやふやにしていたままでした。ありがとうございます！

②.footer ul の件ですが、未だに.address p の丁度下に位置していて、右側寄りになりません。どうするべきでしょうか？

ご回答いただけると大変助かります。

[Lhankor_Mhy]

現状のコードはどうなっていますか？

[missy]

記載させていただきます。

.footer .contact-wrapper {
width: 1200px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 50px 0;
}

.address h2 {
width: 30%;
margin-top: 80px;
margin-left: 45px;
}

.address p {
line-height: 1.8;
width: 30%;
margin-top: 60px;
margin-left: 45px;
}

.footer ul {
height: 100px;
display: flex;
justify-content: space-between;
margin-left: auto;
align-items: center;
font-size: 1rem;
}

.footer ul li {
margin-left: auto;
}

いかがでしょうか？

[Lhankor_Mhy]

.footer .contact-wrapper {
↓
.footer .content-wrapper {

です。