CSS表示

CSS の表示と可視性

display プロパティは要素の表示方法を設定し、visibility プロパティは要素を表示するか非表示にするかを指定します。

要素を非表示にする - display:none または Visibility:hidden

display 属性を「none」に設定するか、visibility 属性を「hidden」に設定して、要素を非表示にします。ただし、これら 2 つの方法では異なる結果が得られることに注意してください。

visibility:hidden は要素を非表示にできますが、非表示の要素は非表示になる前と同じスペースを占有する必要があります。つまり、要素は非表示になっていますが、レイアウトには影響します。

例

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        h1.hidden {visibility:hidden;}
    </style>
</head>

<body>
<h1>这是一个明显的标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意,隐藏标题仍然占用空间.</p>
</body>
</html>

プログラムを実行して試してください

display:none要素を非表示にすることができ、非表示の要素はスペースを占有しません。つまり、要素が非表示になるだけでなく、その要素が元々占めていたスペースもページレイアウトから消えます。

例

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        h1.hidden {display:none;}
    </style>
</head>

<body>
<h1>这是一个明显的标题</h1>
<h1 class="hidden">这是一个隐藏的标题</h1>
<p>注意,display:none 隐藏不占用空间.</p>
</body>

</html>

プログラムを実行して試してみてください

CSS表示 - ブロック要素とインライン要素

ブロック要素は、前に改行があり、全幅を占める要素です。以降。

ブロック要素の例:

<h1>
<p>
<div>

インライン要素は必要な幅のみを必要とし、強制的な折り返しは必要ありません。

インライン要素の例:

<span>
<a>

要素の表示を変更する方法

インライン要素とブロック要素を変更したり、その逆を行ったりして、Web 標準に準拠しながらページを特定の方法でまとめて見えるようにすることができます。

次の例は、リスト項目をインライン要素として表示します:

      <!DOCTYPE html>
<html>
<head>
    <style>
        li{display:inline;}
    </style>
</head>
<body>
<p>这个链接列表显示为一个水平菜单:</p>
<ul>
    <li><a href="" target="_blank">HTML</a></li>
    <li><a href="" target="_blank">CSS</a></li>
    <li><a href="" target="_blank">JavaScript</a></li>
    <li><a href="" target="_blank">XML</a></li>
</ul>
</body>
</html>

プログラムを実行して試してください

例

次の例は、span要素をブロック要素として表示します

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
span
{
display:block;
}
</style>
</head>
<body>
<h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>
</body>
</html>

プログラムを実行して、試してみてください

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <style> li{display:inline;} </style> </head> <body> <p>这个链接列表显示为一个水平菜单:</p> <ul> <li><a href="" target="_blank">HTML</a></li> <li><a href="" target="_blank">CSS</a></li> <li><a href="" target="_blank">JavaScript</a></li> <li><a href="" target="_blank">XML</a></li> </ul> </body> </html>

リセットコード

自動運転

提出する

プレビュー Clear