CSSの表示と非表示

CSS の表示と非表示

CSS (Cascading Style Sheets) は、Web ページのスタイルとレイアウトを記述するために使用されるスタイル シート言語です。 Web 開発では、CSS の表示機能と非表示機能は非常に重要です。これは、HTML 要素の可視性を制御することで実現できます。この記事ではCSSの表示・非表示の実装方法と応用を紹介します。

1. 基本構文

CSS では、要素の表示属性を設定することで要素の可視性を制御します。 display 属性の値は次のとおりです。

1. none: 要素を非表示にし、スペースを予約しません。
2. block: 要素はブロックレベルの要素として表示され、スペースの行全体を占めます。
3. inline: 要素はインライン要素として表示され、インライン領域を占有します。
4. inline-block: 要素はインライン ブロック レベルの要素として表示され、インライン スペースを占有しますが、幅と高さは設定できます。
5. table: 要素はテーブルとして表示されます。このとき、要素の表示属性は table-cell に設定され、table-cell がテーブルのスペースを占有します。
6. table-row: 要素は表の行として表示されます。このとき、要素の表示属性は table-cell に設定され、table-cell が表のスペースを占有します。
7. table-cell: 要素は表のセルとして表示され、表のスペースを占めます。

2. 実装方法

1. 初期非表示

最も簡単な実装方法は、CSS で要素の表示属性を none に設定することです。 。たとえば、次のコードでは、div 要素の初期状態は非表示になっています。

div{
  display:none;
}

2. クリックして表示

JavaScript を使用して、ボタンを表示または非表示にすることができます。要素をクリックすると。まず、HTML でボタンを定義します:

<button onclick="toggle()">点击显示/隐藏</button>

ここには onclick イベントが定義されており、ボタンがクリックされると toggle() 関数が実行されます。次に、CSS で、以下に示すように、要素の表示属性を none に設定します。

#box{
  display:none;
}

最後に、JavaScript で、要素の表示属性を変更することで表示または非表示にする toggle() 関数を定義します。

function toggle(){
  var box = document.getElementById("box");
  if(box.style.display == "none"){
    box.style.display= "block";
  }
  else{
    box.style.display= "none";
  }
}

3. マウスのロールオーバー時の表示

同様に、JavaScript を使用して、マウスのロールオーバー時に要素を表示または非表示にすることができます。 HTML で、要素を定義します。

<div onmouseover="show()" onmouseout="hide()">鼠标滑过显示/隐藏</div>

ここでは、onmouseover イベントと onmouseout イベントが定義されており、それぞれマウスのスライド操作と離れる操作を表します。次に、CSS で、以下に示すように、要素の表示属性を none に設定します。

#box{
  display:none;
}

最後に、JavaScript で show() 関数と Hide() 関数を定義します。

function show(){
  var box = document.getElementById("box");
  box.style.display= "block";
}

function hide(){
  var box = document.getElementById("box");
  box.style.display= "none";
}

3 . 応用例

1. ポップアップボックス

CSSの表示属性でポップアップボックスの表示・非表示を切り替えることができます。 HTML で、ボタンとポップアップ ウィンドウを定義します。

<button onclick="show()">点击弹窗</button>

<div id="dialog">
  <h2>弹窗标题</h2>
  <p>弹窗内容</p>
  <button onclick="hide()">关闭弹窗</button>
</div>

次に、CSS で、以下に示すように、ポップアップ ウィンドウの表示属性を none に設定します。ポップアップウィンドウの幅、高さ、位置、背景色などのスタイルをここで設定します。最後に、JavaScript で show() 関数と hide() 関数を定義して、ポップアップ ウィンドウの表示と非表示をそれぞれ制御します。

#dialog{
  display:none;
  position:absolute;
  top:50%;
  left:50%;
  width:400px;
  height:300px;
  margin-left:-200px;
  margin-top:-150px;
  background:#fff;
  border:1px solid #ccc;
  padding:20px;
}

Picture carousel

2. CSS を介して表示属性により画像カルーセルの切り替え効果を実現できます。 HTML で、イメージ コンテナと複数のイメージを定義します。

function show(){
  var dialog = document.getElementById("dialog");
  dialog.style.display= "block";
}

function hide(){
  var dialog = document.getElementById("dialog");
  dialog.style.display= "none";
}

次に、CSS で、以下に示すようにイメージ コンテナのスタイルを設定します。

<div id="slider">
  <img src="img/1.jpg" />
  <img src="img/2.jpg" />
  <img src="img/3.jpg" />
  <img src="img/4.jpg" />
</div>

ここで、イメージ コンテナの幅は次のとおりです。 set 、高さ、オーバーフローの非表示、画像の位置と表示のプロパティ。最後に、JavaScript で画像カルーセルの効果が実現されます。

#slider{
  width:500px;
  height:300px;
  overflow:hidden;
  position:relative;
}

#slider img{
  position:absolute;
  top:0;
  left:0;
  display:none;
  width:100%;
  height:100%;
}

ここでは setInterval 関数を使用して、2 秒ごとに画像を切り替えます。具体的な実装方法は、まず現在の画像の表示属性を none に設定し、次に次の画像のインデックス値を計算し、最後に画像の表示属性を block に設定します。

4. まとめ

CSS の表示・非表示機能の実装方法は非常にシンプルですが、Web 開発の基本スキルです。実際の開発では、ポップアップウィンドウや画像カルーセルなど、CSSの表示属性によってさまざまな効果を実現できます。同時にJavaScriptとの連携により、より豊かなインタラクティブ効果を実現します。

以上がCSSの表示と非表示の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。