CSSのdisplayとは？横並びの仕組みを初心者向けに解説【100日チャレンジDAY012】 -

3児の子育てをしながら、未経験からWeb制作を勉強しているgrillon designです。

今回の100日チャレンジでは、CSSの「display」について勉強しました。

Web制作を勉強していると、

「この要素、なんで縦に並ぶんだろう？」

「横並びにしたいのに、うまくいかない……」

ということがあります。

私も最初は、横並びにしたいときは「flexを使えばいいのかな？」くらいに考えていました。

でも今回勉強してみて、

横並びにする方法は1つではない

ということが分かりました。

今回は、3児ママの私が実際にコードを書きながら、CSSのdisplayについて初心者なりにまとめてみます。

今回の100日チャレンジで勉強したこと
CSSのdisplayとは？
blockとは？基本的に縦に並ぶ表示
inlineとは？文章のように横へ並ぶ
inline-blockとは？横並び＋サイズ調整ができる
横並びにする方法は1つじゃなかった！
今回はdisplay:flexを実際に使ってみた
1. 📷 写真①：display:flexを入れる前
2. 📷 写真②：display:flexを入れた後
実際に書いたCSSを見てみる
1. 📷 写真③：実際に書いたCSS
gapを使って項目の間にすき間を作る
liをカードのように整えてみた
1. 📷 写真④：完成した「できること」部分
「横並びにならない」ときに確認したいこと
1. ① display:flexをどの要素に指定しているか
2. ② CSSが正しく読み込まれているか
HTMLとCSSを一緒に考えるとdisplayも分かりやすい
CSSのdisplayについて今回分かったこと
3児ママがdisplayを勉強してみた感想
まとめ｜displayは「要素の並び方」を考えると分かりやすい
100日チャレンジの続きはこちら

今回の100日チャレンジで勉強したこと

今回勉強したのは、CSSの「display」です。

block
inline
inline-block
flex

それぞれの違いを知り、実際にHTMLとCSSを書いて表示の変化を確認しました。

前回は、CSSで画像のサイズ変更や画像を丸くする方法について勉強しました。

今回は、画像ではなく「要素の並び方」に注目して勉強していきます。

CSSのdisplayとは？

まず「displayって何？」というところから勉強しました。

displayは、要素をどのように表示・配置するかを決めるCSSプロパティです。

HTMLでは、見出しや文章、リンク、リストなど、いろいろな要素を使います。

それらの要素が、

縦に並ぶ
横に並ぶ
幅や高さを指定できる
ほかの要素とどのように並ぶ

といった表示のされ方に関係するのがdisplayです。

最初は少し難しく感じましたが、

「displayは、HTMLの要素の並び方に関係しているんだ」

と考えると、少し分かりやすくなりました。

blockとは？基本的に縦に並ぶ表示

まず勉強したのが「block」です。

block要素は、基本的に縦に並んで表示されるのが特徴です。

例えば、

<h2>プロフィール</h2>
<p>Web制作を勉強しています。</p>

このような見出しや段落などは、基本的に縦方向に並んでいきます。

イメージとしては、

プロフィール

Web制作を勉強しています。

という感じです。

普段ブログを書いているときは、見出しや文章が縦に並ぶことを当たり前のように感じています。

でも、それもHTMLの要素が持っている表示の特徴なんだと知りました。

inlineとは？文章のように横へ並ぶ

次に「inline」です。

inlineは、文章のように横へ並んで表示されるのが特徴です。

例えば、HTMLのaタグなどがあります。

今回作ったページでも、ナビゲーション部分にリンクを使っています。

<nav>
  <a href="#profile">プロフィール</a>
  <a href="#skill">できること</a>
  <a href="#blog">ブログ</a>
</nav>

このようなリンクは、基本的に横方向に並びます。

プロフィール　できること　ブログ

「横並びにするためにCSSを書いたのかな？」

と思っていたのですが、inline要素はもともと横に並ぶ性質があると知りました。

inline-blockとは？横並び＋サイズ調整ができる

続いて「inline-block」です。

inline-blockは、

横並びにしながら、widthやheightなども指定できる

という特徴があります。

inlineとblockの両方の特徴を持っている、と考えると分かりやすいです。

ざっくり整理すると、

block → 基本的に縦に並ぶ
inline → 横に並ぶ
inline-block → 横に並びながらサイズも調整しやすい

という違いがあります。

最初から全部を完璧に覚えようとすると難しいので、私はまずこのくらいのイメージで覚えることにしました。

横並びにする方法は1つじゃなかった！

今回勉強していて、私が「なるほど！」と思ったのがここです。

横並びにする方法は1つではありません。

例えば、

inline
inline-block
flex
grid

など、目的に合わせていろいろな方法があります。

最初の頃の私は、

「横並びにしたいならflex！」

くらいに思っていました。

でも、実際には要素の種類や作りたいレイアウトによって使い分けます。

グリヨン

えっ、横並びにする方法って1つじゃないの？
最初はflexだけ覚えればいいと思ってた！

Web制作を勉強していると、「これを使えばOK」というものだけではなく、いろいろな方法があることに気づきます。

だからこそ、少しずつ違いを覚えていきたいと思いました。

今回はdisplay:flexを実際に使ってみた

今回の練習では、「できること」のリストを横並びにしてみました。

もともとのHTMLは、

<ul class="skill-list">
  <li>ホームページ作成</li>
  <li>WordPress</li>
  <li>HTML・CSS</li>
</ul>

です。

CSSを何も設定していない状態では、リストは縦に並びます。

📷 写真①：display:flexを入れる前

display:flexを設定する前は、リストが縦に並んでいました。

「これを横並びにしたい！」

ということで、CSSを追加してみました。

📷 写真②：display:flexを入れた後

display:flexを追加すると、リストが横並びになりました。

実際に表示を見てみると、

「本当に横並びになった！」

と変化が分かりやすかったです。

グリヨン

本当に横並びになった！
「display: flex」ってこういうことなんだ！

こうやって自分でコードを書いて、表示が変わるところを見ると、少しずつ理解しやすくなります。

実際に書いたCSSを見てみる

今回、実際に書いたCSSはこちらです。

.skill-list {
  display: flex;
  gap: 20px;
  padding: 0;
  list-style: none;
}

.skill-list li {
  flex: 1;
  padding: 20px;
  border: 1px solid #ccc;
  text-align: center;
}

この中でも今回特に覚えたかったのが、

display: flex;

です。

display: flexを指定することで、親要素の中にあるリスト項目を横方向に並べることができます。

📷 写真③：実際に書いたCSS

実際に書いたdisplay:flexのCSS。gapなども追加して整えました。

コードだけを見るよりも、実際の画面と一緒に見ると、

「このCSSを書いたから、この表示になったんだ」

と理解しやすくなりました。

gapを使って項目の間にすき間を作る

今回、横並びにするだけではなく、項目と項目の間にもすき間を作りました。

そのために使ったのが、

gap: 20px;

です。

これを入れることで、リスト同士の間に20pxのすき間ができます。

ホームページ作成　　WordPress　　HTML・CSS

というように、詰まりすぎず見やすくなりました。

liをカードのように整えてみた

さらに、それぞれのliにもCSSを追加しました。

.skill-list li {
  flex: 1;
  padding: 20px;
  border: 1px solid #ccc;
  text-align: center;
}

ここでは、

flex: 1 → 横幅を均等にする
padding → 内側に余白を作る
border → 枠線をつける
text-align → 文字を中央にする

という設定をしています。

最初は「横並びにする」という目的だけでしたが、少しCSSを追加するだけで、見た目も整えることができました。

📷 写真④：完成した「できること」部分

display:flexとgapなどを使って、3つの項目を横並びにしました。

BeforeとAfterを比べてみると、変化が分かりやすいです。

Before

縦に並んでいた

↓

After

3つの項目が横並びになった

こうやって実際の変化を確認できると、CSSの役割が少しずつ分かってきます。

「横並びにならない」ときに確認したいこと

Web制作をしていると、

「display:flexを書いたのに、思ったようにならない！」

ということもあります。

そんなときは、まず次のようなところを確認してみようと思いました。

① display:flexをどの要素に指定しているか

Flexboxでは、基本的に横並びにしたい要素を囲んでいる親要素にdisplay: flexを指定します。

今回なら、

<ul class="skill-list">
  <li>ホームページ作成</li>
  <li>WordPress</li>
  <li>HTML・CSS</li>
</ul>

なので、

.skill-list {
  display: flex;
}

としました。

親要素にdisplay:flexを指定する

というのは、今回覚えておきたいポイントのひとつです。

② CSSが正しく読み込まれているか

CSSを書いたのに変化しない場合は、

CSSの書き方が間違っていないか
クラス名がHTMLと合っているか
CSSファイルが正しく読み込まれているか

なども確認します。

私もまだ勉強中なので、「なんで変わらないんだろう？」と思ったら、一つずつ確認するようにしています。

HTMLとCSSを一緒に考えるとdisplayも分かりやすい

今回displayについて勉強してみて、HTMLとCSSを別々に考えるより、

HTMLで「何を作るか」→ CSSで「どう見せるか」

と考えると少し分かりやすいと感じました。

例えば今回なら、

HTML：

<ul class="skill-list">
  <li>ホームページ作成</li>
  <li>WordPress</li>
  <li>HTML・CSS</li>
</ul>

CSS：

.skill-list {
  display: flex;
}

という組み合わせです。

HTMLだけでは縦に並んでいたものに、CSSでdisplay: flexを指定することで横並びにしました。

HTMLとCSSの役割については、以前の記事でも初心者向けにまとめています。

CSSのdisplayについて今回分かったこと

今回勉強した内容を、簡単にまとめてみました。

display	特徴
block	基本的に縦に並ぶ
inline	横に並ぶ
inline-block	横並び＋サイズ調整がしやすい
flex	子要素を柔軟に横並びなどにできる

最初から全部を完璧に覚えるのではなく、

「こういう違いがあるんだ」

と知っておくことから始めました。