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　　　　　<div class="news5">
12       <dl>
13        <div class="contena">
14           <dt>2021.7.25</dt>
15           <dd>新商品がリリースされました。</dd> 
16        </div>
17        <div class="contena">
18          <dt class="con1">2021.6.11</dt>
19          <dd>ブランド展示会の予約について。</dd>
20        </div>
21        <div class="contena">
22           <dt>2021.5.27</dt>
23           <dd>ブランド展示会を開催します。</dd>
24        </div>
25        <div class="contena">
26          <dt class="con2">2021.4.13</dt>
27          <dd>お店のご紹介動画ができました。</dd>
28        </div>
29        <button class="btn5">お知らせ一覧</button>
30       </dl>
31
32      </div>
33  
34    <footer>
35      <p>営業時間:10:00~19:00<br />
36         定休日:日曜日と祝日<br />
37         住所:〒000-0000○○県○○市<br />
38        <p class="foo">
39         Home<br />
40         About<br />
41         Product<br />
42         Online Store<br />
43         NEWS<br />
44        </span>
45      </p>
46        
47      
48
49    </footer>
50   </div>
51	</body>
52</html>
53

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

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

回答2件

CSS
1footer {
2  display: flex;
3}

を追加するのが簡単です。

あと、<p>が閉じていないようですよ。

投稿2021/07/11 07:41

itagagaki

総合スコア8402

HdNu

2021/07/11 09:00

ありがとうございます。

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

ベストアンサー

下記で横並びで中央に配置されます。
子要素間の間隔はgapで調整できます。

css
1footer{
2  width: 100%;
3/*  height: 300px; 高さは固定しない方がいい */
4  display: flex; /* 横並び */
5  justify-content: center; /* 中央配置 */
6  gap: 100px;   /* 要素間の間隔 */
7}

垂直位置も中央配置したいなら、align-items: center; を追加すればいいでしょう。
Flexboxでいろいろ細かいレイアウトを指定できますので、WEB検索で解説ページを探して勉強するといいですよ。

投稿2021/07/11 08:43

hatena19

総合スコア34053

HdNu

2021/07/11 09:00

ありがとうございます。解決いたしました。

hatena19

2021/07/11 09:15

同内容の質問がありますので、それは削除依頼を申請しておいてください。

HdNu

2021/07/12 00:49

承知いたしました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.37%

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

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

質問する

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

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

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

関連した質問