Hatena Blog Tags
はてなブログ トップ
visibility
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

visibility

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
2025年12月開講クラス用ブログ•2ヶ月前

【JS】ハンバーガーメニューを作る（for文）

デモサイト １）ソース ・HTML ・Javascript ・CSS ２）解説 ・要素の表示・非表示を切り替える ・width: 100%;とwidth: 100vwの違い ・inset: 0; とwidth（or height）:100vw（or vh）の違い ・Javascript「for構文」 コード 以下はHTMLです <div id="burger"> <span></span> <span></span> <span></span> </div> <div class="menu" id="drawer"> <nav> <ul> <li><a href="#">TOP</a></l…

#display;none;#opacity#visibility#width:100%;#width:100vw;#height:100%;#height:100vh;#inset:0;#for文#繰り返し処理

関連ブログ

青いやつの進捗日記。•5年前

Visibility:hidden; と display:none; の、アクセシビリティ的な違い

よく要素をopacityで消したりすると思うのですが、opacityで消すと要素は残るのでタブで移動とかするとカーソルがあたってしまうのです。なので、アクセシビリティ気にする必要あるのであればopacityでは厳しい。 なので、その場合はカーソル当たらない状態にする必要があります。 が、display:none;だと要素そのものを消してしまうので、例えばその中身でJSで計算とかをなにかしたくても消してると計算がうまく走らなかったりします。 そこで、visibility:hidden;を使います。 gist.github.com visibility:hidden;ならフォーカスが当たらないで要…

#アクセシビリティ#visibility#CSS