CSS｜display（ディスプレイ）・visibility（ビジビリティ）要素の表示と非表示

ホームページ（ウェブサイト）制作において、特定のテキストや画像を意図的に隠したり、ユーザーの操作に合わせて表示させたりする動きは頻繁に使用されます。この「要素の表示と非表示」をコントロールするために使用される代表的なCSSプロパティが、「display（ディスプレイ）」と「visibility（ビジビリティ）」です。

これら二つのプロパティは、どちらも画面上から要素を隠すことができますが、ブラウザのレイアウト計算における扱いは全く異なります。

「display」プロパティに「none」を指定すると、その要素は画面から完全に消え去ります。単に見えなくなるだけでなく、その要素が占めていた領域（スペース）自体も無かったものとして扱われるため、下に続いていたテキストや画像が上に詰められて表示されます。スマートフォンのメニュー開閉などでよく使用されます。

一方、「visibility」プロパティに「hidden」を指定した場合、要素は透明になって画面から見えなくなりますが、要素が占めていた領域はそのまま残ります。つまり、ぽっかりと空白のスペースが空いた状態になります。

これら二つのプロパティを目的によって正確に使い分けることは、SEO（検索エンジン最適化）とWebアクセシビリティにおいて大きな意味を持ちます。例えば、検索エンジンの順位を上げる目的で、大量のキーワードを詰め込んだテキストを「display: none;」で隠す行為は、スパム（隠しテキスト）として検索エンジンから重いペナルティを受けます。また、音声読み上げソフト（スクリーンリーダー）の挙動もプロパティによって異なるため、隠した情報がユーザーにどう伝わるかを意識した設計が重要です。本ページでは、それぞれのプロパティが持つ特性から、集客に強いサイトを構築するための安全で効果的な表示制御の手法について詳しく解説します。

要素の表示と非表示を制御するプロパティの違いと使い分け

事業用のホームページ（ウェブサイト）において、パソコン版とスマートフォン版で表示する内容を切り替えたり、クリックで開くアコーディオンメニューを実装したりする際、表示制御のCSSは必ず使用されます。ここでは、レイアウトに与える影響の違いと、SEOに配慮した適切な設定手法について解説します。

要素の領域ごと消去するdisplay: none;の特性

「display」プロパティは本来、要素をブロック状にするかインラインにするかといった表示形式を決定する役割を持ちますが、「none」を指定した場合は要素そのものを非表示にします。前後の要素が自動的に詰められるため、タブの切り替えやモーダルウィンドウなど、動的なレイアウト変更を伴う場面で機能します。しかし、前述の通り、ユーザーには見えない状態で重要なテキストを隠す用途で使用すると、検索エンジンからの評価を大きく下げる危険性があるため注意が必要です。

領域を保持したまま透明にするvisibility: hidden;の特性

「visibility: hidden;」を使用すると、要素は視覚的に見えなくなりますが、本来表示されるはずだった空間はそのまま確保されます。そのため、周囲のレイアウトが崩れることはありません。例えば、ユーザーのアクションをきっかけに要素をフワッと表示させるアニメーションを実装したい場合や、表（テーブル）の中の特定のセルだけを、レイアウトを保ったまま空欄に見せたい場面などで活用されます。視覚的な効果とレイアウトの安定性を両立させる手法として重宝します。

display（ディスプレイ）

display: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「display」についてのご説明です。

ホームページ制作・作成において、display（ディスプレイ）は、ホームページ（ウェブサイト）の「要素」の表示形式（ブロック・インラインなど）を指定します。

該当要素の表示/非表示、要素の種類などを指定します。

display 要素の表示形式（ブロック・インライン）を指定

displayは、ブロック・インライン等の要素の表示形式を指定します。noneで非表示にすることもできます。

