要素の表示の仕方を覚える!CSSのdisplayとvisibilityの使い方【初心者向け】

CSSで書くdisplayとvisibilityの使い方について解説しています。要素の表示形式を変えるためには大事な知識になります。displayは実際のWebサイト制作でもよく利用するので覚えておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

CSSで書くdisplayとvisibilityの使い方について解説しています。

要素の表示を自在にコントロールするためには重要な知識になります。特に難しいわけではありませんが、Webサイトを制作する上ではよく使うので覚えておきましょう。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

20160620

 

田島メンター!表示の仕方でちょっと聞きたいことがありまして・・・

 

20163020-2

 

おお、なんだい?サイト上での表示の方法?

 

20160620

 

はい。写真とかを横並びにしたり、縦並びにする方法を知りたいんです!

 

20163020-2

 

なるほどね!そういう時は、displayっていうプロパティを使うと便利だから書きながら説明していくね!

 

20160620

 

ありがとうございます♪

 

 

displayとは

段落や画像などの各要素には、ブロックレベルやインラインレベルの値が初期値として設定されています。

ブロックレベル

前後に改行が入り、ひとつの固まりとして扱われるもの
<p>(段落)・<table>(表)など

インラインレベル

文章の中の一部のように続けて表示されるもの
<strong>(強調)・<strike>(打ち消し線)など

displayプロパティを使うと、本来ブロック要素であるものをインライン要素にしたり、インライン要素のものをブロック要素として扱うことができます。

 

displayの書き方

displayは以下のように記述します。

display: ;

値に入力したものが表示の形式になります。blockを入力するとブロック要素になり、inlineを入力するとインライン要素になります。また、noneを入力するとその要素は表示されなくなります。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際にdisplayを書いてみよう

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <p class="content1">連絡先は<address class="content1">Tel.000-0000-0000</address>です。</p>
  </body>
</html>

<p>と<address>はどちらも本来はブロックレベル要素が設定されています。これを両方インライン要素に変更します。

css

.content1 {display: inline;}

画面ではこのように表示されます。元々は改行される箇所がそのまま続けて表記されています。

divi_p_1

次に、本来インライン要素である<img>をブロックレベル要素に変更します。

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <p>
      インライン要素のimgを<img src="photo1.png" class="content1" >ブロック要素にする
    </p>
  </body>
</html>

css

.content1 {display: block;}

画面ではこのようになります。元々はインラインとして続けて表示される画像が改行され、ブロック要素として表示されています。

divi_p_2

 


 

20163020-2

 

ここまで説明してきたのがdisplayプロパティの使い方だけど、なんとなく分かったかな!?

 

20160620

 

はい、イメージできました!

 

20163020-2

 

レスポンシブで横に並んでたものを縦に並べるなんて時に便利だからね!

 

20160620

 

ああ、なるほどー!

 

20163020-2

 

もう一つ表示のところで覚えておきたいvisibilityについて解説していくね!

 

 

visibilityとは

visibilityプロパティを使用すると、要素の表示・非表示を設定することができます。

 

visibilityの書き方

visibilityは以下のように記述します。

visibility:;

visible:要素を表示の状態にします。(初期値)
hidden:要素を非表示の状態にします。
collapse :table内で指定した箇所を非表示にします。

 

実際にvisibilityを書いてみよう

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <p>
      <img src="photo1.png" class="content1">
      <img src="photo1.png" class="content2">
    </p>
  </body>
</html>

css

.content1 {visibility: hidden;}
.content2 {visibility: visible;}

htmlでは全く同じ画像を2つ並べて表示するように記述されていますが、左の画像のvisibilityにhiddenを設定していることにより画面では表示されなくなっています。

divi_p_3

 

次に、表の中の一部にcollapseを適用させます。

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <table border="1">
    <tr>
      <td>セル</td>
      <td>セル</td>
      <td>セル</td>
    </tr>
    <tr class="content1">
      <td>collapseセル</td>
      <td>collapseセル</td>
      <td>collapseセル</td>
    </tr>
    <tr>
      <td>セル</td>
      <td>セル</td>
      <td>セル</td>
    </tr>
    </table>
  </body>
</html>

css

.content1 {visibility: collapse;}

table内でcollapseを設定している部分が非表示になります。

divi_p_4

 

以上、CSSのdisplayとvisibilityについて説明してきました。

ぜひ自分でもHTML/CSSを書いてみて理解を深めてみてください。

 

20160620

 

サイトを作る上でdisplayを使う頻度は多そうですね〜!

 

20163020-2

 

そうだね〜!PC・スマホ両方でレイアウトが崩れないようにする上で便利だからね!

 

20160620

 

ちょっと自分でも書いてみようと思います〜!

 

20163020-2

 

また何かあればなんでも聞いてくださいな!

 

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。自分でサイトのデザインを作れるようになりたい方はぜひご覧ください。