display noneの2通りの解除方法と使える表示の値7つ

出典: Source Code Programming - Free photo on Pixabay

display noneを使えば、要素を非表示にすることができます。ですがdisplayプロパティには、none以外の値を指定することもできます。 none以外の値を指定すれば、display noneを解除し、表示するコンテンツのレイアウトを詳細に指定することができます。 display表示の値を7つ紹介しますので、参考にしてください。

display表示の値として、inlineが挙げられます。inlineを指定することで、インラインボックスを生成します。 ナビゲーション部分などで、リストとなる「liタグ」を横並びにする時に使われることが多いです。改行をしても半角スペースになり、横並び表示になります。 似た値として、blockがあります。blockと違い、「bタグ」や「spanタグ」など、コンテンツの一部分で使われることが多いです。

display表示の値として、blockも挙げられます。blockを指定することで、ブロックボックスを生成することができます。 block要素は、ウェブサイトのひとつのかたまりを指定する際に使われます。コンテンツの一部で使われるinlineと違い、ひとまとまりの段落をあらわす「pタグ」や「divタグ」、「h1タグ」などで使われます。 inlineと違う部分として、前後で改行が入ります。

display表示の値として、inline-blockも挙げられます。inline-blockを指定することで、インラインレベルのブロックボックスを生成します。 inlineのような横並び表示形式ですが、内部はblock形式です。そのため、高さや横幅などを指定することができます。 IE7以前のブラウザではサポートされていないため、使用できません。

display表示の値として、list-itemも挙げられます。 「liタグ」のようなリスト内容が収められるブロックボックスと、リストマーカーのためのマーカーボックスを生成します。リストマーカーとは、リスト要素の先頭にくる「・」のことです。 HTMLの「ulタグ」と「liタグ」だけでも通常のリストは作れるため、使用頻度は低い傾向にあります。

display表示の値として、run-inも挙げられます。 run-inを指定することで、文脈に応じてブロックボックス、またはインラインボックスを作成します。前後の文脈で、自動で判断されます。 後にくるブロックボックスが、回り込み指定や絶対配置指定がされていない場合は、インラインボックスとして表示されます。それ以外の場合にはすべて、ブロックボックスで表示されます。

display表示の値として、tableも挙げられます。HTMLと同じく、「tableタグ」のようなテーブルを作成します。 似たプロパティとして、以前からfloat要素がありました。ですが、table要素はfloat要素と違い、レイアウトが崩れる「カラム落ち」が発生しません。 すべてのカラムの高さが、一番高いカラムの高さに統一されます。テーブルの中身によって、レイアウトが崩れることが防げます。

display表示の値として、inline-tableも挙げられます。 inlineのようなリスト構造を、tableで並べて表示することができます。inline-blockのtable版と言えます。

出典: Human, person, display and electronics | HD photo by siri...

display noneを有効活用できる場面としては、ユーザーの端末ごとに、不要なコンテンツを非表示にすることです。 最近は、スマートフォンやタブレット、パソコンなど、多様な端末でサイト閲覧をするようになっています。レスポンシブデザインに対応していても、端末ごとに表示すべき情報も変わってきます。 端末により情報を取捨選択し、display noneで非表示にしたほうが、ユーザーの利便性は上がります。