css レイアウト　並べ方

https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1587597966_ZDg0NDM1NjRkMzc3のホームページを作っています。

-わからないこと-
アイコンとグローバルナビゲーション、ボタンを横一列に並べる
一番左にアイコンとナビゲーション、一番右にボタンの配置

配列の仕方が理解不足だと思ったのでmargin、paddingやdisplay:inline-block;について調べ、トライしましたが、何日かけても解決することができません。よろしくお願いします。


<body>
<div class="gnavi">
<i class="fas fa-award"></i>
  <ul>
	<li>概要</li>
	<li>準備</li>
	<li>安全</li>
	<li>マネープラン</li>
  </ul>	
	
<a href="#">はじめる</a>
</div>
</body>
</html>

body{
	margin:0;
}
.gnavi i{
	display:inline-block;
	background-color:pink;
	font-size:55px;
	width:50px;
	
	}


.gnavi ul li{
	display:inline-block;
	background-color: aqua;
	
}

.gnavi a{
	display:inline-block;
	background-color:red;
	border-radius:3px;
	text-decoration:none;
	width:80px;
	padding:10px;
}
.gnavi i{
	display:inline-block;
	background-color:pink;
	font-size:55px;
	width:50px;
	margin:0;
	}

.gnavi ul{
	display:inline-block;
	background-color:darkblue;
	
	
}


.gnavi ul li{
	display:inline-block;
	
	background-color: aqua;
}

.gnavi a{
	display:inline-block;
	background-color:red;
	border-radius:3px;
	text-decoration:none;
	width:80px;
	margin:0 0 0 1200px;
	padding:10px;
}

thyda.eiqau

2020/05/15 04:37

・その目的を実現するために取り組んでいること（現状のコード）・どのように困っているか（期待する出力結果と、現状の出力結果）・困りごとを解決するために試したことをご提示ください。いまの質問文からでは「そうですか、がんばってください」としか言えないです。

Lhankor_Mhy

2020/05/15 04:37

ソースコードを書きましょう https://teratail.com/help/question-tips#questionTips3-5-1 何ができていて、何ができていないのか（何がわかっていて、何がわからないのか）を書きましょう https://teratail.com/help/question-tips#questionTips3-5-2 結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1 エラーメッセージや実行ログをコピー&ペーストしましょう https://teratail.com/help/question-tips#questionTips3-4-2 期待した処理結果を書きましょう https://teratail.com/help/question-tips#questionTips3-4-3 3-7. markdownを利用しましょう https://teratail.com/help/question-tips#questionTips3-7

kei344

2020/05/15 05:18

質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Lhankor_Mhy

2020/05/15 05:52

これって、ここの写経ですかね？ https://www.airbnb.jp/host/homes

Lhankor_Mhy

2020/05/15 05:57

ああ、追記がされてあったんですね。すみません。

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

回答2件

ベストアンサー

別解です。Lhankor_Mhy さんの回答でも実現できますし必要十分ではありますが、初歩的なところを勉強されている最中と思いますので、flexboxを勉強してみるのもよいかと思います。
解説ページの記述量が多いし、関連するプロパティの量も多いので、とっつきにくい感があってかなり苦しいと思いますが、いまのうちに苦しんでおけば後が楽になります。

css
1body {
2  margin:0;
3}
4.gnavi {
5  display: flex;
6}
7.gnavi i {
8  background-color: pink;
9  font-size: 55px;
10  width: 50px;
11  margin: 0;
12}
13.gnavi > ul {
14  display: flex;
15  flex-grow: 1;
16  background-color: #fcf;
17  list-style: none;
18}
19.gnavi ul li{
20  background-color: aqua;
21  margin: 0 30px 30px;
22}
23.gnavi a{
24  background-color: red;
25  border-radius: 3px;
26  text-decoration: none;
27  width: 80px;
28  padding: 10px;
29}

CodePen

投稿2020/05/15 05:36

thyda.eiqau

総合スコア2982

ponchineey09083

2020/05/15 06:40

ご回答ありがとうございます。 <li>である、「概要」「準備」「安全」「マネープラン」をもっとアイコン側に寄せたいのですがどうやって寄せればいいのでしょうか。

thyda.eiqau

2020/05/15 11:13

右寄せにしたいという意味ですか？であれば、.gnavi > ul に justify-content: flex-end; を追加してください。CodePen側に盛り込んで保存しておきました。

ponchineey09083

2020/05/18 19:03

ありがとうございます。

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

以下を追加。

css
1.gnavi ul{
2display:inline-block;
3}

投稿2020/05/15 05:04

Lhankor_Mhy

総合スコア36158

thyda.eiqau

2020/05/15 05:14

> アイコンとグローバルナビゲーション、ボタンを横一列に並べるに対して、この指定だとアイコンの列・ナビとボタンの列の2列になるのでは？

Lhankor_Mhy

2020/05/15 05:25

ご指摘ありがとうございます。アイコンは表示されてなかったので見逃してました。 .gnavi i, .gnavi ul{ ということですね。

thyda.eiqau

2020/05/15 05:28

font-awesomeは見逃しますよね。そもそも論、空の<i>で表現するお作法はいかがなものかと思います。

Lhankor_Mhy

2020/05/15 05:31

意味論的には全くおっしゃるとおり。でも、定着してしまってますよねえ……

ponchineey09083

2020/05/15 10:10

ありがとうございます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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

css レイアウト　並べ方

関連した質問