headerの配置について

（緊急）今の形から横並びにするにはどのような設定が必要ですか？
ロゴとメニューを横並びにしたいです
ぜひやり方をご存じの方教えて欲しいです！よろしくお願いします！

index.html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <link rel="stylesheet" href="style.css">
7  <meta http-equiv="X-UA-Compatible" content="IE=edge">
8  <meta name="viewport" content="width=
9    , initial-scale=1.0">
10  <title>シルエット</title>
11</head>
12
13<body>
14  <div class="header">
15    <h1>
16      　<img src="https://onl.sc/bZskhdc" height="100">
17    </h1>
18
19    <nav class="my-parts">
20      
21      <ul>
22       
23        <li><a href="#">ホーム<span>HOME</span></a></li>
24
25        <li><a href="#">お知らせ<span>NEWS</span></a></li>
26
27        <li><a href="#">ブログ<span>BLOG</span></a></li>
28        <li><a href="#">概要<span>ABOUT</span></a></li>
29
30        <li><a href="#">お問い合わせ<span>CONTACT</span></a></li>
31
32      </ul>
33    </nav>
34
35
36  </div>
37
38</body>
39
40</html>```
41
42

style.css
1.header h1{
2     color: purple;
3     font-size: 50px;
4    
5}
6
7.my-parts ul {
8	list-style: none;
9	margin: 0;
10	padding: 0;
11	
12}
13.my-parts ul::after {
14	content: "";
15	display: block;
16	clear: both;
17}
18.my-parts ul li {
19	float: left;
20	width: 20%;
21	box-sizing: border-box;
22}
23.my-parts ul li a {
24	display: block;
25	padding: .4em .8em;
26	text-decoration: none;
27	color: #333;
28	background: #fff;
29	text-align: center;
30}
31.my-parts ul li a:hover {
32	background: #eee;
33}
34.my-parts ul li span {
35	display: block;
36	font-size: .75em;
37}

yambejp

2022/11/21 07:24

テキストでソースを貼るか、どこかソースを開示しているサイトを例示ください

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

回答2件

floatではなく、flexboxを使うとよりスマートに簡単にできます。

flexboxの解説サイト：https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

コード例

動作確認用サンプル：https://jsfiddle.net/9w2vmko6/1/

html
1<div class="header">
2  <h1>
3    <img src="https://placehold.jp/28/3d4070/ffffff/100x100.png?text=Logo">
4  </h1>
5
6  <nav class="my-parts">
7    <ul>
8      <li><a href="#">ホーム<span>HOME</span></a></li>
9      <li><a href="#">お知らせ<span>NEWS</span></a></li>
10      <li><a href="#">ブログ<span>BLOG</span></a></li>
11      <li><a href="#">概要<span>ABOUT</span></a></li>
12      <li><a href="#">お問い合わせ<span>CONTACT</span></a></li>
13    </ul>
14  </nav>
15</div>

css
1/*==================================================
2
3** Reset CSS
4==================================================*/
5*,
6*::before,
7*::after {
8  margin: 0;
9  padding: 0;
10  box-sizing: border-box;
11}
12
13img {
14  width: 100%;
15  height: auto;
16  vertical-align: bottom;
17}
18
19/*==================================================
20
21** Header
22==================================================*/
23.header {
24  /* Logoとmy-partsを横並びにする */
25  display: flex;
26}
27
28.header h1 {
29  /* Logoが縮まないように保険の設定 */
30  flex-shrink: 0;
31  
32  /* Logoの横幅を指定 */
33  width: 100px;
34}
35
36.my-parts {
37  /* my-partsの横幅は、全体 - Logoの横幅 */
38  width: calc(100% - 100px);
39}
40
41.my-parts ul {
42  display: flex;
43  height: 100%;
44  list-style: none;
45}
46
47.my-parts ul li {
48  width: 20%;
49  height: 100%;
50}
51
52.my-parts ul li a {
53  display: block;
54  height: 100%;
55  
56  /* 文字が中央に行くように、padding-top/bottom調整 */
57  padding: 1.6em .8em;
58  
59  text-decoration: none;
60  color: #333;
61  background: #fff;
62  text-align: center;
63}
64
65.my-parts ul li a:hover {
66  background: #eee;
67}
68
69.my-parts ul li span {
70  display: block;
71  font-size: .75em;
72}
73

投稿2022/11/21 09:22

Cocode

総合スコア2314

お返事ありがとうございます！

index.html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <link rel="stylesheet" href="style.css">
7  <meta http-equiv="X-UA-Compatible" content="IE=edge">
8  <meta name="viewport" content="width=
9    , initial-scale=1.0">
10  <title>シルエット</title>
11</head>
12
13<body>
14  <div class="header">
15    <h1>
16      　<img src="https://onl.sc/bZskhdc" height="100">
17    </h1>
18
19    <nav class="my-parts">
20      
21      <ul>
22       
23        <li><a href="#">ホーム<span>HOME</span></a></li>
24
25        <li><a href="#">お知らせ<span>NEWS</span></a></li>
26
27        <li><a href="#">ブログ<span>BLOG</span></a></li>
28        <li><a href="#">概要<span>ABOUT</span></a></li>
29
30        <li><a href="#">お問い合わせ<span>CONTACT</span></a></li>
31
32      </ul>
33    </nav>
34
35
36  </div>
37
38</body>
39
40</html>

style.css
1.header h1{
2     color: purple;
3     font-size: 50px;
4    
5}
6
7.my-parts ul {
8	list-style: none;
9	margin: 0;
10	padding: 0;
11	
12}
13.my-parts ul::after {
14	content: "";
15	display: block;
16	clear: both;
17}
18.my-parts ul li {
19	float: left;
20	width: 20%;
21	box-sizing: border-box;
22}
23.my-parts ul li a {
24	display: block;
25	padding: .4em .8em;
26	text-decoration: none;
27	color: #333;
28	background: #fff;
29	text-align: center;
30}
31.my-parts ul li a:hover {
32	background: #eee;
33}
34.my-parts ul li span {
35	display: block;
36	font-size: .75em;
37}