CSSでの表示の使い方

display 属性は、要素のレイアウト動作を指定するために使用されます。ブロック、インライン、インラインブロック、なし、フレックス、グリッドなど、複数の値から選択できます。 display プロパティを使用すると、CSS スタイル シートで値を指定することで、要素の表示をブロック要素、インライン要素、またはその他の書式設定として設定できます。たとえば、display: block; は要素をブロックレベルの要素として表示します。

CSSでの表示の使い方

display属性とは何ですか？

display 属性は、ページ上の要素のレイアウト動作を定義するために使用され、要素がブロック要素、インライン要素、またはその他の形式として表示される方法を指定します。

display の値

display プロパティは次の値を受け入れます:

• block - 要素はブロックレベルの要素として表示され、利用可能な幅全体を占め、新しい行で始まります。
• inline - 要素はインライン要素として表示され、他の要素と同じ行にある場合は折り返されません。
• inline-block - ブロックとインラインの機能を組み合わせて、要素が幅を取っても同じ行内の他の要素と一緒に表示できるようにします。
• none - 要素はページに表示されません。
• flex - 要素をフレックスボックスレイアウトのコンテナーにします。
• grid - 要素をグリッド レイアウトのコンテナーにします。

表示属性の使用方法?

次の構文で CSS スタイルシートの表示属性を使用します:

<code class="css">selector {
  display: value;
}</code>

例:

<code class="css">p {
  display: block;
}</code>

これにより、すべての段落要素がブロックレベル要素として表示されます。

display属性の使用例

• タイトル要素をブロックレベル要素として表示:

  <code class="css">h1 {
  display: block;
  }</code>

  ログイン後にコピー

• ハイパーリンクをインライン要素として表示:

  <code class="css">a {
  display: inline;
  }</code>

  ログイン後にコピー

• 両方とも幅を満たす要素を作成他の要素と並べます ボタン:

  <code class="css">button {
  display: inline-block;
  }</code>

  ログイン後にコピー

• ページ上の要素を非表示:

  <code class="css">#my-element {
  display: none;
  }</code>

  ログイン後にコピー

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