メインコンテンツへスキップ

displayプロパティでの
レンダリング一覧

1.概要

以下は、レンダリングする為の
一連の提案の中で、
CSSの displayプロパティ を
用いて行われる部分の
一覧です。

ここでの提案は、ユーザーエージェントに対してのものであり、必ずしもユーザーエージェントが採用しているとは限りません。また、文書の作成者が各要素に CSS で改めて指定する事も出来ます。

CSSの displayプロパティの既定値は、inline です。

[ユーザーエージェント:元の文書(ソースドキュメント)を、利用者(ユーザー)に代わって解釈するもの(エージェント)。ブラウザなどの HTML文書を見る為の道具(ツール, アプリ)の事。]

2.隠された要素

隠された要素に対しての
レンダリングの提案です。

隠された要素に対してのレンダリングの提案です。display:none; は、要素を内容も含めて無いものと扱うという事です。つまり、ボックスを生成しないという事です。

(もしくは、0個のボックスを生成するという言い方で、「ビジュアルフォーマットモデルでは、ドキュメントツリーの各要素は、ボックスモデル(箱の雛型)に従って0個以上のボックス(箱)を生成します。」という文言と言い方を揃えるのもありかと思います。)

  1. area, base, basefont, datalist, head, link, meta, noembed, noframes, param, rp, script, style, template, title {
  2. display: none;
  3. }
  4. [hidden]:not([hidden=until-found i]):not(embed) {
  5. display: none;
  6. }
  7. [hidden=until-found i]:not(embed) {
  8. content-visibility: hidden;
  9. }
  10. embed[hidden] {
  11. display: inline;
  12. height: 0;
  13. width: 0;
  14. }
  15. input[type=hidden i] {
  16. display: none !important;
  17. }
  18. @media (scripting) {
  19. noscript {
  20. display: none !important;
  21. }
  22. }

Last Check 2025-03-19

  1. <div>サンプル１</div>
  2. <div hidden>サンプル２</div>
  3. <div>サンプル３</div>

[hidden] とは、hidden属性が記述されているという意味です。[...] は、属性セレクタと言います。

サンプル１
サンプル３
  1. <div>サンプル１</div>
  2. <template>サンプル２</template>
  3. <div>サンプル３</div>

template とは、template要素という意味です。templateなどの要素名は、要素型セレクタと言います。

サンプル１
サンプル３
  1. <div>サンプル１</div>
  2. <embed type="text/plain" src="./den.txt" hidden="true">
  3. <div>サンプル３</div>
  4. <embed type="text/plain" src="./den.txt">
  5. <div>サンプル５</div>

embed[hidden] とは、embed要素であり、かつhidden属性がある要素という意味です。セレクタを空白なく続けて書いた場合は、ＡＮＤ条件, 論理積といい、ＡＢ と書いた場合は「Ａであり、かつＢである」という意味です。

※ この例示では見た目の都合で、embed要素の横幅, 高さの最大値を別途に指定しています。

サンプル１
サンプル３
サンプル５
  1. <div>サンプル１</div>
  2. <input type="hidden" value="value2">
  3. <div>サンプル３</div>
  4. <input type="text" value="value4">
  5. <div>サンプル５</div>

input[type=hidden i] とは、input要素であり、かつtype属性の値が hidden である要素という意味です。最後の i は、大文字と小文字を区別せずに比較する事を表します。

※ この例示では見た目の都合で、input要素の横幅の最大値を別途に指定しています。

サンプル１
サンプル３
サンプル５

3.ページに関する要素

ページに関する要素に対しての
レンダリングの提案です。

ページに関する要素に対してのレンダリングの提案です。display:block; は、ブロックレベルのブロックコンテナのボックス(ブロックボックス)を生成するという事です。

  1. html, body {
  2. display: block;
  3. }

Last Check 2025-03-19

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>サンプル</title>
  6. </head>
  7. <body>
  8. コンテンツ
  9. </body>
  10. </html>

