スタイルシートで表示・非表示
2008/06/23 | その他
今更スタイルシートか、とも思うけれど、何せ自分がウェブの世界に入ったときにはスタイルシートなんてなかったので、出会うこと全てが勉強のような気がする。
スタイルシートを使うと、HTML中に記述された文字の表示・非表示を自由に変更できる。特にJavaScriptを組み合わせると、インタラクティブなインターフェースが提供できるので、ついつい使いたくなってしまう（んでもって、大切な開発の時間が少なくなっていく）。
今日新たに一つのことに気がついた。スタイルシートで表示・非表示を制御する属性が二つあることに気がついたのだ。それらは「visibility」と「display」。何の気なしに使っていたのだが、よくよく理解していないと希望通りの動作をしてくれないので、メモしておくことにした。
■visibility
visible（既定値：表示する）、hidden（表示しない）、inherit（継承）の値をとる。基本的にこの属性をvisibility:hiddenとして与えると「HTML上に存在するが（領域は確保されるが）内容そのものは表示されない」という解釈になる。つまり高さ100pxと指定した領域を、上記の属性で囲むと100pxの高さ分のスペースは確保されたままになる。
■display
block（ブロック要素）、inline（インライン要素）、list-item（リスト要素）、none（表示しない） の値をとる。こちらでnoneが指定された場合、ブラウザは、あたかもHTML上にそのスタイルシートで囲まれた部分が記述されていないかのようにレンダリングされる。
この違い、見た目的には結構大きいので使い分けの必要がありそうだ。
