HTMLでの要素の表示と非表示の方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLでの要素の表示と非表示の方法について、displayとvisibilityに分け、簡単に解説していきます。

displayでの表示と非表示

スタイルのdisplayプロパティをnoneにすると非表示になります。

displayプロパティをnoneにすると、要素の領域を含めて表示されません。

<div style="display:block;">表示</div>
<div style="display:none;">非表示</div>

上記のコードでは、displayプロパティでのdiv要素の表示と非表示のサンプルを示しています。

visibilityでの表示と非表示

スタイルのvisibilityプロパティをhiddenにすると非表示となります。

visibilityプロパティをhiddenにしても、要素の領域は残されることになります。

<div style="visibility:visible;">表示</div>
<div style="visibility:hidden;">非表示</div>

上記のコードでは、visibilityプロパティでのdiv要素の表示と非表示の方法を紹介しています。

HTMLのコメントアウトでの非表示

スタイルではなくHTMLのコメントアウトで非表示にすることも可能です。

HTMLでは、”<!–“と”–>”で囲まれたものをコメントとして全て非表示にすることができます。

<!-- <div>非表示</div> -->

上記のコードでは、HTMLのコメントアウトで、div要素を非表示にし、タグそのものを無効にしています。