ホームページ（ウェブサイト）のレイアウトや要素の表示形式を制御するCSSのdisplayプロパティについて解説します。かつては要素を横に並べるためにfloatプロパティなどを多用していましたが、現代のホームページ制作においては仕様が大きく進化しています。スマートフォンの多様な画面サイズに対応するレスポンシブデザインを構築し、検索エンジンやユーザーにとって快適な表示速度を保つための、最新の仕様に基づいたdisplayプロパティの適切な活用方法について確認していきます。

現代のホームページ制作で主軸となる新しい値

過去の仕様には存在せず、現在のレスポンシブデザインにおいてレイアウト構築の主役となっているプロパティ値です。より専門的には、これらを駆使することで複雑なHTML構造を避け、ページの読み込み速度やメンテナンス性を大幅に向上させることができます。

flex（フレックス）とinline-flex

要素をフレキシブルボックス（Flexbox）と呼ばれるコンテナとして定義します。flexを指定するとブロックレベルのコンテナとなり、inline-flexを指定するとインラインレベルのコンテナになります。内部の要素（子要素）を横並びや縦並びにし、余白の均等割り付けや上下中央揃えなどを極めて簡単かつ正確に制御できます。現代の事業用ページにおけるヘッダーのナビゲーションや、横並びのカード型レイアウトなどで頻繁に使用します。

grid（グリッド）とinline-grid

要素をグリッドコンテナとして定義します。flexboxが1次元（横一列、または縦一列）の配置を得意とするのに対し、gridは2次元（縦横のマス目状）の複雑なレイアウトを構築することに特化しています。HTMLの記述順序にとらわれず、画面幅に合わせて要素の配置位置を自由に入れ替えることができるため、高度なホームページ（ウェブサイト）設計において非常に有用です。

従来から存在する基本の値とその役割

HTMLの各タグが標準で持っている基本的な表示形式です。新しいレイアウト手法が登場した現在でも、文章構造のベースとなるため正しい理解が重要です。

block（ブロック）

要素をブロックボックスとして表示します。見出し（hタグ）や段落（pタグ）、divタグなどの標準のスタイルです。ひとつのまとまった単位として扱われ、前後に改行が入ります。横幅（width）や高さ（height）、上下左右の余白（margin、padding）を自由に指定できます。

inline（インライン）

要素をインラインボックスとして表示します。aタグ（リンク）やspanタグなどの標準のスタイル（初期値）です。文章の一部として扱われるため、前後に改行は入りません。横幅や高さは指定できず、上下の余白（margin）もレイアウト周辺に影響を与えないという特徴があります。

inline-block（インラインブロック）

要素全体はインラインのように改行されずに横に並びつつ、内部はブロックのように横幅（width）や高さ（height）、上下の余白を指定できる値です。ボタンの配置や、アイコンとテキストを横に並べて細かく調整したい場面などで活用します。

none（ノン）

要素を画面上に表示させず、レイアウトの計算からも完全に除外します。存在しないものとして扱われるため、後続の要素が詰められます。スマートフォン閲覧時のみ非表示にしたい要素や、JavaScriptを用いてクリック時に表示を切り替えるメニューなどで使用します。

inherit（インヘリット）

親要素のdisplayプロパティの値をそのまま継承します。

list-item（リストアイテム）

要素をリストアイテムとして表示します。liタグの標準スタイルです。リスト内容が収められるブロックボックスと、行頭の黒丸や数字などのマーカーを表示するためのマーカーボックスが生成されます。

テーブルレイアウトに関連する値

HTMLのtableタグ（表）が持つ挙動を、divタグなどの別の要素に適用するための値です。かつてはレイアウト崩れを防ぐために多用されましたが、現在はflexやgridで代用できる場面が多くなっています。

tableとinline-table

table要素、またはインラインレベルのtable要素と同じ振る舞いをします。

テーブルの内部構造を定義する値群

