CSS - 表示プロパティ：視覚的な魔法の扉！
こんにちは、未来のCSSウィザードさんたち！? 私は、この旅にあなたたちとともに参加することを楽しみにしています。CSSを10年以上教えてきた者として、このプロパティをマスターすることは、ウェブデザインの可能性の宝箱を開くことであると保証します。それでは、さっそくBEGIN!
表示プロパティとは？
本題に入る前に、まずdisplayプロパティが実際に何をしているのかを理解しましょう。簡単に言えば、ウェブページ上での要素の表示方法をコントロールします。これを、舞台のそれぞれの役者（要素）にどう振る舞うかを指示する演出家のように考えてください。
可能な値
displayプロパティは、多様な状況に対応するための多くのツール（値）を持つスイスアーミーナイフのようです。以下に、最も一般的な値のリストを示します：
| 値 | 説明 |
|---|---|
| inline | 要素をインライン要素として表示（<span>など） |
| block | 要素をブロック要素として表示（<div>など） |
| inline-block | 要素をインラインレベルのブロックコンテナとして表示 |
| none | 要素をドキュメントから完全に削除 |
| flex | 要素をブロックレベルのflexコンテナとして表示 |
| inline-flex | 要素をインラインレベルのflexコンテナとして表示 |
| grid | 要素をブロックレベルのグリッドコンテナとして表示 |
| inline-grid | 要素をインラインレベルのグリッドコンテナとして表示 |
| table | 要素を<table>要素のように振る舞わせる |
| list-item | 要素を<li>要素のように振る舞わせる |
対象
displayプロパティは、すべてのHTML要素に適用されます。そう聞いてびっくりしましたか？すべての要素、<span>から<div>まで、この強力なプロパティの影響を受けることができます。
DOM構文
JavaScriptとDocument Object Model（DOM）を扱う際に、displayプロパティを以下のように操作できます：
element.style.display = "value";例えば：
document.getElementById("myElement").style.display = "none";これにより、IDが"myElement"の要素が非表示になります。魔法ですね？
CSS display - inline値
まずはinline値から始めましょう。これは<span>、<a>、<img>などの要素のデフォルト値です。
<style>
.inline-element {
display: inline;
background-color: yellow;
padding: 5px;
}
</style>
<p>これはインライン要素を含むパラグラフです：<span class="inline-element">インライン要素</span></p>この例では、<span>要素はテキストとともに流れます。新しい行では始まりません。文章中的一語のように、流れを妨げません。
CSS display - block値
次はblock値です。これは<div>、<p>、<h1>から<h6>などの要素のデフォルト値です。
<style>
.block-element {
display: block;
background-color: lightblue;
padding: 10px;
margin: 10px 0;
}
</style>
<div class="block-element">これはブロック要素です。</div>
<div class="block-element">これは別のブロック要素です。</div>ブロック要素は新しい行から始まり、利用可能な幅いっぱいに伸びます。本の段落のように、それぞれが新しい行から始まります。
CSS display - inline-block値
inline-block値は、inlineとblockの特徴を兼ねたハイブリッドです。
<style>
.inline-block-element {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightgreen;
margin: 5px;
}
</style>
<div class="inline-block-element"></div>
<div class="inline-block-element"></div>
<div class="inline-block-element"></div>これらの要素は並んで表示されますが、幅と高さを設定できます。グリッドやflexを使用しなくても、グリッドのようなレイアウトを作成するのに適しています。
CSS display - none値
none値は、要素に透明なマントをかけます。
<style>
.hidden {
display: none;
}
</style>
<p>このパラグラフは見えます。</p>
<p class="hidden">このパラグラフは見えません！</p>display: noneの要素はレイアウトから完全に削除されます。まるで存在しないかのようです。
CSS display - table値
CSSは、要素にテーブル要素のように振る舞わせることができます、実際の<table>タグを使用せずに。
<style>
.table {
display: table;
width: 100%;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid black;
padding: 5px;
}
</style>
<div class="table">
<div class="table-row">
<div class="table-cell">セル1</div>
<div class="table-cell">セル2</div>
</div>
<div class="table-row">
<div class="table-cell">セル3</div>
<div class="table-cell">セル4</div>
</div>
</div>これにより、テーブル要素を使用しなくてもテーブルのようなレイアウトを作成できます。より柔軟なレイアウトが必要な場合に便利です。
CSS display - flex値
Flexboxは強力なレイアウトツールで、display: flexで始まります。
<style>
.flex-container {
display: flex;
justify-content: space-around;
background-color: lightgray;
}
.flex-item {
background-color: white;
margin: 10px;
padding: 20px;
}
</style>
<div class="flex-container">
<div class="flex-item">Flex Item 1</div>
<div class="flex-item">Flex Item 2</div>
<div class="flex-item">Flex Item 3</div>
</div>これにより、簡単に整列させたり、配置したりできる柔軟なコンテナが作成できます。まるで体操選手のように、スペースに合わせて伸び縮みします。
CSS display - inline-flex値
inline-flexはflexと似ていますが、コンテナ自体がインライン要素として振る舞います。
<style>
.inline-flex-container {
display: inline-flex;
background-color: lightpink;
}
.flex-item {
margin: 5px;
padding: 10px;
background-color: white;
}
</style>
<div class="inline-flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
</div>
<div class="inline-flex-container">
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
</div>これにより、同一行に複数のflexコンテナを配置できます。複雑なレイアウトを作成するのに役立ちます。
CSS display - grid値
Gridは別の強力なレイアウトツールで、display: gridで始まります。
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: lightblue;
padding: 10px;
}
.grid-item {
background-color: white;
padding: 20px;
text-align: center;
}
</style>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>Gridにより、行と列を使用した複雑なレイアウトを作成できます。要素の完璧なスプレッドシートのようなものです！
CSS display - inline-grid値
inline-gridはinline-flexと似ていますが、グリッドコンテナがインライン要素として振る舞います。
<style>
.inline-grid-container {
display: inline-grid;
grid-template-columns: auto auto;
gap: 10px;
background-color: lightyellow;
padding: 10px;
}
.grid-item {
background-color: white;
padding: 10px;
text-align: center;
}
</style>
<div class="inline-grid-container">
<div class="grid-item">A</div>
<div class="grid-item">B</div>
</div>
<div class="inline-grid-container">
<div class="grid-item">C</div>
<div class="grid-item">D</div>
</div>これにより、同一行に複数のグリッドコンテナを配置できます。さらに多くのレイアウトの可能性を開きます。
CSS display - list-item値
最後に、list-item値です。これは要素をリスト項目のように振る舞わせます。
<style>
.custom-list {
display: list-item;
list-style-type: square;
margin-left: 20px;
}
</style>
<div class="custom-list">これはカスタムリスト項目です</div>
<div class="custom-list">これは別のカスタムリスト項目です</div>実際の<ul>や<ol>要素を使用せずに、リストのような構造を作成するのに便利です。
そして、みんな！私たちはdisplayプロパティの地を旅しました。控えめなinlineから強力なgridまで。CSSをマスターする鍵は練習です。それでは、これらのプロパティを試してみてください。あなたが次の大きなウェブデザインを作成するかもしれません！
幸せなコーディングを、そしてあなたのレイアウトが常にピクセルパーフェクトであることを祈っています！??
Credits: Image by storyset