HTML要素の表示形式を変更するCSSのメソッドdisplayの使い方を紹介

HTMLを表示には表示形式があります。表示形式はCSSのdisplayというメソッドを使用して指定することができます。displayを使えば、子要素を均等に横並びにしたり、要素を隠しておくことができます。

displayはデバイスごとのレイアウトを整えたり、動的なWebサイトにする上で便利なメソッドです。例えば、ボタンをクリックしたら要素が出てくるようにしたい場合は、出したい要素を最初にdisplayを使って要素を非表示にしておく必要があります。

本記事では、displayを使ってHTML要素の表示形式を変更する方法を紹介します。また、HTMLの表示形式を理解するために、ブロック要素とインライン要素についても解説します。

displayとは

displayはHTMLの要素の表示形式を変更するためのCSSのメソッドです。HTMLの表示形式はWebページのレイアウトを整えるために重要です。例えば、縦に並んでいる画像や要素を横並びにしたり、指定した要素を非表示にさせたりすることができます。

HTMLの要素はブロック要素とインライン要素に分けることができます。ブロック要素とインライン要素の違いはレイアウトを調整する上で理解しておく必要があります。なお、要素の形式はdisplayメソッドで指定することができます。

ブロック要素とインライン要素

ブロック要素とは

ブロック要素とは見出し、表などの文書を1つのかたまり（ブロック）として構成されています。ブロックレベル要素と言われることもあります。Webページ内にタグによって指定された役割を持った四角い箱があるイメージです。

子要素は親要素の箱の中に入り、兄弟要素はコードの順に上から縦に並べられていきます。ブロック要素は幅、高さの指定が可能です。また、並列されたブロック要素は改行が入るため、兄弟要素は縦に並びます。また、余白も自由に指定することができます。

デフォルトがブロック要素のタグの例は以下の通りです。

<div>、<h1>～<h6>、<p>、<form>、<table>、<ul>

インライン要素とは

インライン要素とはブロック要素の中で内容の一部として扱われる要素です。テキストと同じような扱いで、インライン要素を持つタグに囲まれた文字に対して役割を持たせたり、文字サイズを変化させたりします。

インライン要素はブロック内での位置を指定するためのtext-alignやvartical-alignが使えます。

インライン要素は縦横のサイズがタグに囲まれた内容に決められます。そのため、サイズを指定することができません。また、ブロック要素と違いインライン要素には改行が入りません。また、余白は上下に特殊なサイズで付き、指定することができません。

デフォルトでインライン要素となっているタグは以下の通りです。

<a>、<strong>、<big>、<small>、<q>、<span>、<img>、<input>、<textarea>、<select>

inline-blockとは

inline-blockとはインライン要素に縦横のサイズを指定できるようにした要素です。ただしｍインライン要素がベースになっているので、改行はされません。inline-blockはボックスをクリックするとリンク先へ飛ぶようにしたいときなどに使います。

この際はaタグをdisplayでinline-blockとし、リンクの範囲をボックスとして、文字のエリア以外の部分をクリックしてもリンク先へ飛ぶようにします。使う機会は多いと思うので、覚えておくことをおすすめします。

ブロック要素とインライン要素のまとめ

ブロック要素とインライン要素の違いを以下の表にまとめます。違いを理解して、必要に応じてinline-blockを使うようにします。

	役割	サイズの指定	余白の指定	改行	text-align
ブロック要素	1つの文書	可	可	あり	指定不可
インライン要素	文書の一部	不可	paddingは可marginは不可	なし	指定可

displayの使い方

block

blockは指定した要素をブロック要素として表示するための値です。元々ブロック要素の物には効果がありませんが、インライン要素をブロック要素にするために使われます。blockを使うと改行が入るので、レイアウトには気をつけてください。

レスポンシブ対応のサイトを作るときに、ハンバーガーメニューなどのアイコンを使うときに使用します。PCなどの大きな画面では非表示にしておき、画面が小さくなると表示させるようにする際に、display:blockを使います。

