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

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

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

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

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

 

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

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

ありがとうございます♪

 

displayとは

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

ブロックレベル

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

インラインレベル

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

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

 

displayで指定できる値

displayで代表的な指定値として、次の4種類があります。

block

cssへの実装例

要素 {
  display:  block;  
}

 

表示

dislpay:blockを指定することで該当要素を縦に並べることができます。

その際、指定された要素は幅いっぱいに広がった状態で縦に並んで表示されます。

縦に並ぶ際、要素の間には改行が入ります。

 

幅・高さ

指定可能です。

 

余白

上下左右のmarginとpaddingを指定可能です。

 

テキスト位置

text-aliginとvertical-aliginは指定できません。

 

inline

cssへの実装例

要素 {
  display:  inline;  
}

 

表示

inlineを指定することで該当要素を横に並べることができます。

 

 

幅・高さ

幅や高さは、文字の長さ等により可変します。

 

余白

左右のmarginとpaddingを指定可能です。

上下のmarginは指定できません。

上下のpaddingを指定すると表示が崩れます。

 

テキスト位置

text-aliginは親要素に対して指定可能です。

vertical-aliginは指定できません。

 

inline-block

cssへの実装例

要素 {
  display:  inline-block;  
}

 

表示

inline-blockを指定することで該当要素を横に並べることができます。

 

幅・高さ

指定可能です。

 

余白

上下左右のmarginとpaddingを指定可能です。

 

テキスト位置

text-aliginは親要素に対して指定可能です。

vertical-aliginは指定できません。

 

none

cssへの実装例

要素 {
  display:  none;  
}

 

表示

dislpay:noneを指定することで該当要素が非表示になります。

 

 

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

displayの書き方

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

display: ;

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

 

実際に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

 


 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

ああ、なるほどー!

田島悠介

もう一つ表示のところで覚えておきたい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を書いてみて理解を深めてみてください。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

田島悠介

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

 

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

この記事を監修してくれた方

中本賢吾(なかもとけんご)
アジマッチ有限会社 代表取締役社長

開発実績:PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。

その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ!を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。