要素の表示の仕方を覚える！CSSのdisplayとvisibilityの使い方【初心者向け】
CSSで書くdisplayとvisibilityの使い方について解説しています。要素の表示形式を変えるためには大事な知識になります。displayは実際のWebサイト制作でもよく利用するので覚えておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,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を指定することで該当要素が非表示になります。
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;}
画面ではこのように表示されます。元々は改行される箇所がそのまま続けて表記されています。
次に、本来インライン要素である<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;}
画面ではこのようになります。元々はインラインとして続けて表示される画像が改行され、ブロック要素として表示されています。
ここまで説明してきたのが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を設定していることにより画面では表示されなくなっています。
次に、表の中の一部に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を設定している部分が非表示になります。
以上、CSSのdisplayとvisibilityについて説明してきました。
ぜひ自分でもHTML/CSSを書いてみて理解を深めてみてください。
サイトを作る上でdisplayを使う頻度は多そうですね〜！
そうだね〜！PC・スマホ両方でレイアウトが崩れないようにする上で便利だからね！
ちょっと自分でも書いてみようと思います〜！
また何かあればなんでも聞いてくださいな！
[お知らせ]TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。自分でサイトのデザインを作れるようになりたい方はぜひご覧ください。
| この記事を監修してくれた方
中本賢吾（なかもとけんご） 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。 |
