表示プロパティを掘り下げる：表示の2つの値

フレックスまたはグリッドレイアウトは、 display: flexまたはdisplay: gridを宣言することから始まります。 これらのレイアウトメソッドは、CSS displayプロパティの値です。 このプロパティについては、 flexやgridの値に集中するのではなく、あまり話さない傾向がありますが、 displayとその定義方法について理解しておくと、使用するときに生活がはるかに楽になる興味深いことがいくつかあります。レイアウト用のCSS。

この記事では、短いシリーズの最初の記事で、 displayの値がレベル3仕様で定義されている方法を見ていきます。 これは、以前のバージョンのCSSでdisplayを定義した方法に対する変更です。 長年CSSをやっている私たちにとっては、最初は珍しいように思えるかもしれませんが、これらの変更は、要素のdisplayの値を変更したときに何が起こっているのかを説明するのに本当に役立つと思います。

ブロックおよびインライン要素

CSSを初めて使用する人に最初に教えることの1つは、ブロック要素とインライン要素の概念です。 ページ上のいくつかの要素がdisplay: blockであり、このために特定の機能があることを説明します。 それらはインライン方向に伸び、利用可能な限り多くのスペースを占有します。 彼らは新しい行に割り込む。 それらに幅、高さ、マージン、およびパディングを与えることができ、これらのプロパティはページ上の他の要素をそれらから遠ざけます。

また、いくつかの要素がdisplay: inline 。 インライン要素は、文中の単語のようなものです。 それらは改行せず、代わりにそれらの間に空白の文字を予約します。 余白とパディングを追加すると、これは表示されますが、他の要素が押し出されることはありません。

ブロック要素とインライン要素の動作はCSSの基本であり、適切にマークアップされたHTMLドキュメントはデフォルトで読み取り可能です。 このレイアウトは、「ブロックおよびインラインレイアウト」または「通常のフロー」と呼ばれます。これは、要素に対して他に何もしなかった場合に要素がレイアウトされる方法であるためです。

displayの内側と外側の値

ブロック要素とインライン要素は理解していますが、アイテムをdisplay: grid ？ これは完全に違うものですか？ display: gridを指定したコンポーネントを見ると、レイアウトの親要素に関しては、 block level要素のように動作します。 要素は伸びて、インラインディメンションで使用可能な限り多くのスペースを占有し、新しい行から開始します。 レイアウトの他の部分と一緒に動作するという点では、 block要素と同じように動作します。 display: blockしますか？

私たちが持っていることがわかります。 Display仕様のレベル3では、 displayの値は2つのキーワードとして定義されています。 これらのキーワードは、表示の外側の値を定義します。これは、 inlineまたはblockになり、したがって、要素が他の要素と一緒にレイアウトでどのように動作するかを定義します。 また、要素の内部値、つまりその要素の直接の子がどのように動作するかを定義します。

つまり、 display: gridと言うとき、実際に言っているのはdisplay: block gridです。 ブロックレベルのグリッドコンテナを求めています。 すべてのブロック属性を持つ要素—高さと幅、マージンとパディングを指定でき、コンテナを満たすために伸びます。 ただし、そのコンテナの子にはグリ​​ッドの内部値が与えられているため、 gridアイテムになります。 これらのグリッドアイテムの動作はCSSグリッド仕様で定義されています。 display仕様は、これが使用するレイアウト方法であることをブラウザーに通知する方法を提供します。

displayについてのこの考え方は非常に役立つと思います。 さまざまなレイアウト方法で何をしているのかを直接説明しています。 display: inline flexを指定する場合、何を期待しますか？ うまくいけば、フレックスアイテムである子を持つインライン要素として動作するボックス。

この新しい方法でのdisplayについて考えることで、他にもいくつかのことがきちんと説明されています。この記事の残りの部分で、これらのいくつかを見ていきます。

私たちは常に通常の流れに戻っています

これらの内側と外側の表示プロパティについて考えるとき、表示の値をまったくいじらないとどうなるかを考えると役立つ場合があります。 HTMLを記述してブラウザで表示すると、ブロックおよびインラインレイアウト、つまり通常のフローが得られます。 要素は、 block要素またはinline要素として表示されます。

以下の例には、 divをdisplay: flex （2つの直接の子）がflexアイテムになり、画像がコンテンツと並んでいます。 ただし、コンテンツに表示されている場合は、通常のフローで再び表示されている見出しと段落があります。 メディアオブジェクトの直接の子はフレックスアイテムになりました。 フレックスアイテムの表示値を変更しない限り、子は通常のフローに戻ります。 フレックスコンテナ自体はブロックボックスであり、境界線がその親の端まで伸びていることがわかります。

このプロセスで作業する場合、ページ上の要素が、それと戦い、すべてを配置しようとするのではなく、この読みやすい通常のフローレイアウトでレイアウトされるという事実は、CSSの方がはるかに簡単です。 また、ドキュメントの順序を操作しているため、アクセシビリティの問題に陥る可能性も低くなります。これは、スクリーンリーダーやドキュメントをタブで移動する人が行っていることとまったく同じです。

