CSS - 可視性: 要素の表示と非表示

こんにちは、ウェブ開発者志望の方々！今日は、CSSの可視性の魅力あふれる世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、この旅をガイドするのが楽しみです。このチュートリアルの終わりには、本当のCSS魔术師のように要素を消し去り、再び現れることができるようになります！

CSS可視性とは？

私たちがCSSの杖を振り始める前に、可視性について理解しましょう。最も単純な言葉で言えば、CSSの可視性はウェブページ上の要素が表示されるか非表示になるかを制御します。まるでHTML要素と隠れんぼをしているみたいです！

使用可能な値

可視性プロパティに使用できるさまざまな値を見てみましょう：

値	説明
visible	要素は表示されます（これはデフォルト）
hidden	要素は非表示になりますが、スペースは確保されます
collapse	主にテーブル要素に使用され、後で説明します！
inherit	親要素からの可視性を継承します

対象要素

可視性プロパティはすべてのHTML要素に適用できます。はい、間違っていません！すべての要素！divからパラグラフ、画像からテーブルまで、名前を付けるところならどこでも可視性は魔法を発揮します。

DOM構文

では、CSSで可視性を使う方法を見てみましょう：

element {
visibility: value;
}

シンプルですね？'element'をターゲットにしたいHTML要素に置き換え、'value'を先ほど説明した可視性値のいずれかに置き換えます。

CSS可視性 - visible値

まずはデフォルト値の'veisible'から始めましょう。以下は例です：

<div class="visible-box">見えるかい？</div>

<style>
.visible-box {
width: 200px;
height: 100px;
background-color: lightblue;
visibility: visible;
}
</style>

この例では、ライトブルーのボックスに「見えるかい？」というテキストを作成しています。可視性は'veisible'に設定されているので、ボックスは表示されます！これはデフォルトの動作なので、可視性を指定していなくても結果は同じです。

CSS可視性 - hidden値

さて、消失させましょう！'hidden'値を使います：

<div class="hidden-box">今見えるよ...</div>
<div class="visible-box">今見えないよ！</div>

<style>
.hidden-box {
width: 200px;
height: 100px;
background-color: lightpink;
visibility: hidden;
}
.visible-box {
width: 200px;
height: 100px;
background-color: lightgreen;
}
</style>

この例では、2つのボックスがあります。最初のボックスは'hidden'に設定されているので、ページ上に表示されません。しかし、これは重要ですが、スペースは確保されます！2番目のボックスは最初のボックスの非表示なスペースのすぐ後ろに表示されます。

これはdisplay: noneとは異なります。display: noneは要素をレイアウトから完全に削除します。'hidden'は透明なマントのように考えられます。要素はまだ存在していますが、見えないだけです！

CSS可視性 - collapse値

'collapse'値は少し特別です。主にテーブル要素に使用されます。実際に見てみましょう：

<table>
<tr>
<td>見えるよ！</td>
<td class="collapsed">折り畳まれたよ！</td>
<td>私も見えるよ！</td>
</tr>
</table>

<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
}
.collapsed {
visibility: collapse;
}
</style>

この例では、テーブル行の中央セルは'collapse'に設定されています。これにより、セルは非表示になり、そのスペースは周囲のセルに吸収されます。まるでそのセルが存在しなかったかのようです！

CSS可視性 - 非テーブル要素での折り畳み

さて、あなたはきっと思っています、「非テーブル要素に'collapse'を使うとどうなるんだ？」いい質問です！ブラウザによって挙動が異なることがありますが、一般的には'hidden'と同じ動作します。試してみましょう：

<div class="normal">普通のdivです</div>
<div class="collapsed">折り畳まれたdivです</div>
<div class="normal">別の普通のdivです</div>

<style>
.normal {
background-color: lightyellow;
margin: 5px;
padding: 5px;
}
.collapsed {
background-color: lightcoral;
margin: 5px;
padding: 5px;
visibility: collapse;
}
</style>

ほとんどのブラウザでは、'collapsed' divは'visibility: hidden'と同じように動作します。表示されませんが、スペースは確保されます。

CSS可視性 - トランジション効果

ここで面白い部分に移ります！CSSトランジションを使ってスムーズな可視性効果を作成できます。見てみましょう：

<div class="magic-box">私をホバーして！</div>

<style>
.magic-box {
width: 200px;
height: 100px;
background-color: lavender;
visibility: visible;
opacity: 1;
transition: opacity 0.5s, visibility 0.5s;
}
.magic-box:hover {
visibility: hidden;
opacity: 0;
}
</style>

この例では、ボックスにホバーすると、スムーズに消え、非表示になります。マウスを離すと、再び現れます。可視性と不透明度を組み合わせてこの効果を作成しています。クールですね？

そして、ここまでで、あなたはCSSの可視性のすべてを学びました。力には責任が伴います。新しい可視性スキルを賢く使ってください。あなたのウェブページはあなたに感謝します！

最後に、ちょっとしたジョークをどうぞ：「なぜCSS要素がセラピーに行ったの？隠された問題が多すぎたからだ！」?

ハッピーコーディング、そして、あなたの要素が見たいときにいつでも可視であることを祈っています！

Credits: Image by storyset