【備忘録】CSSの「display:none;」と「visibility: hidden;」の違い

公開日: 更新日: Wordpress
パソコン・プログラムのアイキャッチ




WordPressはサイトやブログを作る上での基本的な機能は備わっていて、かつ、カスタマイズしようと思えば比較的簡単にできるようになっているので「そうだ!これやろう!!」が実現しやすいサイト作成ツールですよね?

私はこのツールに出会う前までは無料のブログサービスでちょこっとカスタマイズして使う程度でした。それが今ではプラグインの紹介記事などを書きつつ中身がちょっと見えるようになり、更には中身をちょっとカスタマイズできるレベルになりました。プログラマーさんみたいに最初からガシガシコード書くなんてレベルには程遠いですけど「好きこそものの上手なれ」とはこのことなんだなぁと実感してます。

そこで今回はCSSで何かの要素を非表示にする「display:none;」と「visibility: hidden;」の違いについて、自身の備忘録を兼ねて紹介しておきたいと思います。

「display:none;」と「visibility: hidden;」の共通点と相違点

この2つのコードはどちらも何かを非表示にすることに違いがありません。

そしてソースを見るとどちらもソース上にはあるけど表示はされないという点でも共通です。

では何が違うんでしょうか??

それは

  1. 「display:none;」は非表示にした場所(スペース)は文字通り「なし」にする
  2. 「visibility: hidden;」は非表示にした場所はぽっかり空白にする

ということです。

試しに同じ要素をそれぞれのコードで非表示にして試してみてください。

例えば
<div class=”a”>1つ目の文章</div>
<div class=”b”>2つ目の文章</div>
<div class=”c”>3つ目の文章</div>
と本文に書いたとして、bというクラスに対してそれぞれのコードでCSSを書いてみると・・・

  1. 「display:none;」の場合はaの文章のすぐ下にcの文章が来る
  2. 「visibility: hidden;」の場合はaの文章の下にbのスペースが空いてcの文章が表示される

んですね。やってみると違いがはっきり分かると思います。

まあこんなことにあまり非表示の要素は使わないと思いますので実用的なところでいけば、横並びになっている3つの箱のうち真ん中を非表示にしたい場合、「display:none;」だと右の箱が真ん中に表示されるのに対して「visibility: hidden;」の場合は真ん中がぽっかり空白になるといった使い方ができます。

・・・という位まだまだ私も素人の仲間(笑)ですが、こうして1つ1つ覚えていき、かつ、メモとして残しておけば、このサイト自体が辞書代わりになる(実際に検索するときもある)・・・と信じて、「こんなこと知ってるし」という意見も臆することなくいろいろと紹介していきたいと思います。

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

1,944 円 (税込) 送料込
<p>WordPressによるWebサイト作成の基本を一から学べる書籍です。1日8時間の勤務時間内に読むことができる程度に解説内容を絞り込み,初心者・新人が最初の1冊目として読むのにふさわしい内容となっています。本書ではローカル環境にWordPressをインストールしてWebサイト..
サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

3,456 円 (税込) 送料込
<p>プラグインの開発から運用までを網羅</p> <p>※この電子書籍は固定レイアウト型で配信されております。固定レイアウト型は文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。</p> <p>CMSのデファクト・スタン..
楽天ウェブサービスセンター CS Shop

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】