CSSでのリスト内のある特定のアイテムだけを表示しない方法

質問

お世話になっております。

CSSを使用して、リストを作った場合の質問です。

リストが12個あったとして、
実際にはそのリストの中の8個しか表示したくない場合

現在では
<ul>
<li>画像1</li>
<li>画像2</li>
<li style="display:block;">画像3</li>（←表示したくない画像）
<li>画像4</li>
・・・・・
・・・・・
</ul>

という風に記述しているのですが・・・
表示されてしまいます。

どなたかご存知のかた、
教えてください。
宜しくお願いします！！

回答No.4

noname#100277 · ベストアンサー

何だか変なので整理します。
表示したくは無い場合、HTMLレベルでは以下。
<!--
<li style="display:block;">画像</li>
-->

CSSなら以下。
style="display:none;"

お礼

ご回答ありがとうございます！
ご察しの通りJavaScriptとの絡みでの非表示でした。

なるほどですね。
HTMLではコメントで囲い、CSSではDisplay:noneとすれば
よかったのですね！
助かりました！ありがとうございます！

回答No.3

abril

> <li style="display:block;">画像3</li>（←表示したくない画像）

"display:block;"（その要素をブロック化する）だったら表示されて当然ですね。No.2様のご指摘どおり"display: none;"（その要素を不可視にする）だったら「表示されて」しまうのは解せませんが。

あと、”表示したくない”というのがどういう意図によるものかによっては、CSSで非表示にするのではなく、No.1様のアドバイスの様にコメントで隠す（<!-- <li>表示したくないアイテム</li> -->）方が適切という場合もあります。CSSで隠して（display: none;、visibility: hidden;、text-indent: -9999px;、等々）いる要素は、クライアント側でスタイルシートを切ってしまう、もしくはオリジナルのスタイルシートを使用している場合、制作者の意図に反して閲覧者側では見えて（ブラウザ上に表示されて）しまっている、という状態にできるからです。
私個人も、デザインががちゃがちゃうるさかったり配色等が目に優しくないサイトなどは意図的にスタイルシートを切って閲覧するという事をよくやります。必要な情報さえ取得できれば用は足りるので。

例えば、そのリストのアイテムがナビゲーションの様なもので、まだその先のコンテンツが出来ていないので今は非表示だけれどもコンテンツが出来た際にすぐ更新できる様に今の内から配置しておく…みたいな意味であれば、コメントで隠しておく方が適切かと思います。勿論、JavaScriptとの絡みとかで、表示・非表示を切り替える為に"display: none;"としておく事が必要なのであれば仕方ないですが。

回答No.2

steel_gray

display:none;
の間違い？

お礼

はい、根本的に間違っていました。
ご回答ありがとうございました！！！

回答No.1

cool_

<li style="display:block;">画像3</li>（←表示したくない画像）
をコメントで囲むというのはどうでしょうか。
<li style="display:block;"><!-- 画像3></li>（←表示したくない画像）
または<1-- li style="display:block;">画像3<!-- /li>（←表示したくない画像）

お礼

なるほどですね！コメントで囲むという方法が！！！
ありがとうございます♪
これでJavaScriptでもうまく動作しそうです！！