Q&A
私の勘違いだったら申し訳ないのですが、liタグでもlist-style: noneは反映されませんか？
https://codepen.io/asuchi0819/pen/bGpVNyx
⏫
上記のようなカテゴリーを作ることを目的としています。そのために次のようなコードを書きました。
<html lang = "en"> <head> <meta charset="UTF-8"> <title>kadai</title> </head> <body> <header> <img src = "4eachblog_logo.jpg"> <ul> <li>トップ</li> <li>プロフィール</li> <li>4eachについて</li> <li>登録フォーム</li> <li>問い合わせ</li> <li>その他</li> </ul> </header> </body> </html> コード
li { list-style: none; } コード
⏫
上記のようなコードを書いた理由はul,liでリストを作ってlist-style:none;をかけばリストが消えると思ったからです。
⏬
しかし、実際はコードを実行してもリストの黒丸が消えず以下のような画面になりました。
⏬
⏬
つまりリストの黒丸を消すためにlist-style:none;を書いたのに黒丸が消えずに困っています。
????????????????????ご教授お願いします????????????????????
⏬
以下は私が試した打開策です。
1 background-image:none;
2 display:block;
以上になります。
回答3件
0
ベストアンサー
おそらくhtmlファイル内でcssファイルを読み込んでいないからです。
li { list-style: none; }
上記の記述は、style.css等のファイルに保存していると思うのですが、これを読み込む必要があります。
htmlファイルの<head>タグ内で以下の記述をしてみてください。
投稿2020/08/10 23:18
総合スコア19
0
原因として以下が考えられます。
- 当該CSSを読み込めていない
- 質問に記載していないCSSが影響し、（例えばbootstrapなど）
liセレクタのみでは、優先度が低く、適用されない
なので、上記の可能性も考慮し、再度検証してみてください。
---- 以下元回答 ----
対象セレクタを、liではなく、ulにしてください。
css
1ul { 2 list-style: none; 3}
投稿2020/08/11 00:59
編集2020/08/11 01:33
総合スコア9555
あら・・・。
したら別の原因か・・・。
ご指摘ありがとうございます。
> このプロパティはリスト項目、すなわち display: list-item; の要素に適用されます。既定では <li> 要素が含まれます。このプロパティは継承されるので、親要素（ふつうは <ol> または <ul>）に設定すれば、同じリストスタイルを内部のすべての項目に適用できます。
とあるので、適用する要素間違えではなく、CSSが読み込めていない気がします。
ありがとうございます！
っていうか既に回答がある通り、そもそも外部CSS読み込む構文になってなかったという・・・。
質問者さんの反応を待ってみようと思います。
0
list-style: none;でなく、
list-style-type: none
だとどうでしょうか？
投稿2020/08/10 20:26
総合スコア9
list-style-type:none;をやってもダメでした。
ご回答ありがとうございます
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<title>kadai</title>
</head>
<body>
<header>
<img src = "4eachblog_logo.jpg">
<ul style = "list-style:none">
<li>トップ</li>
<li>プロフィール</li>
<li>4eachについて</li>
<li>登録フォーム</li>
<li>問い合わせ</li>
<li>その他</li>
</ul>
</header>
</body>
</html>
上記のようなコードがネットにあったのでコピペしたところリストの黒丸が消えました。
しかし、こんな書き方は習っても学習もしていません。
結局描けりゃそれでいいという話なのでしょうか。消化不良ですが、とりあえず解決できました。
ご回答いただきありがとうございます
> 上記のようなコードがネットにあったのでコピペしたところリストの黒丸が消えました。
質問のコードとは、スタイルを当てている対象が違います。
質問者さんも、ulに対して、同スタイルを当てれば、黒円は消えるはずです。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。