cssのdisplayプロパティの機能は何ですか
displayプロパティは、要素の表示方法を設定します。
一般的に用いられるdisplayプロパティの値とその機能:
- なし:要素は表示されず、ページ内の要素が占有していたスペースは削除されます。
- ブロック:要素をブロックレベルの要素として表示し、一行全体に幅をとります。デフォルトでは、すべてのブロックレベルの要素は行をラップします。
- インライン:要素をインライン要素として表示します。つまり、1 行に表示され、行が折り返されることはありません。
- インラインブロック:要素を同じ行に表示するインライン要素として表示し、幅や高さなどのプロパティを設定できます。
- flex: 要素をフレックスボックスモデルで表示し、フレックスコンテナのプロパティを設定することでフレックスレイアウトを実現します。
- grid:グリッド・コンテイナーのプロパティーを設定することでグリッドレイアウトを実現し、要素をグリッドレイアウトで表示します。
- table: 要素をテーブルレイアウトとして表示し、テーブル関連の属性でレイアウトすることができます。
- インラインテーブル:要素をインラインテーブルレイアウトとして表示します。
- table-cell: 要素をテーブルのセルレイアウトとして表示します。
- table-row: 要素をテーブル行としてレイアウトする。
さらに、displayプロパティは、display: flex;とflex-direction: row;を組み合わせることで、水平方向に並ぶフレックスボックスレイアウトを実現するなど、他のプロパティと組み合わせて使用できます。