WordPressはサイトやブログを作る上での基本的な機能は備わっていて、かつ、カスタマイズしようと思えば比較的簡単にできるようになっているので「そうだ！これやろう！！」が実現しやすいサイト作成ツールですよね？
私はこのツールに出会う前までは無料のブログサービスでちょこっとカスタマイズして使う程度でした。それが今ではプラグインの紹介記事などを書きつつ中身がちょっと見えるようになり、更には中身をちょっとカスタマイズできるレベルになりました。プログラマーさんみたいに最初からガシガシコード書くなんてレベルには程遠いですけど「好きこそものの上手なれ」とはこのことなんだなぁと実感してます。
そこで今回はCSSで何かの要素を非表示にする「display:none;」と「visibility: hidden;」の違いについて、自身の備忘録を兼ねて紹介しておきたいと思います。
「display:none;」と「visibility: hidden;」の共通点と相違点
この２つのコードはどちらも何かを非表示にすることに違いがありません。
そしてソースを見るとどちらもソース上にはあるけど表示はされないという点でも共通です。
では何が違うんでしょうか？？
それは
- 「display:none;」は非表示にした場所（スペース）は文字通り「なし」にする
- 「visibility: hidden;」は非表示にした場所はぽっかり空白にする
ということです。
試しに同じ要素をそれぞれのコードで非表示にして試してみてください。
例えば
<div class=”a”>１つ目の文章</div>
<div class=”b”>２つ目の文章</div>
<div class=”c”>３つ目の文章</div>
と本文に書いたとして、bというクラスに対してそれぞれのコードでCSSを書いてみると・・・
- 「display:none;」の場合はaの文章のすぐ下にcの文章が来る
- 「visibility: hidden;」の場合はaの文章の下にbのスペースが空いてcの文章が表示される
んですね。やってみると違いがはっきり分かると思います。
まあこんなことにあまり非表示の要素は使わないと思いますので実用的なところでいけば、横並びになっている３つの箱のうち真ん中を非表示にしたい場合、「display:none;」だと右の箱が真ん中に表示されるのに対して「visibility: hidden;」の場合は真ん中がぽっかり空白になるといった使い方ができます。
・・・という位まだまだ私も素人の仲間（笑）ですが、こうして１つ１つ覚えていき、かつ、メモとして残しておけば、このサイト自体が辞書代わりになる（実際に検索するときもある）・・・と信じて、「こんなこと知ってるし」という意見も臆することなくいろいろと紹介していきたいと思います。
ポチップ
ポチップ
