CSSでの表示の使い方を詳しく解説

CSS は Web デザインに不可欠な部分であり、表示属性はより重要な属性の 1 つです。表示属性の主な機能は、ブロック、インライン、インラインブロック、フレックス、グリッド、その他のメソッドを含む、Web ページ内の要素の表示モードを制御することです。今回はdisplay属性の使い方を紹介します。

1. block

block は、表示属性のデフォルト値です。要素がブロックに設定されている場合、その要素はページ上にブロック レベルの要素として表示され、行全体を占有し、自動的に折り返されます。一般的なブロックレベル要素には、p、h1~h6、div などが含まれます。ブロックレベルの要素では、幅、高さ、マージン、パディングなどの属性を設定したり、display:none を通じて要素を非表示にしたりできます。

サンプル コード:

<div>我是一个块级元素</div>

2. inline

Inline も一般的な表示属性です。要素がインラインに設定されている場合、その要素はページ上にインライン要素として表示され、折り返されず 1 行内に収まります。一般的なインライン要素には、a、span、img などが含まれます。インライン要素の幅と高さは要素の内容によって決まります。マージンやパディングを設定したり、display:none で要素を非表示にしたりすることはできません。

サンプルコード:

<a href="#">我是一个内联元素</a>

3. inline-block

inline-block は、block と inline を組み合わせたものです。 block の場合、ページ上にインライン ブロック レベルの要素として表示されます。行全体を占めることはありませんが、幅、高さ、マージン、パディングを指定でき、display:none を設定できます。

サンプル コード:

<span style="display:inline-block;width:50px;height:50px;background-color:red;"></span>

4. flex

Flex は CSS3 に新しく追加された属性で、要素のレイアウトをより柔軟にすることができます。要素を flex に設定するとコンテナになり、その中のサブ要素は flex 属性を設定することで幅、高さ、レイアウトを柔軟に調整できます。 flex 属性を有効にするには、display:flex を設定する必要があります。子要素のレイアウトを制御するには、flex-direction、justify-content、align-items、align-content およびその他の属性を設定できます。

サンプル コード:

<div style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;">
  <span style="flex-basis:50px;flex-grow:1;flex-shrink:1;background-color:red;"></span>
  <span style="flex-basis:50px;flex-grow:1;flex-shrink:1;background-color:green;"></span>
  <span style="flex-basis:50px;flex-grow:1;flex-shrink:1;background-color:blue;"></span>
</div>

5. grid

grid は、CSS3 に新しく追加されたもう 1 つのプロパティで、グリッド レイアウトの作成に使用できます。 flex と同様に、grid 属性を有効にするには、display:grid を設定する必要があります。grid-template-rows、grid-template-columns、grid-template-areas などの属性を通じてグリッドのレイアウトを制御できます。

サンプルコード:

<div style="display:grid;grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 50px 100px;">
  <div style="grid-row: 1/3;grid-column: 1/3;">1</div>
  <div style="grid-row: 1/2;grid-column: 3/4;">2</div>
  <div style="grid-row: 2/3;grid-column: 3/4;">3</div>
</div>

上記はdisplay属性の使用法ですが、要素のレイアウトを制御し、Webデザインの効果を実現するために、必要に応じて適切な属性を選択できます。

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