ログイン

問題50 高さを保ったまま要素を消してみよう

HTML_CSSの問題

HTML_CSS

今回は新しいプロパティを使って、要素を消します。 使いどころによってはとても便利な機能なので、覚えていきましょう!

高さを保ったまま要素を消してみよう

問題

高さを保ったまま要素を消してみましょう!
画像を参考に実装してみましょう。

自分の環境に書くコード

              <p>テスト1テスト1テスト1</p>
<p>テスト2テスト2テスト2</p>
<p>テスト3テスト3テスト3</p>
¥HTML¥
            
              p {
    margin-bottom: 16px;
}
¥CSS¥
            

期待する画面

コードのアイコン

解答ソースコード

              <p>テスト1テスト1テスト1</p>
<p>テスト2テスト2テスト2</p>
<p>テスト3テスト3テスト3</p>
¥HTML¥
            
              p {
  margin-bottom: 16px;
}
p:nth-child(2) {
  visibility: hidden;
}
¥CSS¥
            
答えのアイコン

解説

要素の高さを保ったまま消す方法はvisibility: hidden;を使います。

アニメーションで展開するときなどで結構使われますので覚えておきましょう。
ログインして解答を見る
要素を消す方法は他にもopacity: 0;を使って透過させるなどいくつか方法がありますが、visibility: hidden;は完全に消してくれる点が非常に便利です。
opacityの場合、あくまでも透過しただけなので、要素自体はその場に残った状態になります。

visibilityプロパティには、デフォルト値のvisible(可視)、hidden(不可視)、collapse(不可視)があります。
※hiddenとcollapseの違いについては細かいので省きます。気になる場合は調べてみて下さい。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!