CSS表示で非表示・表示を制御する方法

CSS の Display プロパティは、要素の表示モードを設定するために使用されます。これを使用して要素の可視性、レイアウト、サイズなどを制御できるため、CSS アプリケーションでは非常に一般的です。

CSS 表示設定

CSS では、Display プロパティは次の値を受け入れることができます:

• none
• inline
• ブロック番号
##inline-block
• table
• table-cell
• table-row
• inline-table
• flex
• grid

さまざまな要素がさまざまな表示属性をサポートしていることに注意してください。実際の状況に基づいて適切な属性値を選択する必要があります。

CSS Display none

要素を完全に非表示にするには、Display:none を使用します。これは、要素がページ上のスペースを占有せず、他の要素に影響を与えないことを意味します。この機能は、HTML 要素を動的に表示または非表示にする必要がある Web 開発で非常に役立ちます。

CSS Display inline

要素をインライン要素として表示するには、Display:inline を使用します。つまり、要素は通常のテキストと同じように同じ行に配置されます。要素の幅と高さの属性は無視され、コンテンツのサイズのみに基づいて表示されます。

CSS 表示ブロック

要素をブロックレベルの要素として表示するには、Display:block を使用します。つまり、要素はページ上の独自の行を占有します。この機能は、HTML 要素のより具体的なレイアウトを可能にするため、非常に便利です。

CSS 表示 inline-block

要素をインライン要素とブロックレベル要素の両方として同時に表示するには、Display:inline-block を使用します。つまり、要素は同じ上に配置されます。行のように表示できますが、ブロックレベルの要素もサイズなどの属性を設定します。

CSS 表示テーブル

要素をテーブルとして表示するには、Display:table を使用します。これは、要素にテーブル ヘッダー、テーブル本体、テーブル フッターが含まれ、テーブルの関連プロパティを使用して設定できることを意味します。

CSS Display table-cell

要素をテーブル セルとして表示するには、Display:table-cell を使用します。つまり、要素はテーブル内のセルになります。列と行の間の幅と高さを自動的に調整するので、非常に便利です。

CSS Display table-row

要素をテーブル行として表示するには、Display:table-row を使用します。つまり、要素はテーブル内の行になります。また、テーブルの行をより具体的にレイアウトできるため、非常に便利です。

CSS Display inline-table

Display:inline-table を使用して要素をインライン要素とテーブルの両方として表示します。これにより、インライン要素内にテーブルを作成できるようになります。

CSS Display flex

Display:flex を使用して要素をフレキシブル ボックスにします。これは、コンテナ内の要素を必要に応じて整列、配置、追加/削除できることを意味します。

CSS 表示グリッド

Display:grid を使用して要素をグリッド コンテナーにします。これは、ページをグリッドに分割し、さまざまなサイズや位置で要素を配置できることを意味し、非常に便利です。

CSS Display による要素の表示と非表示

CSS Display の重要な機能は、HTML 要素を表示または非表示にするために使用できることです。 Display: None は、要素の表示と非表示を切り替えるためによく使用されます。

次のコードが有効になると、要素は非表示になります:

display: none;

要素を表示する必要がある場合は、Display 属性を適切な値に設定するだけです。たとえば:

display: block;

これにより、要素を再表示できるようになります。

結論

CSS Display プロパティは Web 開発において非常に重要であり、要素のレイアウト、可視性、サイズを制御して複雑なページ デザインを実現するために使用できます。さまざまな Display 値とそのユースケースを理解することは、基本的な CSS スキルを習得するための重要なステップです。

以上がCSS表示で非表示・表示を制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。