HTML CSS footerの文字の位置を調整したい。

架空のwebサイトを作成しています。

footer部分の文字を左右で分けて配置し、そのあと上下左右自由に微調整等も行えるようにしたいのですが記述法がわからず困っております。

イメージとしましては、住所:〒000-0000○○県○○市の部分で区切った後、Home以降の文字を右側にしてそこから上下左右の調整を行いたいです。

＃試したこと
CSSにてtext-align: center;で右側にずらすことはできたのですが、上部分に文字を上げる調整ができません。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>ブランドサイト</title>
6        <link href="css/style.css" rel="stylesheet">
7    </head>
8
9	<body>
10   
11     
12     <div class="news">
13       <h1>NEWS</h1>
14      </div>
15
16      <div class="news5">
17       <dl>
18        <div class="contena">
19           <dt>2021.7.25</dt>
20           <dd>新商品がリリースされました。</dd> 
21        </div>
22        <div class="contena">
23          <dt class="con1">2021.6.11</dt>
24          <dd>ブランド展示会の予約について。</dd>
25        </div>
26        <div class="contena">
27           <dt>2021.5.27</dt>
28           <dd>ブランド展示会を開催します。</dd>
29        </div>
30        <div class="contena">
31          <dt class="con2">2021.4.13</dt>
32          <dd>お店のご紹介動画ができました。</dd>
33        </div>
34        <button class="btn5">お知らせ一覧</button>
35       </dl>
36
37      </div>
38    <footer>
39      <p>営業時間:10:00~19:00<br />
40         定休日:日曜日と祝日<br />
41         住所:〒000-0000○○県○○市<br />
42        <p class="foo">
43         Home<br />
44         About<br />
45         Product<br />
46         Online Store<br />
47         NEWS<br />
48        </span>
49      </p>
50        
51      
52
53    </footer>
54   </div>
55	</body>
56</html>
57

CSS
1
2.news{
3text-align: center;
4}
5
6.news h1{
7  display: block;
8  margin-left: 50px;
9  text-decoration:underline;
10  text-underline-position:above;
11  font-family: 'Sitka Display',sans-serif;
12  text-align: center;
13  font-size: 50px;
14}
15
16.news5{
17  text-align: center;
18  background-color:rgb(243, 240, 235);
19  height: 400px;
20  padding-top:80px;
21}
22
23dd, dt{
24  display: inline-block;
25}
26
27dd{
28  text-decoration:underline;
29  text-underline-position:above;
30}
31
32dt.con1{
33  padding-left: 15px;
34}
35
36dt.con2{
37  padding-left: 15px;
38}
39
40.contena{
41  padding-bottom: 40px;
42}
43
44.contena dd:hover{
45  opacity: 0.5;
46}
47
48.contena dd{cursor: pointer}
49
50.btn5{
51  border: 1px solid rgb(238, 243, 238);
52  border-radius: 5px;
53  background-color: rgb(118, 124, 118);
54  padding: 20px;
55  text-align: center;
56  color: white;
57  width: 280px;
58  margin-left:20px;
59  margin-top: 30px;
60}
61
62.btn5:hover{
63  opacity: 0.7;
64}
65
66.btn5{cursor: pointer}
67
68footer{
69  width: 100%;
70  height: 300px;
71  
72}
73
74footer p{
75  padding-left: 200px;
76  padding-top: 30px;
77}
78
79
80p.foo{
81  text-align: center;
82  padding-left: 300px;
83}

kei344

2021/07/11 08:27

https://teratail.com/questions/348896 この質問と内容が同じです。teratailは質問内容の編集ができるので、変更がある場合は新しい質問をするのではなく編集してください。また、こちらの質問を削除されるよう運営に連絡されることをお勧めします。 https://teratail.com/help#delete-question https://teratail.com/contact/input

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

回答1件

footerのpの中のclass=fooがpタグで定義したのに</span>で閉じています

投稿2021/07/12 08:38

yambejp

総合スコア116441

あなたの回答

tips

プレビュー

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

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

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.37%

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

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

質問する

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

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

HTML CSS footerの文字の位置を調整したい。

関連した質問