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

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

新規登録して質問してみよう
ただいま回答率
85.48%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

931閲覧

横並びの3つの項目にマージンが効かない

rasta

総合スコア95

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2021/02/21 09:49

編集2021/02/21 09:51
<!doctype html> <head><link rel="stylesheet" type="text/css" href="c.css"></head> <body> <header> <div class="leftimg"> <p>Progate</p> </div> <div class="rightobj"> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </div> </header> <div class="wrapper"> <nav> <ul> <li>game</li> <li>playstion</li> <li>Nintend ds</li> </ul> </nav> <main> <div class="what"> <p>■ Whats new</p> <p>今週のピックアップ商品は</p> <p>妖怪ウオッチの腕時計です</p> </div> </main> <aside> </aside> </div> <footer> </footer> </body> </html>
body { margin:0; min-height:100vh; display:grid; grid-template-rows:100px 1fr 100px; grid-template-areas:"header" "wrapper" "footer"; } header { grid-area:header; display:flex; border-bottom:4px solid gray; background-color:lightsteelblue; } .leftimg { flex:1; color:lightblue; font-size:30px; margin:auto 40px; } .rightobj { flex:2; margin:auto 0px; } .rightobj ul { display:flex; } .rightobj ul li { flex:1; list-style:none; margin-left:-80px; font-size:28px; color:lightsalmon; } .wrapper { grid-area:wrapper; display:grid; grid-template-columns:270px 1fr 240px; grid-template-areas:"left center right"; } nav { grid-area:left; border:1px solid gray; background-color:mediumaquamarine; } nav ul li { font-size:20px; color:lightskyblue; list-style:none; } main { grid-area:center; border:1px solid gray; background-color:lightskyblue; } .what { margin-top:30px; margin-left:50px; padding:20px; border:5px solid lightgray; border-radius:10px; width:500px; background-color:white; font-family:Georgia, 'Times New Roman', Times, serif; } aside { grid-area:right; border:1px solid gray; background-color:mediumaquamarine } footer { grid-area:footer; border:1px solid gray; }

イメージ説明

画像で見て取れる通り、Home About Contactの文字間に開きがあります。
.rightobj ul li {
flex:1;
list-style:none;
margin-left:-80px;
font-size:28px;
color:lightsalmon;
}

margin-left:-80px;
と指定しています。
なぜこのマージンが適用されないのでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/02/21 09:51

質問するより先に私がした指摘を対応してください。
hatena19

2021/02/21 10:33

マージン効いてます。margin-left:-80px; を消たり、追加してみれば分かります。
rasta

2021/02/21 10:39

クラスrightobjに効いて、ul liには効いていないように思います。
hatena19

2021/02/21 11:03 編集

「画像で見て取れる通り、Home About Contactの文字間に開きがあります。」ということからやりたいことは、リスト間の間隔を狭めたいということでしょうか。 だとしたら、flex:1; を削除すれば間隔は狭まります。
rasta

2021/02/21 13:45

flex:1;削除でできました。ありがとうございます。
guest

回答1

0

自己解決

上記回答で、解決いたしました。

投稿2021/02/21 13:47

rasta

総合スコア95

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/02/21 19:51

回答はあなたのこの投稿です。 仰っているのは「質問への追記修正依頼」 「回答」はきちんと整理して解決となる内容を投稿してください。 https://teratail.com/help#resolve-myself 質問も回答も編集できます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問