HTMLとCSSでdisplay:noneの使い方を現役エンジニアが解説【初心者向け】

初心者向けにHTMLとCSSでdisplay:noneの使い方について解説しています。display:noneは要素を非表示にするときに使用されるものです。基本の書き方とvisibilityとの動作の違いをサンプルコードで見てみましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

HTMLとCSSでdisplay:noneの使い方について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

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

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

display:noneの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

要素を非表示にするには

要素を非表示にする場合、CSSでdisplayプロパティを使うことで非表示にすることが可能です。

パソコンでの全画面表示と携帯電話画面の表示を変えるレスポンシブなwebサイトとする場合には、displayプロパティを使用することになります。

パソコンの大きな画面で表示している画像が携帯電話ではみえづらい場合があります。

 

HTMLの画像に対してclass属性でセレクタにし、CSSにdisplayプロパティの値をnoneとすることで非表示とすることが可能です。

また、jQueryなどで表示と非表示を交互に切り替える場合などにもdisplayプロパティを使用できます。

HTMLに記述した場合でもCSSで非表示にしているため、再度表示させる場合にCSSやjQueryの記述の仕方によって。簡単に切り替えができるでしょう。

 

visibilityとdisplayの違い

displayプロパティと似たように非表示にできるプロパティとしてvisibiltyプロパティがあります。

displayプロパティによって要素が完全に存在しなくなるような非表示にできること比べて、このvisibiltyプロパティは見えなくすることが可能です。

高さや幅も維持されたまま見えなくなり、全体の構図自体が変わらないことが特徴です。

displayプロパティは値がnoneとなり要素が無くなってしまうものの、visibiltyプロパティは値がhiddenと記述することで要素が隠れた表示をすることができるでしょう。

 

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

ブラウザによる動作の違いを試そう

ボックスが縦に3つ並ぶように記述し、2つ目の要素をdisplay:noneで要素を非表示にしました。

firefox.safari.Google Chrome.internetExplorerでは表記が同じになりました。

以前のブラウザでは、表示や非表示が反映されないことがあったものの、現在は使用可能です。

display:noneを記述しているため、青のBOX2が非表示となっています。

(htmlファイル)

<divclass="box1">box1</div>

<divclass="box2">box2</div>

<divclass="box3">box3</div>

(cssファイル)

.box1{

background-color: red;

width: 100px;

height: 100px;

margin: 10px;

text-align: center;

line-height: 100px;

}

.box2{

display:none;

background-color: blue;

width: 100px;

height: 100px;

margin: 10px;

text-align: center;

line-height: 100px;

}

.box3{

background-color: yellow;

width: 100px;

height: 100px;

margin: 10px;

text-align: center;

line-height: 100px;

}

 

 

執筆してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。

WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

HTMLとCSSでdisplay:noneの使い方が分かりやすくて良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。