CSSで要素の表示非表示をする方法と使い方 – サンプルコード付きの徹底解説! – JPSM

CSSで要素の表示非表示をする方法と使い方 – サンプルコード付きの徹底解説!

CSSを使って要素の表示非表示をする方法と使い方 - サンプルコード付きの徹底解説!CSS

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

また、理解しにくい説明や難しい問題に躓いても、JPSMがプログラミングの解説に特化してオリジナルにチューニングした画面右下のAIアシスタントに質問していだければ、特殊な問題でも指示に従い解決できるように作ってあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

Webページの見た目をカスタマイズするためにCSSを使うことは非常に一般的ですが、CSSを使って要素の表示非表示をすることもできます。

例えば、ボタンをクリックすると別の要素が表示されるような動きを実現することができます。

本記事では、CSSで要素の表示非表示をする方法と使い方を詳しく解説します。

初心者でも分かりやすいサンプルコードを多数掲載しているので、ぜひ参考にしてください。

●表示非表示の方法

要素の表示非表示をする方法は、CSSのdisplayプロパティを使うことで実現できます。

displayプロパティにはいくつかの値がありますが、今回は以下の2つについて解説します。

・display:none 要素を非表示にするためには、displayプロパティにnoneを指定します。noneを指定すると、要素が消えてしまいます。また、スクリーンリーダーにも読み上げられなくなるので、アクセシビリティに問題が生じる可能性があります。

・display:block 要素を表示するためには、displayプロパティにblockを指定します。blockを指定すると、要素が通常のブロックレベル要素として表示されます。つまり、要素が独立したブロックとして表示されるようになります。

●サンプルコード

次のサンプルコードは、ボタンをクリックすると別の要素が表示される動きを実現するものです。

クリックするたびに要素が表示されたり非表示になったりします。

<!DOCTYPE html>
<html>
<head>
<style>
#target {
  display: none;
}
.show {
  display: block;
}
</style>
</head>
<body>
<button onclick="document.getElementById('target').classList.toggle('show')">Click me</button>
<div id="target">Hello, world!</div>
</body>
</html>

●使い方の例

要素の表示非表示を使った具体的な使い方として、次のようなものがあります。

・メニューのドロップダウン
メニューの項目をクリックすると、詳細なサブメニューが表示されるようなドロップダウンメニューを実現することができます。
この場合、JavaScriptを使ってクリックした要素の次の要素を非表示にしたり、表示したりするようにコーディングします。

・アコーディオン
複数のコンテンツを同じページ内に表示する際に、アコーディオンというUIパターンを使うことがあります。
アコーディオンは、タイトルをクリックすると詳細なコンテンツが表示されるようになっています。
この場合、CSSを使って詳細なコンテンツを非表示にしておき、タイトルをクリックしたときに詳細なコンテンツを表示するようにします。

・ポップアップ
画像やテキストをクリックするとポップアップが表示されるようなUIも、CSSで実現することができます。
ポップアップは、クリックした要素の横に表示されることが多いため、CSSを使って絶対座標で配置するようにします。

●サンプルコード

次のサンプルコードは、アコーディオンを実現するものです。

タイトルをクリックすると詳細なコンテンツが表示されます。

<!DOCTYPE html>
<html>
<head>
<style>
.accordion {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
}
.accordion .title {
  background-color: #f7f7f7;
  cursor: pointer;
  padding: 10px;
}
.accordion .content {
  display: none;
  padding: 10px;
}
.accordion .content.show {
  display: block;
}
</style>
</head>
<body>
<div class="accordion">
  <div class="title" onclick="this.nextElementSibling.classList.toggle('show')">タイトル1</div>
  <div class="content">詳細なコンテンツ1</div>
</div>
<div class="accordion">
  <div class="title" onclick="this.nextElementSibling.classList.toggle('show')">タイトル2</div>
  <div class="content">詳細なコンテンツ2</div>
</div>
</body>
</html>

まとめ

本記事では、CSSで要素の表示非表示をする方法と使い方について解説しました。

要素を非表示にするためには、displayプロパティにnoneを指定します。

要素を表示するためには、displayプロパティにblockを指定します。

さらに、具体的な使い方として、メニューのドロップダウンやアコーディオン、ポップアップなどを紹介しました。

初心者でも分かりやすいように、多数のサンプルコードを掲載していますので、ぜひ参考にしてください。

CSSを使った要素の表示非表示は、Webページの見た目をカスタマイズするために非常に有用な技術です。

さまざまなUIパターンに応用することができるため、Webデザイナーにとっても重要なスキルの一つです。

本記事を参考に、自分自身で要素の表示非表示を使ったWebページを作ってみてはいかがでしょうか。