CSS の display プロパティは、HTML 要素の表示方法を決定する非常に重要なプロパティです。適切に display を設定することで、柔軟なレイアウトを実現できます。本記事では、display の種類や特徴、具体的な使用例を詳しく解説します。
display プロパティとは？
display プロパティは、要素がどのように描画されるかを指定するために使用されます。デフォルトでは、HTML の要素ごとに適用される display の値が決まっていますが、CSS で変更することが可能です。
display の主な値
block
- ブロックレベル要素として表示
- 幅は親要素に対して最大限に広がる
widthやheightの指定が可能div,p,h1などがデフォルトでblock
.box {
display: block;
width: 100%;
background-color: lightblue;
}inline
- インライン要素として表示
- コンテンツの幅に応じてサイズが決まる
widthやheightの指定は無効span,a,strongなどがデフォルトでinline
.text {
display: inline;
color: red;
}inline-block
- インライン要素のように並ぶが、
widthやheightの指定が可能 - ナビゲーションやボタンのデザインに便利
.button {
display: inline-block;
padding: 10px 20px;
background-color: green;
color: white;
text-align: center;
}flex
- フレックスボックスレイアウトを適用
- 子要素を柔軟に並べ替え可能
display: flex;を親要素に設定すると、子要素のレイアウトがflex仕様に変化
.container {
display: flex;
justify-content: space-between;
}
.item {
width: 100px;
height: 100px;
background-color: skyblue;
}flexについての詳しい説明はこちら！！
grid
- グリッドレイアウトを適用
- 2 次元的なレイアウトが可能
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.item {
background-color: coral;
padding: 20px;
text-align: center;
}none
- 要素を非表示にする（
visibility: hidden;とは異なり、要素自体が存在しなくなる）
.hidden {
display: none;
}display の使い分け（表でまとめてみた）
| 値 | 特徴 | 代表的な用途 |
|---|---|---|
block | ブロック要素として表示 | 段落、セクション、ボックスなど |
inline | インライン要素として表示 | テキストの一部、リンクなど |
inline-block | インライン配置だがサイズ指定可能 | ボタン、ラベルなど |
flex | フレックスボックスで配置 | ナビゲーション、カードレイアウトなど |
grid | グリッドレイアウトで配置 | ダッシュボード、ギャラリーなど |
none | 要素を非表示にする | モーダル、タブ切り替えなど |
まとめ
display プロパティを適切に使うことで、CSS のレイアウトを自由自在にコントロールできます。それぞれの値の特徴を理解し、状況に応じて最適なレイアウトを選びましょう。
あなたのプロジェクトで display をどのように活用していますか？ぜひコメントで教えてください！
コメント