flow-rootとinline-blockの説明

inline-blockの価値は、CSSをしばらくやっている私たちの多くにもよく知られているようです。 この値は、 inline要素のブロック動作の一部を取得する方法です。 たとえば、 inline-block要素は幅と高さを持つことができます。 display: inline-blockを持つ要素も、 Bロック形式のコンテンツ（ BFC ）を作成するという点で興味深い動作をします。

BFCは、レイアウトに関していくつかの便利なことを行います。たとえば、フロートが含まれています。 ブロックフォーマットコンテキストの詳細については、以前の記事「CSSレイアウトとブロックフォーマットコンテキストについて」を参照してください。 したがって、 display: inline-blockと言うと、BFCを確立するインラインボックスが表示されます。

ご存知のとおり（ブロックフォーマットコンテキストに関する上記の記事を読んだ場合）、BFCを明示的に作成する新しい値のdisplayがあります。 これはflow-rootの値です。 この値は、インライン要素ではなく、ブロック上にBFCを作成します。

• display: inline-blockは、インラインボックスにBFCを提供します。
• display: flow-rootは、ブロックボックスにBFCを提供します。

あなたはおそらくそれが少し混乱していると思っているでしょう：なぜここに2つの完全に異なるキーワードがあるのですか、そして前に話していた2つの値の構文はどうなりましたか？ これは、 displayについて説明する必要がある次のこと、つまり、CSSにはdisplayプロパティの観点から処理する必要のある履歴があるという事実にきちんとつながります。

表示のレガシー値

CSS2仕様では、 displayプロパティの次の値について詳しく説明しています。

• inline
• block
• inline-block
• list-item
• none
• table
• inline-table

また、この記事では扱っていないtable-cellなどのさまざまなテーブル内部プロパティも定義されています。

次に、フレックスとグリッドレイアウトをサポートするために、これらの表示用の値をいくつか追加しました。

• grid
• inline-grid
• flex
• inline-flex

注：この仕様では、Ruby仕様で読むことができるRubyテキストをサポートするためにrubyとinline-rubyも定義しています。

これらはすべてdisplayプロパティの単一の値であり、CSSレイアウトをこのように説明するために仕様が更新される前に定義されています。 CSSについて非常に重要なことは、Webを壊すことを回避しないという事実です。 単純に物事を変えることはできません。 誰もがこの新しい2値構文を使用する必要があると突然判断することはできません。したがって、開発者が戻って修正しない限り、単一値構文を使用して構築されたすべてのWebサイトは機能しなくなります。

この問題を考えながら、CSSの設計におけるこの間違いのリストを楽しむことができます。これは、多くの場合、将来を見据えて水晶玉を使わずに設計されたものとして、間違いが少ないものです。 ただし、実際にはWebを壊すことはできません。そのため、現在ブラウザは表示用に1つの値のセットをサポートしており、仕様は表示用に2つの値に移行しています。

これを回避する方法は、これらの単一の値すべてを含む、表示用のレガシー値と短い値を指定することです。 これは、単一の値と新しい2つのキーワード値の間でマッピングを定義できることを意味します。 これにより、次の値の表が得られます。

これがどのように機能するかを説明するために、グリッドコンテナについて考えることができます。 2つの値の世界では、次のブロックレベルのグリッドコンテナを作成します。

 .container { display: block grid; }

ただし、legacyキーワードは、以下が同じことを行うことを意味します。

 .container { display: grid; }

代わりに、インライングリッドコンテナが必要な場合は、2つの値の世界で次を使用します。

 .container { display: inline grid; }

また、レガシー値を使用する場合：

 .container { display: inline-grid; }

これで、この会話が始まった場所に戻って、 display: inline-block 。 表を見ると、これが2つの値の世界でdisplay: inline flow-rootとして定義されていることがわかります。 これで、 display: flow-rootと一致します。これは、2つの値の世界ではdisplay: block flow-rootになります。 これらのものがどのように定義されているかを少し整理して明確にします。 必要に応じて、CSSのリファクタリング。

2値構文のブラウザサポート

現在のところ、ブラウザはdisplayプロパティの2値構文をサポートしていません。 Firefoxの実装バグはここにあります。 実装（発生した場合）には、基本的に、レガシー値を2値バージョンにエイリアスすることが含まれます。 したがって、コードでこれらの2つの値のバージョンを実際に使用できるようになるまでには、しばらく時間がかかる可能性があります。 ただし、それは実際にはこの記事のポイントではありません。 代わりに、2値モデルに照らして表示の値を見ると、何が起こっているのかを説明するのに役立つと思います。

CSSでボックスのレイアウトを定義するときは、レイアウト内の他のすべてのボックスとの関係でこのボックスがどのように動作するかという観点から、このボックスに何が起こるかを定義します。 また、そのボックスの子がどのように動作するかを定義しています。 レガシーキーワードがそれらの値にマップされるため、値を2つの別個のものとして明示的に宣言できるようになるずっと前に、このように考えることができます。これは、 displayの値を変更したときに何が起こるかを理解するのに役立ちます。