レイアウトがうまくいかない。

【自分の】

【見本】

HTML
1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3  <head>
4    <link rel="stylesheet" href="My Work.css">
5    <meta charset="utf-8">
6    <title>やる</title>
7  </head>
8  <body>
9   <header>
10    <div class="container">
11     <h1 class="header-left">
12     <a href="index.html">
13     <img src="logo.png" alt="My Work">
14     </a>
15     </h1>
16     <div class="header-right">
17     <nav>
18      <ul>
19       <li><a href="#about">About</li>
20       <li><a href="#works">Works</li>
21       <li><a href="#news">News</li>
22       <li><a href="#contact">Contact</li>
23       <li><a href="https://www.instagram.com/">
24       <img class="icon" src="icon-instagram.png" alt="インスタグラム">
25        </a>
26       </li>
27      </ul>
28     </nav>
29    </div>
30   </div>
31  </header>
32
33  <main>
34
35
36  </body>
37</html>

CSS
1header {
2  font-size: 16px;
3  padding: 0 4%;
4  height: 270px;
5  margin: 0 auto;
6  justify-content: space-between;
7  align-items: center;
8  color: rgba(36,41,46);
9  display: flex;
10  padding: 0 32px;
11}
12
13.container {
14 background-color: pink;
15 padding: 0px 32px ;
16 display: flex;
17 justify-content: space-around;
18 height: 270px;
19}
20
21.header-left {
22  background-color: aqua;
23  display: block;
24  font-weight: 700;
25}
26
27nav {
28  display: block;
29  font-size: 16px;
30}
31
32img {
33  max-width: 100%;
34}
35
36a {
37  text-decoration: none;
38  cursor: pointer;
39}
40
41nav {
42  display:block;
43}
44
45nav ul {
46  margin: 16px 10px;
47  padding: 10px 0;
48  display: flex;
49  list-style-type: disc;
50}
51
52header li {
53  float: left;
54  font-size: 14px;
55  margin-left: 30px;
56  display: list-item;
57  list-style-image: none;
58  list-style-position: outside;
59  list-style-type: none;
60  margin-left: 30px;
61  text-align: left;
62}
63
64
65.icon {
66  width: 5%;
67}
68

「試したこと」
ページの模写をしていましたが、以下の点で自分のものと見本のものに違いが生じています。

①見本のように、【My Work】【about,works,news,contact,インスタのアイコン】を、ページの真ん中あたりの高さにいくにはどのように記述すればよいのか
②display: flexを使いました。しかし、My Workの右にあるリストの文字たちが、Mｙ　Workのすぐ左に来てしまい、狙っているページの右端の方に移動してくれません。ページの右端ギリギリにまで追いやる（float: rightのように)には、どう記述すればよいのかを知りたいです。

ご回答よろしくお願いします。

m.ts10806

2021/02/19 07:44 編集

「うまくいかない」という表現は他者には何も伝えないので避けられたほうが。結局「なにがあったの？」とヒアリングの逆質問を引き出すだけです。

sun-chan

2021/02/19 09:16

おっしゃる通りでした。質問の書き方が抽象的すぎました。これからはタイトルの書き方に注意します。

sun-chan

2021/02/19 09:25

回答してくださった方にとっても分かりにくい表現となってしまい申し訳ありませんでした。自分がやりたいことは、上述した①と②です。それは、ページの上の方に行ってしまう文字をページの真ん中にまで下げて設置したいということと、【My Work】に対してすぐ右隣に来ている【about,works,news,contact,インスタのアイコンたち】を、ページの右端ギリギリにまで追いやりたい（float: rightのように)ということでした。

m.ts10806

2021/02/19 09:52

質問は編集できますので

sun-chan

2021/02/19 10:25 編集

わかりました。質問の方を書き直しておきます。

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

回答2件

ベストアンサー

css
1header {
2  /* justify-content: space-between; */
3  /* align-items: center; .containerへ移動*/
4  /* display: flex; */
5}
6
7.container {
8  align-items: center;
9}

修正したコードを上に貼っておきます。
差分だけですので必要なコードまで消さないようにご注意下さい。

headerのコメントアウトしたコード3行は不要です。
.containerにalign-items: center;を足してみてください。

flaxboxは指定した要素内の直下の子要素をレイアウトします。
headerの中には.containerしかないため、上下左右どちらも動きません。
また、margin:0 auto;を記述している為、左右は真ん中になります。

以上の理由からheaderに当たっているCSSの記述３行分は不要です。
上下を真ん中にしたい要素は.containerの子要素になりますから、
そちらにalign-items: center;を当てるということになります。

投稿2021/02/19 08:03

退会済みユーザー

総合スコア0

sun-chan

2021/02/19 10:28

コードが不要な理由が、よくわかりました。 display: flexについての理解が不十分でした。 align-item： centerを書いたところ、上手く真ん中にいきましたので、これからも使っていきます。ご回答ありがとうございました。

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

②に関しては、headerに設定している不必要なflex設定を削除すればいいでしょう。
flexは.containerで設定しているのでその親には不要です。

①に関しては、.container に align-items: center;を追加すればいいでしょう。

css
1header {
2  font-size: 16px;
3  padding: 0 4%;
4  height: 270px;
5  margin: 0 auto;
6/*  justify-content: space-between; 削除 */
7  align-items: center;
8  color: rgba(36,41,46);
9  /*display: flex;  削除  */
10  padding: 0 32px;
11}
12
13.container {
14  background-color: pink;
15  padding: 0px 32px ;
16  display: flex;
17  justify-content: space-around;
18  align-items: center; /* 追加 */
19  height: 270px;
20}

htmlに文法違反がありますので、それも修正しておきましょう。
a要素の閉じタグがありません。

html
1<header>
2  <div class="container">
3    <h1 class="header-left">
4      <a href="index.html">
5        <img src="logo.png" alt="My Work">
6      </a>
7    </h1>
8    <div class="header-right">
9      <nav>
10        <ul>
11          <li><a href="#about">About</a></li>
12          <li><a href="#works">Works</a></li>
13          <li><a href="#news">News</a></li>
14          <li><a href="#contact">Contact</a></li>
15          <li><a href="https://www.instagram.com/">
16            <img class="icon" src="icon-instagram.png" alt="インスタグラム">
17            </a>
18          </li>
19        </ul>
20      </nav>
21    </div>
22  </div>
23</header>
24
25<main>
26</main>