CSSのdisplayプロパティ: 要素の表示方法を制御する

1. ブロックレベルの表示: displayプロパティを「block」に設定すると、要素は独立したブロックとして表示されます。例えば、次のように記述します:

div {
  display: block;
}

2. インラインレベルの表示: displayプロパティを「inline」に設定すると、要素はテキストの一部として表示されます。例えば、次のように記述します:

span {
  display: inline;
}

3. インラインブロックレベルの表示: displayプロパティを「inline-block」に設定すると、要素はインライン要素として表示されますが、幅や高さの設定が可能になります。例えば、次のように記述します:

input[type="button"] {
  display: inline-block;
  width: 100px;
  height: 30px;
}

4. noneによる非表示: displayプロパティを「none」に設定すると、要素は表示されません。例えば、次のように記述します:

h1 {
  display: none;
}

これらはdisplayプロパティの一部の例ですが、他にも多くの値が存在します。このプロパティを使用することで、要素の表示方法を柔軟に制御することができます。

以上が、CSSのdisplayプロパティの基本的な使い方といくつかのコード例です。詳細な情報や他の値については、CSSのドキュメントを参照してください。