CSSで要素を隠すのには
display:none; とか
visiblity:hidden;
とかが思いつきますが、
これらはエレメントを描画してしまうようで
ページのloadに余計な時間がかかってしまうんです。
たとえばCSSだけで、エレメントを描画させないことって出来るのでしょうか?
やっぱりjavascriptを使わないとダメですかね…
※idではなく、classのみ付与されている要素で取得も難しいのです。
jQueyだとクラス名で要素は取得できるとは思うのですが
スクリプト自体、loadされてから実行だし。。
CSSで出来る方法をご存知の方、
ぜひともご教授をお願いいたします。
よろしくお願いいたします。
No.1
- 回答日時:
>これらはエレメントを描画してしまうようで
これらは『エレメントを「読み込んで」しまうようで』という意味ですね。
描画に時間のかかる表以外は、HTMLは単なるテキストデータですからHTMLのダウンロードでいらいらすることはないと思います。表は最初の行にwidth属性で幅を指定しておくと描画が早くなるはずです。
質問の意図が汲み取れないのですが
>たとえばCSSだけで、エレメントを描画させないことって出来るのでしょうか?
それは、
CSSで
display:none; とか
visiblity:hidden;
を使います。
javascript(jQueryを含む)は、ご指摘のように一旦読み込んでからの処理になります。
javascript(jQuery)は、ページの内容を書き換えるたびにサーバーとの交信をしなくてすむと言う意味でレスポンスが早いというだけです。それが最大の利点
基本的にページの表示に時間がかかる大きな原因は、巨大な表と画像ですから、表--特に複雑な、レイアウトのための---を使用しない。画像は、内容として意味のないものは背景にしてスタイルシートで読み込ませる。
が対策となります。HTMLデータ自体の取得に要する時間は考えなくて良いです。
あとは、スタイルシートの見直しです。素人さんが作られるスタイルシートはとにかくやたらめったら巨大です。数行ですむCSSを何十行も使うとか・・
せっかくの機能--継承や詳細度のカスケーディング機能を活用する。グループ化できるものはグループ化するなどしてスタイルシートをスリムにするのも良いでしょう。
とてもご丁寧に解説をしていただき
ありがとうございます。
私の方、説明不足ですみません。
今回、描画させたくないっていうのは
画像なんです。まさに巨大な画像…
でも、表を使うときの対処とか
画像は背景にするとか…ヒントや今後の参考になるお話でした。
スタイルシートも、確かに無駄な記述が多いかも。
そこからまず見直してみます。
別の対策も含めて、いろいろ参考になりました。
ありがとうございました。
No.2ベストアンサー
- 回答日時:
こんにちは。
何らかの条件により、サイズなどが原因で要素を描画させたくない場合、最も的確なのはサーバからその部分を送信しないことです。
そのためにはphpなど、サーバサイドスクリプトを使うのが最も簡単で確実です。
次善の策は、送信内容に含めず、javascriptで必要な場合にのみロードする方法です。
jQuery等のDOM操作で、
$(function(){
if (何らかの条件) {
$(ターゲットセレクタ).html("<img src='hoge.jpg'/>");
}
});
また、htmlコンテンツそのものを分割し、Ajaxで読み込むことにより、コンテンツ表示内容を可変する方法もあります。
$(function(){
if (何らかの条件) {
$(ターゲットセレクタ).load("hoge.html");
}
});
CSSでマークアップの内容を最適化したり、無理のない表示を行うことはできません。
方法をいろいろあげて下さり、
ご丁寧にありがとうございます。
>CSSでマークアップの内容を最適化したり、
>無理のない表示を行うことはできません。
↓
やっぱりそうですよね。
PHP…は敷居が私には高いので、ちょっと難しそうです。
HTMLにあるものを描画させないようにするのではなく
JavaSciriptを使って、条件で描画させるっていう
逆の発想でないとダメそうですね。
いろいろ勉強になりました。
他の方法で考えていきたいと思います。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- その他(プログラミング・Web制作) このプログラミングをどう組みますか? Googlecolabでやってるんですが、出来る方お願いします 1 2022/07/13 10:52
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- その他(プログラミング・Web制作) pythonにおける単方向リストの実装について 4 2022/07/13 12:34
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSでid名やclass名に「_」や「...
-
HTML要素のid/class名の長さに...
-
CSSに同じclass名がいっぱい‥。...
-
clear bothで回り込みがうまく...
-
子孫セレクタの読み方をおしえ...
-
<span>で2重にかけているものを...
-
ページの左右の余白(枠外)に...
-
サイトにjQueryが使用されてい...
-
brにクラスをつけてcssでdispla...
-
bootstrapでnavbar で一番左側...
-
最近、HTMLのヘッダーをIDで定...
-
inputタグのテキストBOXだけ右...
-
透過背景を解除するにはどうす...
-
idの中のid指定
-
[HTML] selectの線を非表示に...
-
個別にリンクの色を変える方法
-
htmlの文字が縦書きになる
-
【ヒトの神秘】美男美女から何...
-
マージソートの計算量について-...
-
2個のFormを横並びにしたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
CSSに同じclass名がいっぱい‥。...
-
HTML要素のid/class名の長さに...
-
idの中のid指定
-
最近、HTMLのヘッダーをIDで定...
-
サイトにjQueryが使用されてい...
-
liリストタグの背景色に色がつ...
-
CSSのホバーエフェクト
-
ページの左右の余白(枠外)に...
-
CSS, リンクの色を一部変えるに...
-
スタイルシートで、id属性の中...
-
htmlのid属性って必要なの?
-
透過背景を解除するにはどうす...
-
外部css定義したclassをht...
-
<span>で2重にかけているものを...
-
CSSのクラス名・ID名の指定でワ...
-
子孫セレクタの読み方をおしえ...
-
brにクラスをつけてcssでdispla...
-
Bootstrap3でcontainerがずれる...
-
CSSが効かずどのように指定すれ...
おすすめ情報