CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS で要素を非表示にする方法:包括的なステップバイステップのチュートリアル

CSS プロパティの表示:none または可視性:を使用して、CSS 内の要素を非表示にできます。 非表示 。 display:none はページから要素全体を削除し、ページのレイアウトに影響を与えます。可視性: 非表示 スペースを同じに保ちながら要素を非表示にします。

Web ページ上の要素を非表示にしたい場合があります。たとえば、テキスト ブロックを非表示にしておき、ユーザーがボタンをクリックしたときに表示したい場合があります。

CSS で要素を非表示にする場合は、主に次の 2 つの方法があります。

  • display:none 属性。
  • 可視性:隠し属性。

最初の方法は、Web ページのレイアウトに影響を与える可能性があります。しかし、それでも 2 番目の方法が人気があります。

CSS 非表示要素:表示

display プロパティは、Web ページ上で要素がどのように表示されるかを制御します。 HTML ドキュメント内のすべての要素には、表示プロパティのデフォルト値がありますが、その値は要素によって異なります。ほとんどの要素では、デフォルトの表示値はブロックのいずれかです。 またはインライン .

要素をまったく表示したくない場合は、display の値を設定できます。 プロパティを none に設定します。

次のスタイル ルールは、Web ページ上の要素を非表示にします:

display の値を設定するとき none にすると、影響を受ける要素は消えます。これは、要素が Web ページ上のスペースを占有しなくなることを意味します。

表示:なし 例

会社概要をデザインしているとします。 地元の料理クラブのウェブページ。最初のデザインでは、ページにケーキの画像を追加しました。現在、クラブは最終的なデザインがわからないため、画像を非表示にするよう求めています。

次のコードを使用して、ページ上の画像を非表示にすることができます。

<html>
<div>
<h1>About Us</h1>
<img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" />
<p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p>
</div>
<style>
img {
 display: none;
}
<style>

をクリックします。  CSS で要素を非表示にする方法:包括的なステップバイステップのチュートリアル 上のコード エディターのボタンをクリックすると、HTML/CSS コードの出力が表示されます。

HTML の

タグ内に 3 つの要素を定義しました。

要素はヘッダーの作成に使用され、会社概要というテキストが含まれます。 。 HTML の 要素は、高さ 200 ピクセル、幅 200 ピクセルのケーキの画像を作成します。

要素には、クラブの簡単な説明が含まれます。

CSS コードでは、「img」セレクターを使用して、ページ上のすべてのイメージ タグを選択します。このルールは、すべての タグの表示プロパティを なし に設定します。 。言い換えれば、スタイル ルールによって画像が隠されているということです。

画像は非表示になっていますが、Web ページにはまだ存在しています。画像を元に戻したい場合は、display:none; を削除します。 スタイル。または、別の表示スタイル (ブロック など) を指定することもできます。 またはインライン ).

このルールをインライン HTML 属性として定義できます。

CSS で要素を非表示にする方法:包括的なステップバイステップのチュートリアル

インライン HTML および CSS プロパティの詳細については、インライン CSS ガイドをご覧ください。

CSS 要素の非表示:可視性

CSS 可視性プロパティは、要素が Web ページ上に表示されるかどうかを制御するために使用されます。

デフォルトでは、可視性の値は プロパティが表示されています 。ただし、画像を非表示にしたい場合は、可視性の値を設定できます。 非表示にする .

次のスタイル ルールは、要素の可視性を非表示に設定します。

先ほどの料理クラブの例に戻りましょう。 会社概要でケーキの画像を非表示にしたいとします。 ウェブページ。次のコードを使用してこれを行うことができます。

<html>
<div>
<h1>About Us</h1>
<img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" />
<p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p>
</div>
<style>
img {
 display: visibility;
}
<style>

をクリックします。  CSS で要素を非表示にする方法:包括的なステップバイステップのチュートリアル 上のコード エディターのボタンをクリックすると、HTML/CSS コードの出力が表示されます。

この例の HTML コードは同じです。 CSS ファイルでは、ディスプレイを使用する代わりに、 プロパティでは、可視性を使用しました。 要素を非表示にします。上に見られるように、私たちの画像は Web ページから非表示になっています。

画像は消えていますが、ヘッダーと段落の間に画像が配置されていたスペースができています。これはvisibility:hidden; の機能です。 スタイル。元の要素のスペースは Web ページによって引き続き保持されます。ただし、要素は非表示になります。

CSS の可視性と表示

要素を非表示にするこれまで説明した 2 つの方法は同じように見えますが、この 2 つには違いがあります。

表示:なし ルールは HTML ドキュメントから要素を削除します。非表示要素のコードはまだ存在しますが、要素自体は表示されません。

可視性:非表示 一方、ルールは要素を非表示にしますが、その要素は依然として Web ページ上のスペースを占有します。要素を非表示にし、Web ページ上でその要素のスペースを維持したい場合は、visibility:hidden; を使用します。 ルールが最善です。

CSS で要素を非表示にする方法:包括的なステップバイステップのチュートリアル

「キャリアカルマは、私が最も必要としたときに私の人生に入り込み、すぐにブートキャンプに参加するのに役立ちました。卒業から 2 か月後、自分の価値観と人生の目標に合致する夢の仕事を見つけました!」

Rockbot のソフトウェア エンジニア、Venus 氏

ブートキャンプにマッチするものを見つけてください

結論

表示:なし ルールはドキュメントから要素を削除し、ビューから非表示にします。 可視性:非表示 このルールはドキュメント上の要素を非表示にし、要素が表示されるはずのスペースを空のままにします。

CSS についてもっと詳しく知りたいですか? CSS の学習方法ガイドをお読みください。このガイドには、CSS の学習方法に関する実用的なアドバイスが満載です。また、知識を高めるために使用できる主要なリソースのリストも見つかります。


  1. CSSインラインブロック

    display プロパティは、Webページのレイアウトに不可欠です。 displayプロパティは、要素がその周囲の要素に関連してどのように表示されるかを決定します。このCSSプロパティにはいくつかの値があります。最もよく使用される値には、inlineが含まれます 、block 、およびinline-block 。この記事では、これら3つのCSS表示値の実装と違いについて説明します。 構文 displayのCSS値を実装するための構文、構文は次のとおりです。 表示：値; この記事では、3つの値はインライン、ブロック、およびインラインブロックであるため、構文は次のようになります。 表

  2. CSSで個々の辺のパディングを定義する

    CSSを使用すると、要素にサイド固有のパディングを設定できます。 padding-top、padding-right、padding-bottom、およびpadding-rightプロパティは、それぞれ上、右、下、および左のパディングを定義します。パディングの省略形プロパティを使用して、時計回りに値を指定することで同じ出力を実現することもできます。 構文 CSSパディングプロパティの構文は次のとおりです- Selector {    padding-top: /*value*/    padding-right: /*value*/   &n