HTMLやCSS、JSで要素を透明にする、または非表示にする方法

はじめに

学んだことを忘れないように備忘録として残しています

Web制作初学者の筆者が要素を透明、または非表示にする方法でよく使うものをご紹介します。

1.display: none;

要素を非表示にし、レイアウトからも削除します。

【使いどころ】
レスポンシブデザインで、端末の画面サイズや種類に応じて不要なコンテンツを非表示にする

sample {
  display: none;
}

2.opacity: 0;

要素を完全に透明にしますが、レイアウトスペースやイベントは保持されます。

【使いどころ】

• ハンバーガーメニューを取り入れたサイトのheaderのナビゲーション
  (スマホサイトはheader-navにopacity:0、レスポンシブ対応でPCサイズにopacity:1）
• 文字を半透明にする（ホバーアニメーション）

sample {
  opacity: 0;
}

3.autoAlpha (GSAP)

GSAPで使用されるプロパティ

【使いどころ】
フェードイン、アウト効果 非表示状態からスムーズに表示状態へ移行するアニメーションでよく使われます。

// フェードアウト
gsap.to(".box", { autoAlpha: 0, duration: 1 });

// フェードイン
gsap.to(".box", { autoAlpha: 1, duration: 1 }

4.transparent

要素自体は表示されますが、背景色や文字色を透明にして視覚的に透明に見せます。

【使いどころ】
背景、文字などの装飾

sample {
  background-color: transparent;
  color: transparent;
}

まとめ

本記事では、要素を透明または非表示にする方法として「display: none;」「opacity: 0;」「autoAlpha」「transparent」の4つを取り上げました。それぞれの特性や使いどころを理解することで、Web制作において柔軟に対応できるようになります。