CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの最新アップデート：displayプロパティの2値構文（外部値と内部値）

CSSのdisplayプロパティには、新しく「2値構文」が導入されました。この構文を使うことで、要素の表示タイプ（外部値と内部値）を明示的に指定できるようになり、要素のフローレイアウトをより柔軟に制御できるようになります。

従来のdisplayプロパティは単一のキーワード（例：block、inline-blockなど）で指定していましたが、2値構文では「要素がどのように振る舞うか（外部値）」と「中身がどのようにレイアウトされるか（内部値）」を個別に組み合わせて指定できます。

構文

CSSのdisplayプロパティの基本構文は以下のとおりです。

Selector {
   display: /*外部値*/ /*内部値*/
}

主なキーワードの意味

  • 外部値（outside）：block、inline、run-in など。要素自体がページのフローの中でどう振る舞うかを決めます。
  • 内部値（inside）：flow、flow-root、flex、grid、table など。子要素がどのようにレイアウトされるかを決めます。

サンプルコード1：inline flow-root の例

以下の例では、span要素に display: inline flow-root; を指定しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         body,div,span {
            box-shadow: inset 0 0 12px lightgreen;
            border: 2px dotted gray;
         }
         span {
            padding: 2%;
            display: inline flow-root;
         }
      </style>
   </head>
   <body>
      <div>
         <p>
            Aliquam non metus diam. Suspendisse ac euismod eros, quis feugiat lacus.
         </p>
         <img src="https://images.unsplash.com/photo-1611625618313-68b87aaa0626?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
         <span>Inline Block</span> <span>Span</span>
         Quisque sit amet consequat sem. Morbi eleifend erat et orci faucibus lacinia.
      </div>
   </body>
</html>

このコードをFirefoxで実行すると、次のような出力結果になります。span要素はインラインレベルとして振る舞いながらも、内部では独立したブロック整形コンテキスト（flow-root）を持つため、パディングやボーダーが正しく反映されます。

CSSの最新アップデート：displayプロパティの2値構文（外部値と内部値）

サンプルコード2：block flow の例

次に、span要素に display: block flow; を指定した例を見てみましょう。

<!DOCTYPE html>
<html>
   <head>
      <style>
         body,div,span {
            margin: 2%;
            box-shadow: inset 0 0 12px orange;
            border: 2px ridge cadetblue;
         }
         span {
            padding: 2%;
            display: block flow;
         }
      </style>
   </head>
   <body>
      <div>
         <p>
         Aliquam non metus diam. Suspendisse ac euismod eros, quis feugiat lacus.
         </p>
         <span>Block is now</span> <span>Block Flow</span>
         Quisque sit amet consequat sem. Morbi eleifend erat et orci faucibus lacinia.
      </div>
   </body>
</html>

実行すると、以下のような出力になります。インライン要素であるspanがブロックレベルとして扱われ、各要素が独立した行に配置され、通常のフローレイアウト（flow）で子要素が整列されていることが確認できます。

CSSの最新アップデート：displayプロパティの2値構文（外部値と内部値）

まとめ

2値構文のdisplayプロパティを使うことで、「要素の外側の振る舞い」と「内側のレイアウト方式」を分離して細かく制御できるようになりました。従来の単一キーワード（例えば display: block; は display: block flow; と同等）も引き続き利用できるため、既存のコードに影響を与えることなく、段階的に新しい記法へ移行できます。モダンブラウザでの対応も進んでいるため、ぜひ活用してみてください。

  1. CSSのdisplay:noneで要素を非表示にする方法

    CSSで要素を画面上から完全に取り除きたい場合は、displayプロパティにnoneを指定します。この値が設定された要素はブラウザ上に一切表示されず、レイアウト上のスペースも占有しません。例1：p要素を非表示にする以下の例では、p.demoクラスにdisplay: none;を適用しています。その結果、「9AM」というテキストはページ上に表示されません。一方、span.demo1にはdisplay: inline;を指定しているため、オレンジ色の背景を持つインライン要素として通常どおり表示されます。<!DOCTYPE html> <html> <head>

  2. CSSのdisplayプロパティとは？各値の違いと使い方を実例付きで解説

    CSSのdisplayプロパティとは すべてのHTML要素には、CSSのdisplayプロパティにあらかじめデフォルト値が設定されています。このプロパティは、その要素がドキュメント内でどのように描画されるかを決定する重要な役割を持っています。 注意： デフォルトのdisplayプロパティは上書きすることができますが、これは要素そのものの種類が変わるわけではなく、ドキュメント上での表示の挙動が変化するだけである点に留意してください。 displayプロパティの主な値 displayプロパティにはさまざまな値を指定できますが、特によく使われる代表的な値は以下の4つです。 block（ブロック）