table-row-group（tbody要素と同等）、table-header-group（thead要素と同等）、table-footer-group（tfoot要素と同等）、table-row（tr要素と同等）、table-column-group（colgroup要素と同等）、table-column（col要素と同等）、table-cell（td要素と同等）、table-caption（caption要素と同等）などがあります。より専門的には、表構造を持たないHTMLタグに対してこれらの値を付与し、セルの縦方向の中央揃え（vertical-align）などを強制的に適用させたい局所的な場面で使用することがあります。

現代の仕様における注意点と特殊な値

ブラウザの対応状況や最新の仕様変更により、扱いが変わってきているプロパティ値について解説します。

run-in（ランイン）の非推奨化

文脈に応じてブロックボックスまたはインラインボックスに変化する値として定義されていましたが、現代の主要なブラウザではサポートされておらず、実務で使用することはありません。

contents（コンテンツ）の活用

比較的新しい値として「contents」が存在します。これを指定された要素自身はレイアウトの計算ボックスを生成せず、その子要素が直接親要素のレイアウト（flexやgridなど）に参加するようになります。HTMLの階層構造を崩さずに、CSSのグリッドレイアウトなどを適用したい場合に用いる高度な指定方法です。

現代の多次元レイアウト設計とdisplayプロパティの進化

ホームページ制作において、各要素の表示形式を決定づけるdisplayプロパティは、デザインの骨組みを形作る最も基礎的かつ強力な仕組みです。しかし、より専門的には、現在の多様なデバイス環境においてすべての訪問者に安定した美しいデザインを提供し、同時に検索エンジンに適切に評価されるホームページを構築するためには、最新のCSS仕様に基づいたレイアウトモデル（FlexboxやCSS Grid）を正しく理解し、最適化されたマークアップを行うことが重要です。

Flexbox・CSS Gridの浸透と、内側・外側を制御する最新の2階層表記仕様

現代のホームページ（ウェブサイト）制作におけるレイアウト構築では、従来のblockやinline、inline-blockによる制御に加え、「flex（フレックスボックス）」や「grid（CSSグリッド）」の指定が完全に業界の標準的な手法となっています。これらは、従来の回り込み（float）手法やテーブルレイアウトのような複雑な回避コードを一切排除し、要素の横並び、緻密な格子状のグリッド配置、上下左右の中央揃えといった高度な構造設計を数行のシンプルな記述だけで完全に実現できます。

さらに、最新のCSS仕様（CSS Display Module Level 3）では、displayプロパティの値を「外側の表示形式（アウター）」と「内側の表示形式（インナー）」に分けて2つのキーワードで指定する新しい記述形式が導入されています。例えば、従来の「inline-block」は「display: inline flow-root;」と表現され、「flex」要素をインライン扱いにしたい場合は「display: inline flex;」と直感的に書き分けることができるようになっています。これにより、要素の配置制御が劇的に整理され、ブラウザ間での予期せぬ段落ちやレイアウト崩れのリスクを大幅に減らすことができます。

レスポンシブ設計の高度化と表示速度の最適化によるSEO効果

displayプロパティの柔軟な仕様変更は、モバイルファースト（スマートフォン対応）が厳格に求められる現代のホームページ運営において劇的なメリットをもたらします。例えば、デスクトップ環境では「display: grid;」で複数カラムの美しい横並びを構成し、スマートフォン環境ではメディアクエリを用いて「display: block;」やシングルカラムの「flex」へと瞬時に切り替えるといった動的なレスポンシブ設計が、無駄のない軽量なソースコードだけで完結します。

また、特定の不要なコンテンツをスマートフォン環境でのみ「display: none;」によって完全に非表示化させることで、限られた画面スペースを有効に活用した、ストレスのない優れたユーザー体験（UX）を構築できます。無駄な調整用コードや重複するHTMLを排除したスマートなスタイルシート設計は、ホームページ全体の読み込み速度を飛躍的に向上させ、検索エンジンからの高い評価（SEO対策）へと直結します。洗練されたビジュアル表現と、検索経由での優れた見つけやすさを高い次元で両立させることが、日々の事業展開において確実なWeb集客の成果をあげるための重要なポイントとなります。

display: ;

ホームページ制作・Webデザインの1ポイント

このディスプレイのプロパティ設定によって、レイアウトを細かく調整することができます。要素の内側にまた違う要素を入れるつもりが、外側にはみ出したり段落ちしたりするときは、ブロック要素とインライン要素の関係が不安定になっていることが原因といったケースがよくあります。またディスプレイ設定によって、モバイル版では一部の要素を非表示にするといったことも可能になります。

visibility（ビジビリティ）

visibility: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「visibility」についてのご説明です。

ホームページ制作・作成において、visibility（ビジビリティ）は、ボックス（要素）の表示/非表示を指定します。

visibility ボックスの表示/非表示を指定

visibilityは、ホームページ内の段落・イメージなど、ボックスの表示（visible）/非表示（hidden）を指定します。なお、visibilityは「可視性」を意味します。

表示 / 非表示に関係なくその要素分のスペースは残るため、レイアウトには影響が出ます。

visibility　読み方　「ビジビリティ、ヴィジビリティ」

ホームページ（ウェブサイト）のレイアウトにおいて、要素の表示と非表示を制御するCSSのvisibilityプロパティについて解説します。画面上から要素を消す方法としてはdisplayプロパティのnoneが有名ですが、このvisibilityプロパティとはブラウザ上での挙動が明確に異なります。SEOやアクセシビリティの観点、そして事業用ページの精密なレイアウトを維持するための、現代の仕様に基づいた適切な使い分けについて確認していきます。

要素の表示状態を制御する基本の値

visibilityプロパティに指定できる主要な値と、それぞれの画面上での振る舞いについて解説します。特に非表示にする際のレイアウトへの影響を理解することが重要です。

visible（ビジブル）

要素を通常通り画面に表示します。これがすべての要素の初期値です。より専門的には、親要素に非表示の設定（hiddenなど）が指定されて全体が見えなくなっている場合でも、特定の子要素だけにこのvisibleを指定することで、その子要素だけを例外的に表示させることが可能です。

hidden（ヒドゥン）とdisplay: noneの違い

要素を非表示にします。最大のポイントは、画面上からは見えなくなりますが、その要素が元々占めていた幅や高さの領域（ボックス）はそのままレイアウト上に空白として残る点です。対して、display: noneを指定した場合は、要素が領域ごと完全に消滅し、後続の要素が詰められます。スマートフォン画面でのレイアウト調整などにおいて、要素を完全に消してしまうと後続のテキストが意図せず回り込み、1文字だけ不自然に改行されてしまうような微細なレイアウト崩れを防ぎたい場面があります。そのような時に、空間だけを保持して表示を消すhiddenの設定が非常に役立ちます。

テーブルレイアウトとアニメーションにおける活用

表組みの制御や、現代の事業用ページで多用されるアニメーション実装における特殊な仕様について解説します。

collapse（コラプス）

主にtableタグ（表）の行（tr）や列（col）、行グループなどに指定するための値です。これらを指定すると、その行や列は非表示になり、hiddenの時とは異なり領域も詰められて表示されます。ただし、テーブル以外の要素（divやpなど）に対してこのcollapseを指定した場合は、hiddenを指定した時と全く同じ挙動（領域が残る）となります。

CSSアニメーション（transition）との連携

ホームページ（ウェブサイト）のドロップダウンメニューや、クリックして浮かび上がるモーダルウィンドウなど、要素をふわっと表示させるアニメーションを実装する際にvisibilityプロパティは重宝されます。display: noneを用いた場合、CSSのtransitionプロパティ（時間の経過による変化）を適用できず、パッと一瞬で切り替わってしまいます。そこで、要素の透明度を操作するopacityプロパティと、このvisibility: hiddenを組み合わせることで、領域を保ちながら滑らかなフェードイン・フェードアウトの視覚効果を実現できます。

