C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[1]: visibility hiddenとdisplay none


(過去ログ 106 を表示中)

[トピック内 2 記事 (1 - 2 表示)]  << 0 >>

■63009 / inTopicNo.1)  visibility hiddenとdisplay none
  
□投稿者/ めー (1回)-(2011/11/15(Tue) 19:03:29)

分類:[ASP.NET (VB)] 

初心者です。

あるHTML要素を非表示にする際には、
visibility hiddenで対応していたのですが、
これだと非表示になるだけで存在自体は残ってしまい
デザイン的に微妙だなーと思っていたら、
display noneを見つけました。

visibility から display に変えることで
問題が発生することはあるのでしょうか?

現在非表示の要素を取得したりしているので
変更で影響が出ないか不安なのです、、、

visible=false
display:none
visibility:hidden
このへんの使い分けがわからなくなってきました、、、

まとまりませんがよろしくお願いします。


引用返信 編集キー/
■63083 / inTopicNo.2)  Re[1]: visibility hiddenとdisplay none
□投稿者/ おのでら (12回)-(2011/11/19(Sat) 00:14:15)
おのでら さんの Web サイト
2011/11/19(Sat) 00:15:12 編集(投稿者)
2011/11/19(Sat) 00:15:09 編集(投稿者)

めー さんこんばんは、おのでらです。

> display:none
> visibility:hidden
> このへんの使い分けがわからなくなってきました、、、

実際に書いてみるとわかると思いますが、「visibility:hidden」の場合、要素の見た目が消えるだけでもともとあった要素の場所は空白になります。「display:none」の場合は要素が見えなくなり、また下にある要素が display:none のあった場所まで詰められます。

文章じゃわかりにくいのでためしに

<body>
<div style="background-color:red">あああ</div>
<div style="display:none">あああ</div>
<div style="background-color:red">あああ</div>
<div style="background-color:red">あああ</div>
<div style="visibility:hidden">あああ</div>
<div style="background-color:red">あああ</div>
</body>


こんな感じのものを Web ブラウザで見てみると違いがわかると思います。
ちなみにどちらもタグとしては残るので、javascript などでアクセスすることは可能です。

> visible=false

多分 ASP.NET の Web コントロールのプロパティのことを指しているのかと思いますが、false を指定した場合タグとして出力されないのでちょっと注意が必要です。
引用返信 編集キー/


トピック内ページ移動 / << 0 >>

このトピックに書きこむ

過去ログには書き込み不可

管理者用

- Child Tree -