HTML要素の表示方法を切り替える!displayプロパティの使い方をサンプルコードで理解しよう
  • facebookページ
  • twitterページ
  • 2020.03.03

    HTML要素の表示方法を切り替える!displayプロパティの使い方をサンプルコードで理解しよう

    HTML要素の表示形式を指定する場合、CSSの「display」プロパティを使用します。

    本記事では、「display」プロパティの基本的な使い方から「block」や「inline-block」といった違いの分かりにくい値について、サンプルコードを掲載しながら解説していきたいと思います。

    HTML要素の表示形式を切り替えるdisplayプロパティの使い方


    HTML要素の表示形式を切り替える方法として利用される「display」プロパティの基本的な使い方をまずは理解しておきましょう。

    displayプロパティの基本構文

    CSSでdisplayプロパティを利用する際の基本構文は下記の構成となります。

    「セレクタ」でHTMLのどの要素に適用するのかを指定し、「値」で表示形式の種類を決定します。

    displayプロパティで頻繁に利用される値の種類

    displayプロパティで頻繁に利用される「値」は4種類です。

    displayプロパティの種類
    • inline
    • block
    • inline-block
    • none

    順に説明していきたいと思います。

    inline

    inlineはHTML5以前には「インライン要素」と分類されていたもので、テキストの一部としての扱いとなります。

    inline要素の後ろには改行が入らず、ブラウザ上では「横並び」に要素が表示されていきます。

    inlineがデフォルト設定になっているHTMLタグには、「span」タグや「a」タグなどが例として挙げられます。

    block

    blockはHTML5以前に「ブロック要素」と分類されていたもので、文章など1つのまとまりとして扱われます。

    block要素の後ろは改行されるため、ブラウザ上では「縦並び」に要素が表示されていきます。

    blockがデフォルト設定になっているHTMLタグには「h1~h6」タグ、「p」タグ、「ul・ol・li」タグなどが挙げられます。

    inline-block

    inline-blockは、「inline」と「block」要素の中間的な役割を担います。

    inline要素の様にブラウザ上では「横並び」に表示されますが、block要素の様に横幅や高さを設定出来るなど1つのまとまりとして扱うことが可能です。

    none

    noneは、文字通りブラウザ上から要素を非表示にしてしまう設定値です。

    Webサイト上でログインユーザーだけに特定の要素を見せたい場合や、ある条件を満たした場合に要素を表示するなどの利用方法が一般的です。

    またレスポンシブデザインでは、パソコン画面では表示するけれども、スマートフォンでは表示しないなどの要素に「display:none」を設定する利用方法も一般的です。

    ポテパンダの一言メモ

    他にもdisplayプロパティに設定出来る値はいくつか存在しますが、利用頻度は低いため、まず今回ご紹介する4種類を覚えておきましょう。

    HTMLの表示形式をdisplay:inlineに切り替えてみよう


    HTMLの表示形式がデフォルトで「block」に設定されている要素を、「inline」に切り替えてみたいと思います。

    pタグの要素をブラウザに表示する

    まずは「p」タグの要素をいくつか記述し、ブラウザで表示した場合の表示内容を確認してみましょう。

    index.html

    ブラウザで表示した結果が下記で、「p」タグはblock要素のため改行が行われ「縦並び」で表示されていることをご確認頂けます。

    pタグの要素をinlineに切り替えてブラウザに表示する

    では下記のCSSを追加してindex.htmlをブラウザで表示してみましょう。

    style.css

    サンプルをブラウザで表示した結果が下記の通りで、「inline」へ変更されたことにより「横並び」で表示されていることがご確認頂けます。

    HTMLの表示形式をdisplay:blockに切り替えてみよう


    次に、HTMLの表示形式がデフォルトで「inline」に設定されている要素を、「block」に切り替えてみたいと思います。

    spanタグの要素をブラウザに表示する

    まずは「span」タグの要素をいくつか記述し、ブラウザで表示した場合の表示内容を確認してみましょう。

    index.html

    ブラウザで表示した結果が下記の通りで、spanタグはinline要素のため「横並び」で表示されていることをご確認頂けます。

    spanタグの要素をblockに切り替えてブラウザに表示する

    では同じように、下記のCSSを追加してindex.htmlをブラウザで表示してみましょう。

    style.css

    ブラウザで表示した結果が下記の通りで、「block」要素に切り替えられたことにより「縦並び」で表示されていることをご確認頂けます。

    HTMLの表示形式をdisplay:inline-blockに切り替えてみよう


    次に、HTMLの表示形式をinline-blockに切り替えるサンプルをご紹介していきます。

    inline-block切り替え前のブラウザ表示を確認しておこう

    inline-blockへの切り替えにはblock要素の「p」タグとinline要素の「span」タグをそれぞれ用意しておきます。

    inline-blockでの挙動の違いを確認するため、それぞれの要素に枠線を指定しています。

    index.html

    style.css

    ブラウザで表示した結果が下記の通りで、block要素である「p」タグには指定した横幅と高さが適用されているのに対し、inline要素である「span」タグには適用されていないことがご確認頂けます。

    inline-boxに切り替えてブラウザ表示してみよう

    では実際に「p」タグ「span」タグを「inline-box」に切り替えてブラウザに表示するとどのような表示内容となるのか、確認していきたいと思います。

    「index.html」の内容は変更せず、「style.css」に「inline-box」へ切り替えるコードを追加しています。

    style.css

    ブラウザで表示した結果が下記の通りで、「p」タグは「inline-box」に切り替わったことにより、「横並び」に表示されています。

    また、「span」タグは「inline-box」に切り替わったことにより、横幅や高さのCSSが適用されていることをご確認頂けます。

    HTMLの表示形式をdisplay:noneに切り替えてみよう


    HTMLの要素にdisplay:noneを設定してブラウザ上から非表示にするサンプルも確認しておきましょう。

    display:noneが設定された要素だけが非表示になっていることを確認しよう

    サンプルコードではblock要素である「p」タグとinline要素である「span」タグにそれぞれ1つ「display:none」を適用するクラスを設定しています。

    index.html

    style.css

    ブラウザで表示した結果が下記の通りで、「display:none」を適用したクラスの設定された文章だけが表示されていないことをご確認頂けます。

    さいごに:HTML要素の表示形式を切り替えるdisplayプロパティを使いこなしてWebサイトのレイアウトを整えよう!


    本記事では、HTML要素の表示形式を切り替えるdisplayプロパティの基本的な使い方についてご紹介してきました。

    今回紹介した内容を上手く組み合わせることで、Webサイト上で様々なパターンのHTMLデザインを構築することが可能となります。

    基本をしっかりと理解した上で、ご自身で手を動かして様々な組み合わせを試してみてください。

    実際に各HTML要素を切り替えながらWebサイトデザインを試していくことで、displayプロパティの使い方をいち早く理解出来るようになります。



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE