VIDEO LESSON

CSSのdisplayを図解：block・inline・flex・gridなどの表示の違いと実例の解説動画

再生時間 7:44動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:01シーエスエス、リファレンス解説です。
0:04今回のテーマは、ディスプレイです。
0:07このプロパティは、レイアウトを考えるときの入口になる、とても大切な設定です。
0:13ポイントは二つに分けて考えることです。
0:16一つ目は外側、つまりその要素自身が前後の要素とどう並ぶかです。
0:22二つ目は内側、つまりその要素の中にある子要素をどう配置するかです。
0:27たとえばフレックスという値は、外側はブロックとして改行し、内側はフレックスボックスで子を並べます。
0:36この外と内の区別が分かると、たくさんの値を整理して覚えられます。
0:41まず基本の書き方です。
0:43スライドのように、対象のクラスにディスプレイと値を書くだけで、表示の方式が切り替わります。
0:49仕様上の初期値はインラインで、通常は親から子へ継承しません。
0:53では、なぜディブ要素は最初からブロックのように見えるのでしょうか。
0:57それはブラウザーが用意している既定のスタイルシートが、要素ごとに表示方式を決めているからです。
1:03仕様の初期値と、タグごとの既定の見え方は別物として区別しましょう。
1:08この違いを知っておくと、スパンとディブで結果が違う理由も納得できます。
1:13最も基本の二つを比べます。
1:15ブロックは前後で改行する箱で、幅と高さの指定がそのまま効きます。
1:20幅を指定しなければ、使える横幅いっぱいに広がるのが通常です。
1:25一方、インラインは文章の行の中に参加する表示です。
1:30前後の文字と同じ行に並び、内容が長ければ行をまたいで折り返します。
1:35注意点は、通常のスパンなどのインライン要素では、幅と高さを指定しても箱の大きさを固定できないことです。
1:44上下の余白の効き方もブロックとは違うため、大きさを持たせたい場合は次のインラインブロックが候補になります。
1:53インラインブロックは、ブロックとインラインの良いところを組み合わせたような値です。
2:00要素自身は前後の内容と同じ行に参加しますが、ブロックと同じように幅と高さを指定できます。
2:07そのため、ボタンやラベル、バッジのような、小さくて大きさのある部品を作るときによく使われます。
2:15知っておきたい注意点も二つあります。
2:18一つは、エイチティーエムエルの改行や空白が、箱と箱の間のすき間として見えることがあることです。
2:26もう一つは、縦方向の揃え方がバーティカルアラインの影響を受けることです。
2:32並びがずれたら、まずこの指定を確認しましょう。
2:36次はフレックスです。
2:38ディスプレイ、フレックスを指定した要素は、外側ではブロックとして前後で改行し、
2:43内側では直接の子がフレックスアイテムになって並びます。
2:48既定では横方向に並び、フレックスディレクションをカラムにすれば縦方向にもできます。
2:54ギャップで間隔を空けたり、アラインアイテムズで縦の揃え方を変えたりするのが基本です。
3:00対になるのがインラインフレックスで、内側の並べ方はまったく同じです。
3:05違うのは外側だけで、要素自身が文章の行に参加します。
3:09アイコンと文字をまとめた小さなラベルなど、行の中に置きたいときに便利です。
3:15グリッドは、行と列の両方をそろえたいときのレイアウトです。
3:19ディスプレイ、グリッドを指定すると、外側はブロックとして扱われ、内側にグリッドの配置が作られます。
3:27ここで大切なのは、グリッドと書いただけでは自動で三列になるわけではない、
3:30ということです。
3:33列の作り方は、グリッドテンプレートカラムズなどで別に指定します。
3:38フレックスとの違いは、複数の行で同じ列幅を共有できる点で、カード一覧や画面全体の区画をきれいにそろえるのに向きます。
3:47インライングリッドは、そのグリッドの箱自体が文章の行に参加する版で、小さな表のような部品を行の中に置きたいときに使えます。
3:57消し方に関わる二つの値を比べます。
4:00ノンは、要素とその子をすべて表示せず、占めていた場所もなくなって前後が詰まります。
4:07ドムから要素自体が消えるわけではないので、ジャバスクリプトで再表示もできます。
4:14もう一つのコンテンツは正反対に近く、要素自身の背景や枠線といった箱だけがなくなり、
4:19中の子要素は残って周囲のレイアウトに参加します。
4:25ただし、意味を持つ要素やフォーム部品に安易に使うと、支援技術での役割が失われる場合があるため注意が必要です。
4:35前回学んだビジビリティやオパシティとは目的が違うので、見た目だけで置き換えないようにしましょう。
4:43少し特殊な値もまとめて紹介します。
4:46フロウルートは、新しいブロック整形コンテキストを作る値です。
4:52フロートした画像を親の高さにきちんと含めたいときや、親子の余白の相殺を区切りたいときに役立ちます。
5:00子を横並びにする値ではない点に注意してください。
5:05リストアイテムは、項目の箱に加えて先頭の点や番号といったマーカーも作ります。
5:12テーブル系には、行を表すテーブルロウ、セルを表すテーブルセルなど、表の部品に対応する値がそろっています。
5:21ただし、データの表は見た目ではなくエイチティーエムエルのテーブル要素で作るのが原則です。
5:29ディスプレイには、外側と内側を二つの言葉で明示する書き方もあります。
5:34たとえば、ブロック、フレックスと書けばフレックスと同じ組み合わせを意味し、
5:40インライン、グリッドと書けばインライングリッドに対応します。
5:46理屈が分かりやすい反面、ブラウザーの対応が始まった時期は構文によって違うため、
5:50使う前に確認が必要です。
5:54実例で試すときは、ステージという親の中に、前、対象、あと、という並びと、
6:01エー、ビー、シーという三つの子を用意し、対象のディスプレイの値だけを切り替えるのがおすすめです。
6:08前後の改行、箱の幅と高さ、子の並び方を順番に観察すると違いがはっきりします。
6:14効かないと感じたときの確認ポイントです。
6:17最も多い勘違いは、フレックスやグリッドを、並べたい要素自身ではなく、その親に書くべき場面で、
6:22子側に書いてしまうことです。
6:26並べたいのが三つのカードなら、指定先はカードを包む親要素です。
6:31また、要素がすでにフレックスやグリッドのアイテムになっている場合、外側の表示の扱いが通常の流れとは変わることがあります。
6:40困ったら開発者ツールを開き、親と子の両方について、計算済みのディスプレイの値を確認してください。
6:47あわせて、見た目の並び順を変えても、読み上げやキーボードの順序はドムの順序のままである点も忘れないようにしましょう。
6:55最後に互換性とまとめです。
6:57ディスプレイ自体は、クローム一以降、エッジ十二以降、ファイアフォックス一以降、
7:03サファリ一以降と、古くから広く対応しています。
7:08ただし値ごとに差があり、フレックスはクローム二十九以降、グリッドはクローム五十七以降が目安です。
7:16新しい値や二キーワード表記を使うときは、その値まで含めて確認しましょう。
7:22まとめます。
7:23ディスプレイは外側の並び方と内側の配置を決める設定で、ブロック、インライン、
7:28フレックス、グリッドが中心でした。
7:32練習として、実例の値だけを一つずつ切り替え、改行、寸法、子の並びの三点がどう変わるかを自分の言葉で説明してみてください。
7:43お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

displayのblock・inline・inline-block・flex・grid・none・contentsなどを図と13種類の比較サンプルで解説。外側と内側の配置、幅・高さ、flow-rootや表の違いも確認できます。

解説記事・サンプルコードを読む：CSSのdisplayを図解：block・inline・flex・gridなどの表示の違いと実例 →