また、非表示にしていたものを表示する際に、jQueryのコードとして使うことも多いです。

inline

ブロック要素をインライン要素にする際に使われる値です。ブロック要素をインライン要素にすることは多くはありません。pタグの文章などをブロック内で中央揃えにしたい

場合などに使えます。しかし、margin:0 autoで中央揃えが可能なため、使う機会は少ないと思います。

機能としてあるということだけ覚えておけば十分だと思います。

inline-block

inline-blockにするためにはinline-blockという値を設定します。inline-blockにするとインライン要素の改行無しやtext-alignの指定を保ったまま、インライン要素ではできない高さや幅、余白の指定ができるようになります。

使われる場面としてはリンクのクリック範囲を広げるときに使われます。aタグはインライン要素のため、文字の上をクリックしなければリンク先に飛びません。しかし、狭すぎるとクリックしにくく、ユーザーにとって不便です。

そのため、inline-blockを使ってサイズや余白を指定して、クリックできる範囲を広げます。

none

noneは指定した要素を非表示にするための値です。HTML/CSSだけの静的なサイトではレスポンシブ対応にするときに画面が小さくなった時にハンバーガーメニューにする際に、メニューバーを非表示にするために使います。

他にもjQueryの処理として、イベント処理で表示させる要素に対して、初期設定としてdisplay:noneにしておきます。

flex

flexはブロック要素を横並びにするための値です。横並びにした要素の親要素にdisplay:flexを指定すると兄弟要素が横並びになります。widthや余白の指定方法次第では均等に全ての要素を一列または複数列に並べることができます。

横並びにする方法として従来float:leftが使われていました。しかし、floatはレイアウト崩れを起こしやすい、幅に対して均等に要素を並べるのが困難という問題点があります。しかし、flexを使えばレイアウト崩れも少なく、きれいな横並びが可能です。

displayの使いどころ

ブロック要素をきれいに横並びにする

displayの使いどころはflexを使って幅いっぱいに均等に要素を並べることです。画像や並列させたい説明文などのブロック要素を幅いっぱいに横並びにする際はflexを使うと便利です。

jQueryで後から表示させる

動的なWebサイトでクリックなどのイベント処理で表示非表示をさせるならばdisplayを使うことは必須です。最初に非表示にさせておいて、イベントが発生したら表示させるにはdisplay:noneが必要です。

特に、昨今はスマホやタブレットが普及しており、狭い画面に多くの情報を載せる必要があります。見出しだけを並べて、クリックなどの処理で表示させるようにすれば、必要な情報をすぐに見つけられるため、ユーザーに優しいサイトになります。

表示非表示の切り替えができないと縦に長いサイトになります。縦に長すぎるとユーザーにとって情報がすぐ見つからない可能性が高くなります。特にスキマ時間で閲覧されているケースが多いので、時間がかかると間に合わないと思われ、少しも見てもらえない可能性もあります。

レスポンシブ対応

レスポンシブ対応にするためにもdisplayを使う必要があります。PC画面のメニューバーをスマホ画面のためにハンバーガーメニューにするような場面で使います。PC画面ではアイコンを隠しておき、メニューバーを表示させます。反対にスマホ画面ではハンバーガーメニューを表示させて、メニューバーを非表示にします。

まとめ

Webページのレイアウトを整える上で、displayメソッドは重要です。なぜなら、HTMLではブロック要素かインライン要素かによって表示形式が変わります。また、ブロック要素とインライン要素でCSSが有効になるメソッドが異なります。

他にもdisplayはjQueryの機能でイベント処理によって、文章や画像を表示させる場合やWebサイトをレスポンシブ対応にする際にも使われます。スマホやタブレットに対応させるためにもdisplayは重要なメソッドです。

Webページのレイアウトや機能を有効に使うためにも、displayを用途に応じて使えるようになることをおすすめします。