SEOとアクセシビリティにおける注意点

要素を非表示にする処理は、検索エンジンのクローラーの評価や、スクリーンリーダー（音声読み上げソフト）の挙動に影響を与えます。

検索エンジンへの影響と隠しテキスト

visibility: hiddenで隠したテキストは、ユーザーに見えないコンテンツとみなされます。検索順位を上げる目的で、キーワードを大量に詰め込んだテキストをこのプロパティで隠す行為は、SEOスパムと判定されるリスクが高いため絶対に行いません。事業展開においてユーザーに正しく情報を届けるため、非表示にするのはレイアウト上の都合や動的なメニューなどに限定します。

スクリーンリーダーとフォーカス移動

visibility: hiddenを指定した要素は、スクリーンリーダーの読み上げ対象からも除外され、キーボードのTabキーによるフォーカスも当たらなくなります。ユーザーにとって現在操作できないメニューや、意味を持たない装飾要素を完全に意識させないように隠す場合には、この仕様がアクセシビリティの向上に貢献します。

適用可能要素：　すべての要素

display: noneとの決定的な違いとSEOにおける注意点

CSSで要素を非表示にする際、visibilityプロパティと並んでよく使われるのがdisplayプロパティです。この2つの最大の違いは、画面上でその要素が占めていた「空間」がどうなるかという点にあります。display: noneを指定すると要素自体が存在しないかのように扱われ、後続のレイアウトが上に詰められます。一方、visibility: hiddenを指定した場合は、要素は見えなくなりますが、その要素が元々持っていた幅や高さの空間はそのままぽっかりと空いた状態で維持されます。

より専門的には、エラーメッセージの表示領域などをあらかじめ確保しておき、周囲のレイアウトを崩さずにメッセージを出したり消したりするようなUIを設計する際に非常に重宝します。

隠しテキスト判定のリスクとアクセシビリティへの配慮

事業のホームページ（ウェブサイト）を運用し、検索エンジンからの集客を狙う上で、visibilityプロパティの使用には慎重な判断が求められます。検索エンジンは、ユーザーの目に見えないテキストを順位を操作するための不適切な隠しテキストとして判定する可能性があります。悪意がなくても、大量のキーワードを含んだ文章をvisibility: hiddenで隠してしまうと、ペナルティを受けて検索順位が大幅に低下する危険性があります。

また、音声読み上げソフト（スクリーンリーダー）の多くは、visibility: hiddenで隠された要素を読み上げません。視覚的なデザインの都合だけで特定の要素を隠してしまうと、音声で閲覧しているユーザーに重要な情報が伝わらなくなる恐れがあります。

ホームページの情報をどのような目的で隠すのかを明確にした上で、レイアウト維持が目的であればvisibilityを、存在そのものを消したいのであればdisplayを選択するなど、意図を持ったCSS設計を行うことが集客力の高いホームページ構築において重要です。

visibility: ;

ホームページ制作・Webデザインの1ポイント

visibilityなど空白であってもレイアウトに影響がでるプロパティもありますので、ホームページ制作の際、デザインを確認する時に意図しない空白があるかどうかのチェックを行い、ホームページを修正することも大切です。空白を出さない用にするためにはdisplayなどを利用しましょう。

ホームページ（ウェブサイト）制作・作成に役立つCSS3のプロパティ一覧は
⇒css3 property reference index ホームページ制作の装飾プロパティ

ホームページのCSS・スタイルシート編集方法

ホームページ制作やホームページ修正を行う際のCSS・スタイルシート編集方法について。ホームページは基本的にHTMLで構成されています。一方、その外観・デザインを設定するのはCSS（Cascading Style Sheets）・スタイルシートです。ページの基本構成はHTMLで、レイアウトやカラーの設定といった外観面はCSSで設定されています。

ホームページのCSS・スタイルシート編集方法