↩ プログラミング言語 Web関連 css3 CSS visibility (要素の可視性)

CSS visibility (要素の可視性)

The visibility attribute in CSS is used to set whether an element is visible. You can use this attribute with JavaScript to create a very complex menu or web page layout.

たとえば、Web ページでいくつかのテスト問題を行うときは、次のように使用できます。回答を変換する可視性属性または分析して非表示にし、必要に応じて表示します。

可視性属性のオプションの値は次のとおりです。

価値	説明
visible	要素が表示されていることを示すデフォルト値
hidden	隠し要素
collapse	主にテーブルの行と列を非表示にするために使用されます。非表示の行または列が占めるスペースは、他のテーブルコンテンツで使用できます。他の要素で使用した場合、その効果は「非表示」と同等です。
inherit	親要素から可視性属性の値を継承する

ヒント: 可視性属性は要素を非表示にしますが、ページ上で要素が占めるスペースを確保します。ページのスペースを占有せずに要素を非表示にする場合は、display 属性を使用します。

[例] visibility(可視性)属性を使用して、ページ内の特定の要素を非表示にします。

 <!DOCTYPE html>
<html>
<head>
    <style>
        .visible {
            visibility: visible;
        }

        .hidden {
            visibility: hidden;
        }
        .collapse {
            visibility: collapse;
        }
        table {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <h1 class="visible">表示</h1>
    <h1 class="hidden">非表示</h1>
    <table border="1">
        <tr><th>値</th><th>記述</th></tr>
        <tr><td>visible</td><td class="collapse">デフォルト値で、要素が表示されることを示す</td></tr>
        <tr><td>hidden</td><td>要素を非表示にする</td></tr>
        <tr class="collapse"><td>collapse</td><td>主にテーブルの行と列を非表示にするために使用され、非表示にされた行または列のスペースは他のテーブルのコンテンツに使用される。他の要素で使用する場合、「hidden」と同じ効果がある</td></tr>
        <tr><td>inherit</td><td>親要素からvisibility属性の値を継承する</td></tr>
    </table>
    <p><strong>ヒント：</strong>visibility属性は要素を非表示にするが、ページ内で要素が占めるスペースを保持する。要素を非表示かつページスペースを占有しないようにしたい場合は、display属性を使用してください。</p>
</body>
</html>

実行結果は次の図のとおりです。

注: 非表示の要素については、ページ上には表示されませんが、ソースコードにはまだこれらの非表示の要素が含まれているため、ユーザー情報やパスワードなどの機密情報を非表示にするためにそれらを使用しないようにしてください。

「 CSS の可視性 (要素の可視性)」についてわかりやすく解説！絶対に観るべきベスト2動画

CSS Position: Fixed

https://www.youtube-nocookie.com/watch?v=jAm8wm77aTM&pp=ygUsIENTUyDjga7lj6_oppbmgKcgKOimgee0oOOBruWPr-imluaApykmaGw9SkE%3D

Thuộc tính Position: Fixed | CSS Position: Fixed (https://www.youtube-nocookie.com/watch?v=jAm8wm77aTM&pp=ygUsIENTUyDjga7lj6_oppbmgKcgKOimgee0oOOBruWPr-imluaApykmaGw9SkE%3D)

css3