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

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

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

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

HTML5

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

解決済

liの黒丸を消しても左側の余白が消えません。

negiremi
negiremi

総合スコア11

CSS3

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

HTML5

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

1回答

0評価

0クリップ

182閲覧

投稿2022/06/16 13:22

html css初心者です。
liの黒丸をlist-style:none;で消しても
左側の余白が消えません。
どうすれば消えるでしょうか?
(↓黄色背景色の左側の部分を左に詰めたいです。)

liやolにpadding:0;と入力しましたが、書き方が間違っていますか?
分かる方いらっしゃいましたら教えていただけると助かります。
イメージ説明

html

<!doctype html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"/> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> <title>テスト</title> </head> <body> <header> <h1><img src="img/logo.png" class="rogo"></h1> <nav> <ul> <li><a href="">ABOUT</a></li> <li><a href="">WORK</a></li> <li><a href="">NEWS</a></li> <li><a href="">CONTACT</a></li> <li><a href=""><i class="fab fa-instagram fa-fw"></i></a></li> </ul> </nav> </header> <picture class="image"> <source media="(min-width: 1000px)" srcset="img/atari1.jpeg"> <source media="(min-width: 700px)" srcset="img/atari2.jpeg"> <img src="img/uma.jpeg" alt="テキストテキストテキスト"> </picture> <section id="about" class="wrapper"> <h2 class="center aboutnoh">About</h2> <ul> <li>Xxxxx Ashley</li> <li>2th Floor xxxxx Building x-x-x Nishiazabu, Minato-ku, Tokyo 106-0031 Japan</li> <li>tel: 000-0000-0000テキストテキスト</li> <li>url: www.xxxxxx.jp</li> <li class="go">mail: xxx@xxxxxx.jp</li> <li class="aboutonolastli">プロフィールテキストテキストテキストテキストテキストテキストテキストテキストテキストスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li> </ul> </section> <section id="work" class="wrapper"> <h2 class="center worknoh">Work</h2> <div class="kontenaoya"> <ul class="kontena"> <li class="li"><img src="img/inn1.jpeg"></li> <li class="li"><img src="img/inn2.jpeg"></li> <li class="li"><img src="img/inn3.jpeg"></li> <li class="li"><img src="img/inn2.jpeg"></li> <li class="li"><img src="img/inn3.jpeg"></li> <li class="li"><img src="img/inn1.jpeg"></li> </ul> </div> </section> <section id="news" class="wrapper"> <h2 class="center newsnoh">News</h2> <dl> <dt>2020.XX.XX</dt> <dd>デザイン雑誌「XXXXXX Vol.11』に掲載していただきました。</dd> <dt>2020.XX.XX</dt> <dd>XX月XX日から写真集「XXXXXXX」の販売を開始します。</dd> <dt>2019.XX.XX</dt> <dd>【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd> <dt>2019.XX.XX</dt> <dd>デザイン雑誌「XXXXXX Vol.10』に掲載していただきました。</dd> <dt>2019.XX.XX</dt> <dd>【個展開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd> </dl> </section> <div class="hako">テスト</div> <footer> </footer> </body> </html>

css

@charset "UTF-8"; body{ margin: 0 0 0 0; } section{ margin: 0 0 0 0; } .wrapper{ width: 960px; margin: 0 auto; background-color: yellow; } bocy ol{ margin: 0 0 0 0; padding: 0; } li{ list-style: none; margin: 0 0 0 0; padding: 0;} .center{ text-align: center; } /*ヘッダー*/ header{ display: flex; justify-content: space-between; align-items: center; max-width: 960px; height: 270px; margin: 0 auto; padding: 0 4%; } header ul{ display: flex; list-style:none; } nav{ display: flex; align-items: center; } .rogo{ width: 100px; } nav li{ margin-left: 30px; } a{ text-decoration: none; } /*TOP画像*/ .image img{ width: 100%; height: 420px; object-fit: cover; margin-bottom: 80px; } /*about*/ #about li:first-child { margin-bottom: 30px; } .go{ margin-bottom: 30px; } .aboutnoh{ margin-bottom: 80px; } .aboutonolastli{ margin-bottom: 100px; } /*work*/ .worknoh{ margin-bottom: 80px; } .kontena{ display: grid; width: 940px; height: 400px; grid-template-columns: auto auto auto; grid-auto-rows: auto auto; gap: 20px; margin-bottom: 100px; box-sizing: border-box; } #work li img{ width: 300px; } #work ul{ margin-bottom: 100px; margin-left: 0; } /*news*/ .newsnoh{ margin-bottom: 80px; } dl{ width: 900px; margin: 0 auto; } #news dt{ float:left; margin-right: 70px; } .hako{ width: 960px; height: 200px; background-color: pink; margin: 0 auto; }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

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

HTML5

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