ウェブページ要素を隠す方法

Cover photo by Road Trip with Raj on Unsplash.

導入

いくつかの条件が満たされている場合、いくつかのページ要素を非表示にする可能性があります.これらの条件は

ページの読み込み成功.

JavaScriptファイルが正常にダウンロードされました.

JavaScriptが有効になります.

デバイスの向きの変更.

あなたが自分自身を見つけるかもしれないどのような状況は、アクセシビリティを念頭に置いてページの要素を非表示に最適です.

ページ要素を隠す方法

複数のオプションは、ページ要素を隠すときに開発者としてツールセットで使用できます.以下を含みます:

HTMLstyle 属性.

CSSdisplay プロパティ.

CSSposition プロパティ.

JavaScriptで要素を隠します.

HTMLスタイル属性

HTMLを使うときstyle 属性をいくつかのCSSプロパティを使用する必要がありますページの要素を非表示にします.時間のほとんどはdisplay 値のプロパティnone .

<p style="display: none;">This text is not shown on screen</p>

ページの要素を隠すときにはdisplay: none; スクリーンリーダーによって無視されます.例えばNVDA .

CSS表示プロパティ

CSSdisplay 値のプロパティnone 条件に応じていくつかの方法で使用できます.次の場合に使用できます.

ページ要素を完全に隠す

デバイスの向きの変更

ページ要素を完全に隠す

次のセレクターはページ要素を完全に隠し、Webブラウザは画面上に表示しません.スクリーンリーダーはそれを読みません.

.selector {
    display: none;
}

あなたが完全に隠すどんな要素もあなたの内容を理解するのに重要でないか、そのアクセシビリティを減少させないことを確認してください.
モバイル上の検索入力を隠すことは、それを明らかにするメカニズムを持っていない限り、メカニズム自体が本当に良いことではない.

デバイスの向きの変更

あなたがアプローチを使用して設計されているときは、携帯電話上で自分自身を隠して、タブレットやデスクトップビューでそれらを示して下さい.
次の例を取り上げます.

.left-side-bar {
    display: none;
}

/**
 * On tablet view upwards we show the
 * the left side bar
 */
@media screen and (min-width: 48em) {
    .left-side-bar {
        display: block;
    }
}

CSSの位置プロパティ

The position プロパティを使用してWebページ上のWebページの場所をWebページの要素を配置することができます.また、完全に画面のページの要素を移動するために使用することができます.私は、私のポストでこれをする方法を詳述しました::...
以下は、選択されたページ要素を画面外に移動するが、それはまだスクリーンリーダに利用可能である.

.visually-hidden {
    position: absolute;
    top: auto;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

要素を隠す

JavaScriptでページ要素を隠すことは2つの折り目です.以下のようになります:

インラインスタイルを直接適用する.

要素を非表示にするクラス名の追加.

インラインスタイルの直接適用

Webページメソッドは、数DOMメソッドdocument.getElementByID() , document.querySelector() この後、あなたはそれに直接要素を隠すスタイリングを適用することができます.
次の例を見てください.

let header = document.getElementById('header');

// hide the header 
header.style.display = "none";

上のコードのヘッダーは、ユーザーがブラウザでJavaScriptを有効にしたり、WebブラウザがJavaScriptファイルを正常にダウンロードしたときにのみ取得します.

要素を隠すクラス名の追加

ページ要素を隠すためにCSSファイルにクラスを作成できます.次に、JavaScriptでページ要素を選択し、このクラスを追加できます.
次のCSSクラスは、適用される要素を隠します.

.hidden {
    display: none;
}

その後、追加することにより、目的のページ要素を非表示にすることができます.hidden クラス属性へのクラス.

let footNote= document.getElementByID('foot-note');

// add the hidden class
footNote.classList.add('hidden');

ページの要素を隠すいくつかの方法を強調したので、あなたがするのを避けるべきいくつかのことがあります.

やるべきこと

JavaScriptでそれを示す意図でCSSで要素を隠してはいけません.これは悪い.
そうしないでください.

.left-side-bar {
    display: none;
}

JavaScriptで表示する

let leftSideBar = document.querySelector('.left-side-bar');

// then show it
leftSideBar.style.display = "block";

ユーザーがJavaScriptを無効にした場合や、JavaScriptがダウンロードを失敗した場合は、要素へのアクセスを失うことになります.
あなたがこれをする必要があるならば、あなたの前のブログ柱にリンクするサイドバーのようなあなたのページの重要な要素でないことを確認してください.

実生活例

下のイメージでは、devの基本的なマークダウンエディタを使用していますが、リッチエディターで利用可能なPublish and Saveドラフトボタンを見ることができます.

これらのボタンは後でJavaScriptのダウンロード時に非表示になります.デバッグチームがCSSでボタンを隠したので、JavaScriptで表示されるので、これらのボタンは表示されず、空のスペースを見るかもしれません.

結論

多くのオプションがページの要素を隠すことになると、選択はあなたのですが、心のアクセシビリティでそれを行うには覚えておいてください.
2020年6月25日:アクセシビリティについての記事へのリンクを追加します.