CSS入門:要素を非表示にする方法

    • このページをはてなブックマークに追加

    公開日:2016年12月05日 最終更新日:2019年09月27日

    CSSの「displayプロパティ」を使って一時的にブロック要素やインライン要素を非表示にすることができます。また、アクセス媒体(PCやモバイルなど)により特定の要素を表示/非表示にすることも可能です。本コラムでは、「visibilityプロパティ」との違いも合わせて特定の要素を表示したり非表示にしたりする方法について解説します。

    目次

    1. 「displayプロパティ」の使い方

    1.1. 基本の書式【display:none】

    「displayプロパティ」は要素の表示形式を指定するプロパティで、ブロック要素をインライン要素として指定する「display: inline」やその反対にインライン要素をブロック要素として表示する「display: block」などがあります。「displayプロパティ」は表示形式を変更するだけでなく値に「none」を指定すると、要素を非表示にすることができます。実際に動作を確認してみましょう。「display.html」をコピーしてPC上の任意の場所に保存して下さい。ファイルの種類を「UTF-8」にして保存します

    ●display.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset=”utf-8″>
    <title>CSS入門-要素の表示/非表示</title>
    <style>
    p.display_non {
    display: none;
    }
    </style>
    </head>
    <body>
    <h1>要素を非表示にする方法</h1>
    <p>通常の段落要素です。</p>
    <p class="display_non">非表示の段落(p)要素です。</p>
    <p>非表示段落の後にある要素です。</p>
    </body>
    </html>

    「display:none」を指定した段落(p)要素はブラウザーに表示されません。

    ●ブラウザーの表示(display1.html)

    display1

    ▲ページトップへ戻る

    1.2. 画像を非表示にしてみる

    テキストだけでなく画像も非表示にすることができます。「display2.html」をコピーしてPC上の任意の場所に保存して下さい。HTML文書と同じフォルダー内の「images」フォルダーに2つの画像ファイル「cherry_1.png」と「cherry_2.png」を保存してあります。

    ●display2.html

    ・・・省略・・・
    <title>CSS入門-要素の表示/非表示</title>
    </head>
    <body>
    <h1>要素を非表示にする方法</h1>
    <p>cherry_1.png</p>
    <p><img src="./images/cherry_1.png" alt="cherry"></p>
    <p>cherry_2.png</p>
    <p><img src="./images/cherry_2.png" alt="cherry"></p>
    <p>サクラの画像です。</p>
    </body>

    ピンク色と赤色の画像が表示されるHTML文書(display2.html)を編集してみましょう。

    ●ブラウザーの表示(display2.html)

    display2

    クラスセレクタ「.display_non」をHTML内のstyleタグに追加し赤色のサクラの画像(cherry_2.png)を非表示にします。

    ●display2.html

    ・・・省略・・・
    <title>CSS入門-要素の表示/非表示</title>
    <style>
    .display_non {
    display: none;
    }
    </style>
    </head>
    <body>
    <h1>要素を非表示にする方法</h1>
    <p>cherry_1.png</p>
    <p><img src="./images/cherry_1.png" alt="cherry"></p>
    <p>cherry_2.png</p>
    <p><img src="./images/cherry_2.png" class="display_non" alt="cherry"></p>
    <p>サクラの画像です。</p>
    </body>

    「display: none;」を指定した赤色のサクラの画像が表示されなくなり、直後の「サクラの画像です。」というテキストが次の段落として表示されています。

    ●ブラウザーの表示(display2.html)

    display3

    ▲ページトップへ戻る

    2. 「display:none」と「visibility:hidden」の違い

    2.1. 基本の書式【visibility:hidden】

    「displayプロパティ」と同じく要素の表示・非表示を指定する「visibilityプロパティ」があります。値に「hidden」を設定すると先ほどのHTMLドキュメント「display2.html」を編集してどのように表示されるか見てみましょう。

    ●display2.html

    ・・・省略・・・
    <title>CSS入門-要素の表示/非表示</title>
    <style>
    .hidden {
    visibility:hidden;
    }
    </style>
    </head>
    <body>
    <h1>要素を非表示にする方法</h1>
    <p>cherry_1.png</p>
    <p><img src="./images/cherry_1.png" alt="cherry"></p>
    <p>cherry_2.png</p>
    <p><img src="./images/cherry_2.png" class="hidden" alt="cherry"></p>
    <p>サクラの画像です。</p>
    </body>

    ●ブラウザーの表示(display2.html)

    display4

    「displayプロパティ」は非表示に指定したボックスそのものが表示されないのに対して、「visibilityプロパティ」は非表示に指定したボックスのスペースは確保された状態で画像のみ非表示になります。そのため、画像(cherry_2.png)のあるスペースを維持したまま次の段落の「サクラの画像です。」というテキストが表示されています。

    ▲ページトップへ戻る

    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【Java】プログラマー|WEBアプリケーションの開発

    年収 :300万円〜600万円

    弊社で支援しているWEBアプリケーションの開発をご担当いただきます。言語的にはJava、ASP.NET(C#)、PHP...

    株式会社SYNC

    正社員

    【PHP】WEBエンジニア|アパレルサイトの開発

    年収 :350万円〜

    アパレル、食品ECサイトなどの開発

    株式会社LOWCAL

    フリーランス

    【Ruby on Rails/HTML/CSS】サーバーサイドエンジニア★BtoBマッチングSaaS開発

    同社は決裁者向けのマッチングプラットフォームを展開する企業です。 今回はBtoBマッチングSaaSの開発...

    フリーランス

    【Java(Spring Boot)/React/HTML/JavaScript他】フルスタックエンジニア★セキュリティ関連企業向け新規サービス開発

    月額単価 :70万円〜80万円

    同社はWebシステムやスマフォアプリ開発を得意とする受託開発企業です。 今回は大手セキュリティ関連企...