スタイルシートを使用した表示の制御

スタイルシートには、表示を制御する手段としてdisplayとvisibilityというプロパティがあります。

display 生成するボックスの種類を決定

プロパティ名取り得る値(抜粋)
displayinline | block | list-item | none
値としてinline,block,list-item,noneなどがあります。「など」と書いたのは、仕様にはこれら以外にも有るのですが、現状でほとんどのUAがサポートしていないこともあり、事実上使えるのはこれだけ、と考えて結構です。inlineボックスでは行ごとに分割された細長い領域のボックスが生成され、blockボックスでは、その要素に与えられた幅いっぱいに最初の行の上端から最後の行の下端までのボックスが生成されます。list-itemはHTMLの<li>要素に似たものです。noneは文字通り何も生成しません。「見えない」のではなく、「無い」のです。従って表示のための領域すら確保されません。
HTMLを勉強された方ならブロック要素とインライン要素の違いはおわかりだと思います。本来各要素がブロック形のボックスを生成するかインライン形のボックスを生成するかはHTMLの規則で定められています。しかし、CSSを使うことでそれを変更することができます。あくまでも表示を生成する際にどう作用するかを変更する物であって、要素の種類(ブロックかインラインか)そのものが変わるわけではありません。従ってある要素がHTMLの規則でどちらかの要素しか子要素にとれない場合、DISPLAY指定を変更してもその可否が変わることはありません。インライン要素しか書けない場所には、たとえDISPLAYプロパティの値をinlineにしても、ブロック要素を書くことは出来ません。

注意事項

この機能は全てのブラウザで完全に実装されているわけではありません。特に古いバージョンの物ではまったく無視されるかも知れませんのでそこのところは覚悟してください。

悪用禁止

無料ホスティングサービスでは広告を表示することによりスポンサーからの広告料を得て運営しています。CSSの表示制御を使ってこの広告を表示しなくさせることが出来る場合もありますが、基本的にその様な行為は利用規約違反で、アカウント削除の対象ともなります。その様なことをする人が増えると、サービスそのものが継続できなくなったり、ホスト側で対抗して、より強制力の強い方法で広告表示するようになります。米国の無料ホスティングサイトなど見ていると表示しているコンテンツに強制的に広告をかぶせてきたり、ブラウザの設定でブロックできない方法で新窓をポップアップさせたりと、かなり見苦しい状況になっています。

visibility ボックスの表示/非表示を切替

プロパティ名取り得る値(抜粋)
visibility visible | hidden
値としてvisible,hiddenなどがあります。display:noneは文字通り何も生成しませんが、visibility:hiddenは見えないボックスを生成します。従って表示のための領域は確保されます。

注意事項

この機能は全てのブラウザで完全に実装されているわけではありません。特に古いバージョンの物ではまったく無視されるかも知れませんのでそこのところは覚悟してください。

悪用禁止

このプロパティも広告を表示しなくさせることに使用出来るかもしれません。基本的に利用規約違反になり、アカウント削除もあり得ますので注意してください。
戻る | このサイトのトップへ