CSSで要素を描画させない

質問

CSSで要素を隠すのには
display:none;　とか
visiblity:hidden；
とかが思いつきますが、
これらはエレメントを描画してしまうようで
ページのloadに余計な時間がかかってしまうんです。

たとえばCSSだけで、エレメントを描画させないことって出来るのでしょうか？

やっぱりjavascriptを使わないとダメですかね…
※idではなく、classのみ付与されている要素で取得も難しいのです。
　jQueyだとクラス名で要素は取得できるとは思うのですが
　スクリプト自体、loadされてから実行だし。。

CSSで出来る方法をご存知の方、
ぜひともご教授をお願いいたします。

よろしくお願いいたします。

回答No.2

shockatz · ベストアンサー

こんにちは。

何らかの条件により、サイズなどが原因で要素を描画させたくない場合、最も的確なのはサーバからその部分を送信しないことです。
そのためにはphpなど、サーバサイドスクリプトを使うのが最も簡単で確実です。

次善の策は、送信内容に含めず、javascriptで必要な場合にのみロードする方法です。

jQuery等のDOM操作で、
$(function(){
　if (何らかの条件) {
　　$(ターゲットセレクタ).html("<img src='hoge.jpg'/>");
　}
});

また、htmlコンテンツそのものを分割し、Ajaxで読み込むことにより、コンテンツ表示内容を可変する方法もあります。
$(function(){
　if (何らかの条件) {
　　$(ターゲットセレクタ).load("hoge.html");
　}
});

CSSでマークアップの内容を最適化したり、無理のない表示を行うことはできません。

お礼

方法をいろいろあげて下さり、
ご丁寧にありがとうございます。

＞CSSでマークアップの内容を最適化したり、
＞無理のない表示を行うことはできません。
↓
やっぱりそうですよね。

PHP…は敷居が私には高いので、ちょっと難しそうです。

HTMLにあるものを描画させないようにするのではなく
JavaSciriptを使って、条件で描画させるっていう
逆の発想でないとダメそうですね。

いろいろ勉強になりました。
他の方法で考えていきたいと思います。

ありがとうございました。

回答No.1

ORUKA1951

＞これらはエレメントを描画してしまうようで
これらは『エレメントを「読み込んで」しまうようで』という意味ですね。
描画に時間のかかる表以外は、HTMLは単なるテキストデータですからHTMLのダウンロードでいらいらすることはないと思います。表は最初の行にwidth属性で幅を指定しておくと描画が早くなるはずです。

質問の意図が汲み取れないのですが
＞たとえばCSSだけで、エレメントを描画させないことって出来るのでしょうか？

　それは、
CSSで
display:none;　とか
visiblity:hidden；
を使います。

javascript(jQueryを含む)は、ご指摘のように一旦読み込んでからの処理になります。
javascript(jQuery)は、ページの内容を書き換えるたびにサーバーとの交信をしなくてすむと言う意味でレスポンスが早いというだけです。それが最大の利点

　基本的にページの表示に時間がかかる大きな原因は、巨大な表と画像ですから、表--特に複雑な、レイアウトのための---を使用しない。画像は、内容として意味のないものは背景にしてスタイルシートで読み込ませる。
　が対策となります。HTMLデータ自体の取得に要する時間は考えなくて良いです。

　あとは、スタイルシートの見直しです。素人さんが作られるスタイルシートはとにかくやたらめったら巨大です。数行ですむCSSを何十行も使うとか・・
　せっかくの機能--継承や詳細度のカスケーディング機能を活用する。グループ化できるものはグループ化するなどしてスタイルシートをスリムにするのも良いでしょう。

お礼

とてもご丁寧に解説をしていただき
ありがとうございます。

私の方、説明不足ですみません。
今回、描画させたくないっていうのは
画像なんです。まさに巨大な画像…

でも、表を使うときの対処とか
画像は背景にするとか…ヒントや今後の参考になるお話でした。

スタイルシートも、確かに無駄な記述が多いかも。
そこからまず見直してみます。

別の対策も含めて、いろいろ参考になりました。
ありがとうございました。