CSSを勉強しているときにソースコードを見て、なんでここにdisplayプロパティを使うの？そんなことを思ったことはありませんか？
displayプロパティは様々な用途で使用されるため、HTML/CSSを学んでいる初学者にとって難しいプロパティの一種かもしれません。
そこで今回はdisplayプロパティについてサンプルコードを使いながらわかりやすく解説していきます。
（今回のゴール）displayプロパティを使いこなせるようになる！
目次
displayプロパティの使い方一覧
displayプロパティは様々な用途で利用されますが、大まかに分けると下記の4つに分けられます。
- ブロック要素やインライン要素を自由に切り替える
- 要素を非表示にできる
- Flexboxを使用するために使う
- Gridレイアウトを使用するために使う
他の使用方法もありますが、汎用的ではないのでここでは省きます。
それぞれについて詳しく解説していきます。
displayプロパティの使い方①
ブロック要素とインライン要素の切り替え display: block;/display: inline;
displayプロパティを使えば、HTMLタグでデフォルトで定まっているインライン要素やブロック要素を自由に切り替えることができます。
そもそも、ブロック要素とインライン要素とは何か？
ブロック要素とは名前の通り、一つの塊となり、横幅いっぱいに幅をとり、要素が縦方向に並ぶ要素のことです。
対してインライン要素は基本、ブロック要素の中に作成され、行の中に一部のまとまりを作ります。インライン要素は縦方向に並んでいきます。
詳しい解説はこちらの記事を参照してください。
-
-
インライン要素とブロック要素の違いを初心者向けに例を交えて完全解説
CSSで装飾を施す際になぜかうまく幅を合わせられない、余白を設定できない、といった経験はございませんか？ これにはある理由があります。 それは、HTMLのタグにはブロックレベル要素や、インライン要素と ...
続きを見る
ブロック要素とインライン要素は基本、HTMLのタグ毎にデフォルトでどちらかの要素に振り分けられています。
ただ、例えばリンク付きのボタン作るとき、aタグを使用することになりますが、aタグではインライン要素なのでwidth等が効きません。
そこで解決策として使用されるのが、このdisplayプロパティとなります。
具体的な使い方
displayプロパティを使えばHTMLタグでデフォルトで定まっているインライン要素やブロック要素を自由に切り替えられます。
下の例ではインライン要素であるaタグをブロック要素に変えてwidth等を設定しているものです。
See the Pen Untitled by kota (@kota1459) on CodePen.
上下2つのaタグの違いはdisplay: block;を入れたか否かだけです。
上のaタグはインライン要素のままなのでwidthやheightを指定しても変化がないことがわかります。
対して、下のaタグはブロック要素に変換したので、aタグにもかかわらず、widthやheightの設定ができていることが分かります。
このようにデフォルトでインライン要素に指定されているものをdisplayプロパティを使うことでブロック要素に変換することができます。
もちろんブロック要素をインライン要素にすることも可能です。
インラインブロック要素について
また、ブロック要素とインライン要素以外にインラインブロック要素というものに設定することもできます。
こちらはブロック要素とインライン要素どちらも兼ね備えた要素になっていて、インライン要素のように横並びだけど、width等の設定もできるといった要素です。
そのため、さきほどのコードはdisplay: block;の代わりにdisplay: inline-block;を指定してもwidth等の変更は可能になります。
その場合、上の2つのボタンは横並びになります。
displayプロパティの使い方②
要素を非表示にできる display: none;
これは主にJavaScriptやjQueryとの組み合わせで使われます。
普段は要素を表示しておきたいけど、ある条件下では非表示にしたい等の場合に使われます。
記述の仕方はdisplay: none; です。
具体的な使い方
下の例はdisplay: none;を使用して作成したハンバーガーメニューです。
ハンバーガーメニューとは、ブラウザにある三本線をクリックすると、メニューが出てくるといったアニメーションのことです。
詳しいコードの説明は主題から外れるため省きますが、display: none;はこのように要素を表示したり、非表示する際に使われます。
See the Pen Untitled by kota (@kota1459) on CodePen.
また、display: none;はあくまでも要素を非表示にするだけでブラウザでは読み込まれているのでページを軽くするといった効果はないことに注意してください。
displayプロパティの使い方③
Flexboxを使う際に使用する
CSS3 から新しくできた概念としてFlexboxというものがあります。
Flexboxとは、今までよりも簡単に横並びのレイアウトを実現するために導入されたものです。
このFlexboxを使うのにdisplayプロパティを必要とします。
具体的な使い方
下の例は通常縦並びになるdiv要素をdisplay: flex;を充てたことで横並びにしています。
注意点としては横並びにしたい要素の親要素にdisplayプロパティを充てることです。
例の場合は、contentクラスのdiv要素の親要素がflexクラスのdiv要素となっているため、flexクラスのdiv要素にdisplayプロパティを充てる必要があります。
See the Pen Untitled by kota (@kota1459) on CodePen.
他にもflexboxには様々なプロパティがありますが、今回の話から逸れるので紹介についてはまた別の記事で紹介します。
displayプロパティの使い方④
Gridレイアウトを使う際に使用する
Gridレイアウトとは、今までより直感的にレイアウトを組むことができる新しいプロパティです。
使いこなせれば視覚的にレイアウトを組むことも可能で、とても便利なプロパティです。
使い方はdisplay: grid;です。
具体的な使い方
下記はGridレイアウトを使って聖杯レイアウトを作ったものです。
聖杯レイアウトとは、上にヘッダーを全幅で設置し、真ん中を3カラムにし、下にフッターを全幅で設置するレイアウトのことです。
See the Pen Untitled by kota (@kota1459) on CodePen.
このコードの着目してほしい点は、CSSのcontainerクラスに記載してあるgrid-template-areasプロパティです。
まず全体を3列に分割し、上段はすべてheaderにしたいので、headerを3つ記載します。
中段はnav、main、asideの3つを記載する必要があるため、その順番で記載しています。
そして、下段にはfooterを全幅で設置したいので、footerを3つ記述しています。
そうすることでresult画面のようにレイアウトを区切ることができます。
このように視覚的な記述ができるというのがGridレイアウトの強みの1つです。
具体的な紹介はまた別の記事で紹介します。
今回はGridレイアウトもdisplayプロパティを使って呼び起こすことができることを紹介しました。
まとめ
今回はdisplayプロパティについて紹介しました。
様々な用途で使用されるので一度に覚えるのは大変かもしれません。
今回、FlexboxやGridレイアウトについても紹介しましたが、
これらは別記事で詳しく解説しますので、詳しく知りたい方はそちらを参照していただければと思います。
最後までご覧いただき、ありがとうございました。
当サイトではフリーランスを目指す人のためのプログラミング教材の作成を心掛けてサイト運営を努めております。
別途、動画も出す予定で、そちらでは初心者向けに一からコーディングの解説を行っておりますので、
興味があればご覧いただければと思います。
【クレジット】
VOICEVOX：ずんだもん
立ち絵素材：ヒザフライ様
VOICEVOX：春日部つむぎ
立ち絵素材：ヒザフライ様