html要素は、それを含むブロックフォーマットコンテキストがない為、新しいブロックフォーマットコンテキストを確立します。html要素は、フォーマットコンテキストに参加しない(隠された要素) head要素と、ブロックレベルのbody要素だけを配置します。なのでここでは、インラインフォーマットコンテキストは確立されません。body要素は、包含ブロックがhtml要素のブロックボックスでありhtml要素が新しいブロックフォーマットコンテキストを確立している為、そのまま継続します。

※ body要素に display: inline; と指定した場合は、インラインレベルのコンテンツのみを含むブロックコンテナボックスとなる為、インラインフォーマットコンテキストを確立します。

html ブロック
フォーマット
コンテキスト
head 表示しない
body ブロック
ボックス

4.フローコンテンツの一部要素

フローコンテンツの
一部要素に対しての
レンダリングの提案です。

フローコンテンツの一部要素に対してのレンダリングの提案です。display:block; は、ブロックレベルのブロックコンテナのボックス(ブロックボックス)を生成するという事です。

  1. address, blockquote, center, dialog, div, figure, figcaption, footer, form, header, hr, legend, listing, main, p, plaintext, pre, search, xmp {
  2. display: block;
  3. }
  4. blockquote, figure, listing, p, plaintext, pre, xmp {
  5. margin-block: 1em;
  6. }
  7. blockquote, figure {
  8. margin-inline: 40px;
  9. }
  10. address {
  11. font-style: italic;
  12. }
  13. listing, plaintext, pre, xmp {
  14. font-family: monospace;
  15. white-space: pre;
  16. }
  17. dialog:not([open]) {
  18. display: none;
  19. }
  20. dialog {
  21. position: absolute;
  22. inset-inline-start: 0;
  23. inset-inline-end: 0;
  24. width: fit-content;
  25. height: fit-content;
  26. margin: auto;
  27. border: solid;
  28. padding: 1em;
  29. background-color: Canvas;
  30. color: CanvasText;
  31. }
  32. dialog:modal {
  33. position: fixed;
  34. overflow: auto;
  35. inset-block: 0;
  36. max-width: calc(100% - 6px - 2em);
  37. max-height: calc(100% - 6px - 2em);
  38. }
  39. dialog::backdrop {
  40. background: rgba(0,0,0,0.1);
  41. }
  42. [popover]:not(:popover-open):not(dialog[open]) {
  43. display: none;
  44. }
  45. dialog:popover-open {
  46. display: block;
  47. }
  48. [popover] {
  49. position: fixed;
  50. inset: 0;
  51. width: fit-content;
  52. height: fit-content;
  53. margin: auto;
  54. border: solid;
  55. padding: 0.25em;
  56. overflow: auto;
  57. color: CanvasText;
  58. background-color: Canvas;
  59. }
  60. :popover-open::backdrop {
  61. position: fixed;
  62. inset: 0;
  63. pointer-events: none !important;
  64. background-color: transparent;
  65. }
  66. slot {
  67. display: contents;
  68. }
  69. pre[wrap] {
  70. white-space: pre-wrap;
  71. }
  72. form {
  73. margin-block-end: 1em;
  74. }

Last Check 2025-03-19

5.フレージングコンテンツの一部要素

フレージングコンテンツの
一部要素に対しての
レンダリングの提案です。

フレージングコンテンツの一部要素に対してのレンダリングの提案です。

