displayを利用した表示、非表示方法-CSS

displayを利用した表示、非表示方法-CSS

ホームページは、数多くのタグからなるコーディングリストを視覚化したものです。 
作成されたコーディングは必要なければ消せばいいのですが、もし目には見えないようにしなければなりませんが、必ず必要な部分だとしたらどうでしょうか？ 
もちろん、hiddenという属性で隠すこともできますが、CSSでdisplayを利用してnoneやhiddenを与えて隠すこともできますが、その方法を見てみましょう。     


1.displayに対する理解 

displayはCSSで使用するプロパティです。 "どう見えてくるか"を決めます。 
divでもtableでもspanでもどこでも使えます。 
適用したいオブジェクトにスタイル項目を追加して、以下のように処理してください。 

<divstyle="display:希望する要素;">内容</div>

例えばタグを実験するコードを入れてみましたが、訪問者の目には見えないようにしたかったり、 
私一人だけ見たい文字がある場合とか、 
モニターには見えませんが、ソースを見たときには見られたり、 
他のタグからある値をもらってきましたが、 
視覚的には見えないようにその変数を読み込みたい場合など、多くの利用方法がありますね。   ​  

2.displayで非表示にする方法 

上で基本的なタグを見せましたので、今回は他の適用を見てみましょう。
上記ではdivに入れてみましたので、今回はspanに入れてみた例です。 

<spanstyle="display:none;">内容</span> 

上記の内容はオブジェクトを見えないようにする最初の方法ですが、noneを付けると目にも見えないし、場所も取らずに隠れてしまいます。    

<spanstyle="display:hidden;">内容</span> 

上記の内容はオブジェクトを見えないようにする2番目の方法ですが、hiddenを付けると目に見えないですが、場所はそのまま占めてしまいます。       


3.noneとhiddenの違い説明 

noneもhiddenも目立たないように隠す役割をしていますが、空間という違いがあります。  
cssでdisplayのプロパティにhiddenを与えると、目に見えないように消えますが、その場所がそのまま空の空間になります。 
例えばワードを作成するときに文字を削除せずに白に変えてモニターに見えないのと同じようなものです。  
しかし、属性にnoneを与えると目に見えないように隠されますが、あった空間の大きさが0に処理され、その下にあった絵や文字が上に上がってくっつきます。 
例えばワードから文字を削除してしまうと、下の段落が上がってくるようなものです。 
しかし、displayの属性なので、本当に消えるのではなく、大きさだけ0になったのです。​    ​

4.displayのもう一つの属性.... 

displayには、hidden、noneの他にもblock、inline、inline-blockなどのプロパティがあります。 
block、inline、inline-blockは別の文章で扱ってみましょう。

[displayを利用した表示、隠す方法-CSS]