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

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

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
はじめの一歩! サクサクわかるWordPress 4.x対応 [ 茂木 葉子 ]

はじめの一歩! サクサクわかるWordPress 4.x対応 [ 茂木 葉子 ]

1,814 円 (税込) 送料込
茂木 葉子 天野 裕子 マイナビ出版ハジメノイッポ サクサクワカルワードプレス ヨンテンエックスタイオウ モテギ ヨウコ アマノ ユウコ 発行年月:2016年11月25日 予約締切日:2016年11月22日 ページ数:256p サイズ:単行本 ISBN:9784839959876 Introduction WordPress..
【中古】 WordPressサイト構築スタイルブック デザイナーのためのテンプレートタグリファレンス+サイトデザインテクニック /エ・ビス..

【中古】 WordPressサイト構築スタイルブック デザイナーのためのテンプレートタグリファレンス+サイトデザインテクニック /エ・ビス..

98 円 (税込)
エ・ビスコム・テック・ラボ【著】販売会社/発売会社:毎日コミュニケーションズ/毎日コミュニケーションズ発売年月日:2006/11/11JAN:9784839921910
楽天ウェブサービスセンター CS Shop
トップへ戻る