注意 : displayプロパティの既定値は、inline です。なので、display:inline;を改めて提案する事はありません。

  1. cite, dfn, em, i, var {
  2. font-style: italic;
  3. }
  4. b, strong {
  5. font-weight: bolder;
  6. }
  7. code, kbd, samp, tt {
  8. font-family: monospace;
  9. }
  10. big {
  11. font-size: larger;
  12. }
  13. small {
  14. font-size: smaller;
  15. }
  16. sub {
  17. vertical-align: sub;
  18. }
  19. sup {
  20. vertical-align: super;
  21. }
  22. sub, sup {
  23. line-height: normal;
  24. font-size: smaller;
  25. }
  26. ruby {
  27. display: ruby;
  28. }
  29. rt {
  30. display: ruby-text;
  31. }
  32. :link {
  33. color: #0000EE;
  34. }
  35. :visited {
  36. color: #551A8B;
  37. }
  38. :link:active, :visited:active {
  39. color: #FF0000;
  40. }
  41. :link, :visited {
  42. text-decoration: underline;
  43. cursor: pointer;
  44. }
  45. :focus-visible {
  46. outline: auto;
  47. }
  48. mark {
  49. background: yellow;
  50. color: black;
  51. }
  52. abbr[title], acronym[title] {
  53. text-decoration: dotted underline;
  54. }
  55. ins, u {
  56. text-decoration: underline;
  57. }
  58. del, s, strike {
  59. text-decoration: line-through;
  60. }
  61. q::before {
  62. content: open-quote;
  63. }
  64. q::after {
  65. content: close-quote;
  66. }
  67. br {
  68. display-outside: newline;
  69. }
  70. nobr {
  71. white-space: nowrap;
  72. }
  73. wbr {
  74. display-outside: break-opportunity;
  75. }
  76. nobr wbr {
  77. white-space: normal;
  78. }
  79. br[clear=left i] {
  80. clear: left;
  81. }
  82. br[clear=right i] {
  83. clear: right;
  84. }
  85. br[clear=all i], br[clear=both i] {
  86. clear: both;
  87. }

Last Check 2025-03-19

6.セクショニングコンテンツ, ヘディングコンテンツ

セクショニングコンテンツ,
ヘディングコンテンツの
一部要素に対しての
レンダリングの提案です。

セクショニングコンテンツ, ヘディングコンテンツの要素に対してのレンダリングの提案です。display:block; は、ブロックレベルのブロックコンテナのボックス(ブロックボックス)を生成するという事です。

  1. article, aside, h1, h2, h3, h4, h5, h6, hgroup, nav, section {
  2. display: block;
  3. }

Last Check 2025-03-19

7.一覧表(リスト)に関する一部要素

一覧表(リスト)に関する
一部要素に対しての
レンダリングの提案です。

一覧表(リスト)に関する一部要素に対してのレンダリングの提案です。display:block; は、ブロックレベルのブロックコンテナのボックス(ブロックボックス)を生成するという事です。
display:list-item; は、ブロックレベルのブロックコンテナのボックス(ブロックボックス)を生成し、list-style-typeプロパティとlist-style-imageプロパティの値に応じて、マーカーボックスも生成するという事です。

  1. dir, dd, dl, dt, menu, ol, ul {
  2. display: block;
  3. }
  4. li {
  5. display: list-item;
  6. text-align: match-parent;
  7. }
  8. dir, dl, menu, ol, ul {
  9. margin-block: 1em;
  10. }
  11. :is(dir, dl, menu, ol, ul) :is(dir, dl, menu, ol, ul) {
  12. margin-block: 0;
  13. }
  14. dd {
  15. margin-inline-start: 40px;
  16. }
  17. dir, menu, ol, ul {
  18. padding-inline-start: 40px;
  19. }
  20. ol, ul, menu {
  21. counter-reset: list-item;
  22. }
  23. ol {
  24. list-style-type: decimal;
  25. }
  26. dir, menu, ul {
  27. list-style-type: disc;
  28. }
  29. :is(dir, menu, ol, ul) :is(dir, menu, ul) {
  30. list-style-type: circle;
  31. }
  32. :is(dir, menu, ol, ul) :is(dir, menu, ol, ul) :is(dir, menu, ul) {
  33. list-style-type: square;
  34. }

Last Check 2025-03-19

8.表(テーブル)に関する一部要素

