displayとvisibility プロパティについて
本日の教材動画はこちら
今回はdisplayとvisibilityというプロパティを勉強します。あまり聞きなれないのでどんなのかまったく想像がつかない…。
display について
display プロパティは、「そのHTML要素をどのように表示するか」を指定する際に利用されるようです。値の種類が多岐にわたるようなので、今回は動画で紹介されてた部分だけみてみましょう。
- block → ブロック要素として表示させる
- inline → インライン要素として表示させる
- inline-block → インラインで扱えるブロック要素として表示させる（※）
- none → 表示させない
※ブロック要素にしか適応できないCSSオプションを指定する時に使われる
★ブロック要素とインライン要素についての復習は下記より。 syufu33.hateblo.jp
実際に display プロパティを使ってみる
言葉だけではわかりにくいので早速見ていきましょう。今回利用するソースコードはこちらになります。
何も指定しなかった場合の表示がこちら（わかりやすいよう背景色だけはつけてます）
ここに、display プロパティをいくつか付与してみます。まずは「none」から。noneは「表示しない」という設定です。今回合計3個のpブロックを用意。ためしに一番上のpにnoneを指定してみます。するとどうなるか。
一番上のpブロックが消え、残り部分だけが表示されました。これは「none」が「表示しない」という指定のため、ソースコードにあっても実ページでは「表示されません」。簡単に言うと存在がなかった扱いになるわけですね。
次は「inline-block」の値を使ってみましょう。inline-block は簡単に言うとインライン要素をブロック要素として表示してくれる値です。今回は「aタグ」につけてみました。するとどう表示されるか。
通常aタグはインライン要素のため、改行などを挟まなければ横続きになります。ですが今回ブロック要素を付与したため、＜a＞＜/a＞ごとに改行されているのがわかります。
※ブロック要素とは、見出し、段落、リスト、フォームなどのひとつのまとまった単位として表される要素で、一般的なブラウザでは前後に改行が入って表示されます。 インライン要素とは、主に文章の一部として利用される要素でその前後は改行されません。
また、ブロック要素を付与したことにより、インラインでは指定できない余白なども設定できるようになりました。
試しに下側に30px余白を作ってみました。これがただのインライン要素であれば余白は作られないのですが、今回ブロック要素を付与しているので下側に余白ができたことがわかります。
visibility について
次にvisibility プロパティをみてみましょう。visibilityプロパは「そのHTML要素をどのように見せるか」を指定する際に利用されます。使える値は下記の3つになります。
- visible → そのボックスを表示させる
- hidden → そのボックスを非表示にさせる
- callapste → テーブルの行や列に指定するとその部分を詰めて表示する（※）
※visibility:collapseを指定した場合、ブラウザの種類やバージョンによって表示が若干異なるので注意が必要とのこと。
こちらも言葉だけではわかりにくいので実際に書いてみましょう。HTMLソースはまったく同じものを利用します。
今回はここの上から2番目にあるp（中央の段落）に、「hidden」の値を付与してみます。するとどう見えるか。
hiddenは「非表示」にさせる値の為、ご覧の通りそこにあったはずのpタグの内容がすべて非表示になったことがわかります。noneとの大きな違いは、noneは「なかったこと」にしてくるのにたいし、hiddenは「あるけど見えない状態」にしてくれることです。非表示にしているだけなので、pタグで指定した空間はそのまま残っているのがわかりますね。
非表示にしたいがレイアウトを変えたくない場合はvisibility、非表示にしてページレイアウトに反映させたい場合はdisplayを使えばよさそうですね！一般的にdisplayが使われることの方が多いそうです。（こっちの方がどのブラウザでみてもレイアウトが崩れにくいからかな…？）
【参考サイト】
display:none と visibility:hidden の違い
display …… 要素の表示形式（ブロック・インライン・フレックス等）を指定する
