【CSS】displayプロパティの使い方について
このまま学習を続けて、本当に実務で通用するのか不安な方へ。
そんな方に向けて、実務で “通用する人としない人の違い” をまとめた無料メール講座を用意しました。
さらに、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
CSSのdisplayプロパティの使い方について解説していきます。
サイト制作において、displayプロパティは非常によく使われる重要なプロパティです。今回はdisplayプロパティの中でも実務でよく使用するものを中心に詳しく解説していきます。
目次
1. displayプロパティとは？
displayプロパティとは、要素の表示方法を指定するためのプロパティです。
このプロパティを使用することで、要素の振る舞いを制御することができます。
よく使われるdisplayプロパティの値は下記の通りです。
2. inline
要素は横に並び、横幅や高さは指定できません。主に、文章の一部として使用されます。
■タグ例（初期値がinlineの主なタグ）
a、img、span等
■特徴
- 要素は横に並ぶ
- widthとheightが指定できない
- paddingとmarginは左右のみ指定できる（※paddingは上下の指定ができるが、正しく適用されないため非推奨）
■配置イメージ
3. inline-block
inlineと同じく要素は横に並び且つ、横幅、高さ、余白の調整が可能です。inlineの要素に対してレイアウト調整を行いたい場合等に使用します。
■タグ例（初期値がinline-blockの主なタグ）
※無し
■特徴
- 要素は横に並ぶ
- widthとheightが指定できる
- paddingとmarginが指定できる
■配置イメージ
4. block
要素は縦に並び、横幅、高さ、余白の調整が可能です。inlineの要素を縦に並べたい場合等に使用します。
■タグ例（初期値がblockの主なタグ）
div、p、h1～（見出しタグ）等
■特徴
- 要素は縦に並ぶ
- widthとheightが指定できる
- paddingとmarginが指定できる
■配置イメージ
5. flex（Flexbox：フレックスボックス）
フレックスボックスは、主に要素を横に並べる際に使用します。
「inline」「inline-block」と比べて並び方や折り返し方の設定方法が幅広く用意されているので、要素を横並びにする際はフレックスボックスがよく使用されます。
フレックスボックスの詳細については、「【CSS】Flexbox（フレックスボックス）の使い方について」をご参照ください。
6. Grid（グリッド）
グリッドレイアウトとは、格子状のマス目を使ってレイアウトを組み立てていく手法のことを言います。要素を行と列のグリッド状に配置することができ、複雑なレイアウトの作成も可能です。
グリッドレイアウトの詳細については、「【CSS】Grid（グリッドレイアウト）の使い方について」をご参照ください。
7. none
displayプロパティに「none」を指定すると、要素が非表示になります。
例えば、下記のように要素の表示と非表示を切り替えたりする際に使用します。
- PCの場合は表示してスマートフォンの場合は表示しない
- 最初は表示されていない要素をボタンを押したタイミングで表示する
8. まとめ
CSSのdisplayプロパティの使い方について解説してきました。
今回、ご紹介した下記の6つの値は、仕事でもよく使うものばかりです。
各値の挙動をしっかりと理解して、コーディング時には適切な値を使いこなせるようにしておきましょう！
あなたのコーディング力、実務で通用しますか？
以下のようなお悩みに1つでも当てはまる場合、無料のメール講座をお受け取りください。
- 模写はできるようになってきたけど、実務に通用するか不安
- ポートフォリオに悩んでいる・載せる実績がない
- 案件に挑戦したいけど、自信がなくて一歩踏み出せない
今登録すると、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
コーディングを仕事にしていきたい方へ
Codejump Proでは、実際の案件をモデルにした仮想案件で実務レベルのスキルと経験を身につけていきます。
- ポートフォリオに載せる実績がない・・・
- 実務経験がゼロ・・・
- 案件獲得に不安がある・・・
1つでも当てはまる場合は、今すぐ実務レベルの案件をスタートしてみてください。
現場レベルのスキルを身につけたい方へ
現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』（出版社：技術評論社）がおすすめです。
本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。
- 第1章【入門編】プロフィールサイト〜フレックスボックス
- 第2章【初級編】ブランドサイト〜ポジション
- 第3章【中級編】サービスサイト〜複数ページ
- 第4章【上級編】カフェサイト〜複数レイアウト
- 第5章【応用編】ランディングページ〜動きのあるWebサイト
- 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作
現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。