表(テーブル)に関する
一部要素に対しての
レンダリングの提案です。

表(テーブル)に関する一部要素に対してのレンダリングの提案です。

  1. table {
  2. display: table;
  3. }
  4. caption {
  5. display: table-caption;
  6. }
  7. colgroup, colgroup[hidden] {
  8. display: table-column-group;
  9. }
  10. col, col[hidden] {
  11. display: table-column;
  12. }
  13. thead, thead[hidden] {
  14. display: table-header-group;
  15. }
  16. tbody, tbody[hidden] {
  17. display: table-row-group;
  18. }
  19. tfoot, tfoot[hidden] {
  20. display: table-footer-group;
  21. }
  22. tr, tr[hidden] {
  23. display: table-row;
  24. }
  25. td, th {
  26. display: table-cell;
  27. }
  28. colgroup[hidden], col[hidden], thead[hidden], tbody[hidden], tfoot[hidden], tr[hidden] {
  29. visibility: collapse;
  30. }
  31. table {
  32. box-sizing: border-box;
  33. border-spacing: 2px;
  34. border-collapse: separate;
  35. text-indent: initial;
  36. }
  37. td, th {
  38. padding: 1px;
  39. }
  40. th {
  41. font-weight: bold;
  42. }
  43. caption {
  44. text-align: center;
  45. }
  46. thead, tbody, tfoot, table > tr {
  47. vertical-align: middle;
  48. }
  49. tr, td, th {
  50. vertical-align: inherit;
  51. }
  52. thead, tbody, tfoot, tr {
  53. border-color: inherit;
  54. }

Last Check 2025-03-19

9.フォームに関する一部要素

フォームに関する
一部要素に対しての
レンダリングの提案です。

フォームに関する一部要素に対してのレンダリングの提案です。display:inline-block; は、インラインレベルのブロックコンテナのボックスを生成するという事です。

  1. input, select, button, textarea {
  2. letter-spacing: initial;
  3. word-spacing: initial;
  4. line-height: initial;
  5. text-transform: initial;
  6. text-indent: initial;
  7. text-shadow: initial;
  8. appearance: auto;
  9. }
  10. input:not([type=image i], [type=range i], [type=checkbox i], [type=radio i]) {
  11. overflow: clip !important;
  12. overflow-clip-margin: 0 !important;
  13. }
  14. input, select, textarea {
  15. text-align: initial;
  16. }
  17. :autofill {
  18. field-sizing: fixed !important;
  19. }
  20. input:is([type=reset i], [type=button i], [type=submit i]), button {
  21. text-align: center;
  22. }
  23. input, button {
  24. display: inline-block;
  25. }
  26. input[type=hidden i], input[type=file i], input[type=image i] {
  27. appearance: none;
  28. }
  29. input:is([type=radio i], [type=checkbox i], [type=reset i], [type=button i], [type=submit i], [type=color i], [type=search i]), select, button {
  30. box-sizing: border-box;
  31. }
  32. textarea {
  33. white-space: pre-wrap;
  34. }
  35. input:not([type=image i]), textarea {
  36. box-sizing: border-box;
  37. }

Last Check 2025-03-19

10.一部要素

上記以外の
一部要素に対しての
レンダリングの提案です。

上記以外の一部要素に対しての、レンダリングの提案です。

  1. fieldset {
  2. display: block;
  3. margin-inline: 2px;
  4. border: groove 2px ThreeDFace;
  5. padding-block: 0.35em 0.625em;
  6. padding-inline: 0.75em;
  7. min-inline-size: min-content;
  8. }
  9. legend {
  10. padding-inline: 2px;
  11. }
  12. legend[align=left i] {
  13. justify-self: left;
  14. }
  15. legend[align=center i] {
  16. justify-self: center;
  17. }
  18. legend[align=right i] {
  19. justify-self: right;
  20. }

Last Check 2025-03-19