footerのリストの位置を右真ん中に配置させたい

ここに質問の内容を詳しく書いてください。
（例）footerのリストの位置を調整しています

footerのliリストの位置を右真ん中に配置したいのですがうまく調整できず、煮詰まってしまっている状態です。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>呪術廻戦</title>
6<link rel="stylesheet" href="sample.css">
7</head>
8<body>
9
10 <header>
11
12  <div class="logo">呪術廻戦</div>
13  <div class="header-list">
14   <ul>
15
16    <li>呪術廻戦とは</li>
17    <li>キャラクター一覧</li>
18    <li>お問い合わせ</li>
19    
20
21   </ul>
22
23  </div>
24
25 </header>
26   
27
28
29
30 <main>
31  <h1>呪術廻戦</h1>
32  <h2>呪術廻戦の世界へようこそ</h2>
33
34  <div class="contents"></div>
35  <div class="section-title">
36   <h3>メインキャラ</h3>
37
38  </div>
39   <div class="icon">
40    <img src="img/itadori.jpg" width="193" height="160">
41     <p>虎杖悠仁</p>
42   </div>
43
44   <div class="icon">
45    <img src="img/husiguro.jpg" width="193" height="160">
46     <p>伏黒恵</p>
47   </div>
48
49   <div class="icon">
50     <img src="img/kugisaki.jpg" width="193" height="160">
51      <p>釘崎野薔薇</p>
52   </div>
53   <div class="icon">
54    <img src="img/gozyou.jpg" width="193" height="160">
55     <p>五条悟</p>
56   </div>
57   
58   </div>
59
60   <div class="contact-form">
61    <h3 class="soction-title">お問い合わせ</h3>
62     <p>メールアドレス</p>
63     <input>
64     <p>お問い合わせ内容</p>
65     <textarea></textarea>
66     <p>必須項目は必ずご入力ください</p>
67     <input type="submit">
68
69
70    
71
72 </main>
73
74 <footer>
75  <div class="logo2">呪術廻戦</div>
76  <div class="footer-list">
77   <ul>
78
79    <li>呪術廻戦とは</li>
80    <li>キャラクター一覧</li>
81    <li>お問い合わせ</li>
82    
83
84   </ul>
85
86  </div>
87    
88    
89   
90
91   </div>
92
93 </footer>
94
95</body>
96</html>

CSS
1header{
2  background-color: black;
3  display: flex;
4
5}
6
7.logo{
8  color: azure;
9  font-size: 40px;
10  padding: 20px;
11}
12
13.header-list{
14  padding:20px;
15}
16
17.header-list li {
18  list-style: none;
19  color: azure;
20  display: inline;
21  padding:20px;
22}
23
24main{
25  
26}
27
28
29
30.section-title{
31  border-bottom:2px solid rgb(206, 201, 201);
32  font-size:20px;
33}
34
35.icon{
36  float: left;
37  margin-right: 40px;
38  margin-top:40px;
39}
40
41.contact-form{
42  clear: both;
43  padding-top: 100px;
44  
45}
46
47.soction-title{
48  border-bottom:2px solid rgb(206, 201, 201);
49}
50
51
52h1{
53  font-size: 200px;
54  color:rgb(233, 40, 104);
55}
56
57h2{
58  font-size:100px;
59}
60
61footer{
62  background-color: black;
63  height: 120px;
64  padding: 40px;
65}
66
67.logo2{
68 color: rgb(206, 201, 201);
69}
70
71.footer-list{
72  float:right;
73  
74}
75
76.footer-list li{
77  color: rgb(206, 201, 201);
78  list-style: none;
79  padding-bottom:20px;
80}

試したこと

footer-listに問題があると仮定し、li要素部分の上部の余白が開きすぎてしまっているため、上余白を詰めるため、margin-topを試みましたがなぜかヘッダーの下に余白が作られてしまい、うまく調整ができません。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

回答いただきありがとうございます。上記方法を試したところ、解決することができました。
また、こちらでlogo2にfloat-leftを適応させても同じようなことが起こりました。

投稿2021/04/05 14:10

HdNu

総合スコア32

mather

2021/04/07 04:06

float というのがどういう挙動をするのか理解しておかないと、どういうときに使うべきかわかりにくいかと思います。 float を使うときと使わないときとでブラウザの開発ツールなどを使って div 要素の形がどうなっているか調べてみましょう。

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

ベストアンサー

まず、 footer に </div> が一つ多いです。インデントなどをきちんと整理しながら書けば間違いに気付きやすいと思います。

<footer>
  <div class="logo2">呪術廻戦</div>
  <div class="footer-list">
    <ul>
      <li>呪術廻戦とは</li>
      <li>キャラクター一覧</li>
      <li>お問い合わせ</li>
    </ul>
  </div>
</footer>

CSSですが、シンプルに text-align: right; では期待通りとは言えないのでしょうか？

diff
1 footer{
2   background-color: black;
3-  height: 120px;
4   padding: 40px;
5 }
6
7 .footer-list{
8-  float:right;
9+  text-align: right;
10 }

投稿2021/04/05 10:25

mather

総合スコア6753

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！