要素の表示の仕方を覚える！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について解説していくね！
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
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でリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。 |
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
