指定していないのに右寄せになる

前提・実現したいこと

書籍でプログラミングを勉強中です。
書籍通りにプログラミングを書いたら、サイドバーの広告のカテゴリーリストが右寄せになっています。
cssで指定していないのになぜこのようなことが起こるのでしょうか？

すべて左寄せにしたいです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Web Cafe - NEWS</title>
7  <link rel="stylesheet" href="css/index.css">
8  <link rel="stylesheet" href="css/news.css">
9</head>
10
11<body>
12  <div id="news" class="big-bg">
13    <header class="page-header wrapper">
14      <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1>
15      <nav>
16        <ul class="main-nav">
17          <li><a href="news.html">News</a></li>
18          <li><a href="menu.html">Menu</a></li>
19          <li><a href="contact.html">Contact</a></li>
20        </ul>
21      </nav>
22    </header>
23
24    <div class="wrapper">
25      <h2 class="page-title">News</h2>
26    </div> <!-- .wrapper -->
27
28    <div class="news-content wrapper">
29      <article>
30        <!-- 記事 -->
31        <header class="post-info">
32          <h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2>
33          <p class="post-date">3/30 <span>2019</span></p>
34          <p class="post-cat">カテゴリー：お店の紹介</p>
35        </header>
36        <img src="" alt="">
37        <p>
38          テキスト
39        </p>
40        <p>
41          テキスト
42        </p>
43        <p>
44          体に
45        </p>
46      </article>
47
48      <aside>
49        <!-- ./広告 -->
50        <h3 class="sub-title">カテゴリー</h3>
51        <!-- ./見出し -->
52        <ul class="sub-menu">
53          <!-- カテゴリーリスト -->
54          <li><a href="#">お店の紹介</a></li>
55          <li><a href="#">期間限定のメニュー</a></li>
56          <li><a href="#">イベント</a></li>
57          <li><a href="#">お客様との会話</a></li>
58        </ul>
59
60        <!-- ./見出し -->
61        <h3 class="sub-title">このお店について</h3>
62
63        <!-- ./本文 -->
64        <p>
65          体に
66        </p>
67      </aside>
68    </div><!-- /.news-content -->
69
70    <footer>
71      <div class="wrapper">
72        <p><small>&copy; 2019 Manabox</small></p>
73      </div>
74    </footer>
75  </div><!-- /#news -->
76</body>
77
78</html>
79

css
1/* NEWS */
2#news {
3  background-image: url(../images/art-art-materials-bright-743986-1024x768.jpg);
4  height: 270px;
5  margin-bottom: 40px;
6}
7
8#news .page-title {
9  text-align: center;
10}
11
12.news-content {
13  display: flex;
14  /* 中の子要素を横並びにする */
15  justify-content: space-between;
16  /* 中央に隙間を開ける */
17  margin-bottom: 50px;
18}
19
20/* 記事部分 */
21article {
22  width: 74%;
23}
24
25.post-info {
26  position: relative;
27  padding-top: 4px;
28  margin-bottom: 40px;
29  /* background-color: red; */
30}
31
32.post-date {
33  background: #0bd;
34  border-radius: 50%;
35  /* 図形の角を丸くする */
36  color: #fff;
37  width: 100px;
38  height: 100px;
39  font-size: 1.625rem;
40  text-align: center;
41  /* 内部を中央寄せ */
42  position: absolute;
43  top: 0;
44  padding-top: 10px;
45}
46
47.post-date span {
48  font-size: 1rem;
49  border-top: 1px rgba(255, 255, 255, 5) solid;
50  padding-top: 6px;
51  display: block;
52  width: 60%;
53  margin: 0 auto;
54}
55
56.post-title {
57  font-family: "Yu Mincho", "YuMincho", serif;
58  font-size: 2rem;
59  font-weight: normal;
60  /* フォントの太さ */
61}
62
63.post-title,
64.post-cat {
65  margin-left: 120px;
66}
67
68article img {
69  margin-bottom: 20px;
70  /* 画像の余白 */
71}
72
73article p {
74  margin-bottom: 1rem;
75  /* 記事の余白 */
76}
77
78/* サイドバー */
79aside {
80  width: 22%;
81  /* background-color: red; */
82}
83
84.sub-title {
85  font-size: 1.375rem;
86  padding: 0 8px 8px;
87  border-bottom: 2px #0bd solid;
88  font-weight: normal;
89  /* background-color: red; */
90}
91
92.sub-menu {
93  margin-bottom: 60px;
94  list-style: none;
95  background-color: red;
96}
97
98.sub-menu li {
99  border-bottom: 1px #ddd solid;
100}
101
102.sub-menu a {
103  color: #432;
104  padding: 10px;
105  display: block;
106  /* background-color: red; */
107}
108
109.sub-menu a:hover {
110  color: #0bd;
111}
112
113aside p {
114  padding: 12px 10px;
115  /* background-color: red; */
116}
117
118footer {
119  background: #432;
120  text-align: center;
121  /* フッター内部を中央寄せ */
122  padding: 26px 0;
123}
124
125footer p {
126  color: #fff;
127  font-size: 0.875rem;
128}
129

行動規範の内容に同意します

回答4件

ベストアンサー

仰っておられるのはこの余白の事ですよね?

css
1.sub-menu {
2  margin-bottom: 60px;
3  list-style: none;
4  background-color: red;
5}

▲ はulへの指定ですが、、、

ulは規定値として
左にpadding(marginの場合もあるかも)が入っている為
padding-leftやmargin-left を指定しないと
左側に一定(ブラウザにより2em~)の余白が入ります。

ですので

css
1.sub-menu {
2  margin-bottom: 60px;
3  list-style: none;
4  background-color: red;
5  padding-left: 0; /* これを追加、必要に応じ端からの数値をpxで入れます */
6  margin-left: 0; /* これを追加 */
7}

にすると、左にある余白は消せます

投稿2020/07/01 13:25

編集2020/07/01 13:28

-millmill-

総合スコア676

tetsuya7724

2020/07/01 13:42

できました。ありがとうございます。

行動規範の内容に同意します

cssで指定していないのになぜこのようなことが起こるのでしょうか？

ここでばっちり指定しています。

CSS
1.news-content {
2  display: flex;
3  /* 中の子要素を横並びにする */
4  justify-content: space-between;
5  /* 中央に隙間を開ける */
6  margin-bottom: 50px;
7}

詳しくは、その書籍の「フレキシブルボックス」とか「flexレイアウト」とか書いてある(だろう)あたりを読んでください。

投稿2020/07/01 12:51

Daregada

総合スコア11990

カテゴリーリストの親要素（<div class="news-content wrapper">）がflexboxコンテナだからです。
スタイルシートのコメントに自分で書いているように、そのように指定した要素の中の子要素は横並びになります。
子要素であるarticle要素とaside要素が横に並ぶので、aside要素は右側に表示されます。

css
1.news-content {
2  display: flex;
3  /* 中の子要素を横並びにする */
4  justify-content: space-between;
5  /* 中央に隙間を開ける */
6  margin-bottom: 50px;
7}

投稿2020/07/01 12:58

ku__ra__ge

総合スコア4524

tetsuya7724

2020/07/01 13:03

aside要素はたしかに右側にいきますが、その中のliたちはなぜ右寄せになっているのでしょうか？ asideの中のものすべてが右寄せになるのであれば、カテゴリーの文字も右側にくると思います。私が質問しているのはasideが右に来ているのがおかしいといっているのではなく、aside内にあるliが指定していないのに右寄せになっていることです。

Daregada

2020/07/01 13:23

それなら、「リスト項目が右寄せになっているように見える」と書かないと通じない。リストとリスト項目では別のものだから。実際には、文字が右に寄っていないので右寄せ(右揃え)ではないよね。左側に隙間があるだけです。list-style-typeをnoneにしただけなので、その分のマージンまたはパディング(ブラウザーによりどっちを使うか異なる)が残っている。

tetsuya7724

2020/07/01 13:41

なるほど。liにはもともとpadding or marginがデフォルトであると言うことですね。ありがとうございます。

行動規範の内容に同意します

 <div class="news-content wrapper">
   <article>
   </article>
   <aside>
   </aside>
 </div>

とやっていてdivにflex

css
1.news-content {
2  display: flex;
3  /* 中の子要素を横並びにする */
4  justify-content: space-between;
5  /* 中央に隙間を開ける */
6  margin-bottom: 50px;
7}

article、asideに74、22%とやっていて完璧に横並びにしてます

css
1
2/* 記事部分 */
3article {
4  width: 74%;
5}

css
1/* サイドバー */
2aside {
3  width: 22%;
4  /* background-color: red; */
5}

追記

私も他の回答者も間違えたので代弁します笑
一般的に右寄せというのはこういうことを言います。

投稿2020/07/01 12:49

編集2020/07/01 13:29

sousuke

総合スコア3830

tetsuya7724

2020/07/01 12:55

やってみましたが、直りません

sousuke

2020/07/01 13:04

なにをやったかわかりませんので直らなくてもこちらにどうしろと。右寄せというのは文字の開始部分のことですか？「カテゴリー」に比べて「お店の紹介」の文頭が位置が右という意味でしたらデフォルトのpadding、marginがあるせいなので .sub-menu { padding: 0;margin: 0; margin-bottom: 60px; list-style: none; background-color: red; } みたいにして消してください。

tetsuya7724

2020/07/01 13:14

大変失礼しました。自分が書いたコードと全く同じコードが解答で返ってきたもので、自分でもどう返答したらいいかわかりませんでした。ご指摘のとおり、「お店の紹介」の文頭の位置が指定していないのに右に来ていたのでおかしいという質問でした。 paddingとmarginで上書きをするということですね。書いてみたらできました。ありがとうございます。

行動規範の内容に同意します

あなたの回答