ログイン
問題50

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

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

アイコン画像

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

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

エディターのアイコンあらかじめエディタに書くコード

                <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」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる