3-4.リスト階層視覚化、CSS設定

<!-- 🔸UnorderList -->

<ul class="is-style-list-disc"><!-- WPブロックスタイル -->
  <li>ul li (第1階層)<br>インデントチェキ
    <ul class="is-style-list-disc">
      <li>ul li ul li (第2階層)<br>インデントチェキ
        <ul class="is-style-list-disc">
          <li>ul li ul li ul li (第3階層)<br>インデントチェキ
            <ul class="is-style-list-disc">
              <li>ul li ul li ul li ul li (第4階層)<br>インデントチェキ
                <ul class="is-style-list-disc"><li>ul li ul li ul li ul li ul li (第5階層)<br>インデントチェキ</li></ul>
                <ol><li>ul li ul li ul li ul li ol li (第5階層)</li></ol>
              </li>
            </ul>
            <ol>
              <li>ul li ul li ul li ol li (第4階層)
                <ul class="is-style-list-disc"><li>ul li ul li ul li ol li ul li (第5階層)</li></ul>
                <ol><li>ul li ul li ul li ol li ol li (第5階層)</li></ol>
              </li>
            </ol>
          </li>
        </ul>
        <ol>
          <li>ul li ul li ol li (第3階層)
            <ul class="is-style-list-disc">
              <li>ul li ul li ol li ul li (第4階層)
                <ul class="is-style-list-disc"><li>ul li ul li ol li ul li ul li (第5階層)</li></ul>
                <ol><li>ul li ul li ol li ul li ol li (第5階層)</li></ol>
              </li>
            </ul>
            <ol>
              <li>ul li ul li ol li ol li (第4階層)
                <ul class="is-style-list-disc"><li>ul li ul li ol li ol li ul li (第5階層)</li></ul>
                <ol><li>ul li ul li ol li ol li ol li (第5階層)</li></ol>
              </li>
            </ol>
          </li>
        </ol>
      </li>
    </ul>
    <ol>
      <li>ul li ol li (第2階層)
        <ul class="is-style-list-disc">
          <li>ul li ol li ul li (第3階層)
            <ul class="is-style-list-disc">
              <li>ul li ol li ul li ul li (第4階層)
                <ul class="is-style-list-disc"><li>ul li ol li ul li ul li ul li (第5階層)</li></ul>
                <ol><li>ul li ol li ul li ul li ol li (第5階層)</li></ol>
              </li>
            </ul>
            <ol>
              <li>ul li ol li ul li ol li (第4階層)
                <ul class="is-style-list-disc"><li>ul li ol li ul li ol li ul li (第5階層)</li></ul>
                <ol><li>ul li ol li ul li ol li ol li (第5階層)</li></ol>
              </li>
            </ol>
          </li>
        </ul>
        <ol>
          <li>ul li ol li ol li (第3階層)
            <ul class="is-style-list-disc">
              <li>ul li ol li ol li ul li (第4階層)
                <ul class="is-style-list-disc"><li>ul li ol li ol li ul li ul li (第5階層)</li></ul>
                <ol><li>ul li ol li ol li ul li ol li (第5階層)</li></ol>
              </li>
            </ul>
            <ol>
              <li>ul li ol li ol li ol li (第4階層)
                <ul class="is-style-list-disc"><li>ul li ol li ol li ol li ul li (第5階層)</li></ul>
                <ol><li>ul li ol li ol li ol li ol li (第5階層)</li></ol>
              </li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ul>

<!-- 🔸OrderList（WP排出 class="is-style-list-disc"省略） --> 

<ol>
  <li>第1階層 (ol li)<br>インデントチェキ
    <ul class="is-style-list-disc">
      <li>第2階層 (ol li ul li)<br>インデントチェキ
        <ul class="is-style-list-disc">
          <li>第3階層 (ol li ul li ul li)<br>インデントチェキ
            <ul class="is-style-list-disc">
              <li>第4階層 (ol li ul li ul li ul li)<br>インデントチェキ
                <ul class="is-style-list-disc"><li>第5階層 (ol li ul li ul li ul li ul li)<br>インデントチェキ</li></ul>
                <ol><li>第5階層 (ol li ul li ul li ul li ol li)</li></ol>
              </li>
            </ul>
            <ol>
              <li>第4階層 (ol li ul li ul li ol li)
                <ul class="is-style-list-disc"><li>第5階層 (ol li ul li ul li ol li ul li)</li></ul>
                <ol><li>第5階層 (ol li ul li ul li ol li ol li)</li></ol>
              </li>
            </ol>
          </li>
        </ul>
        <ol>
          <li>第3階層 (ol li ul li ol li)
            <ul class="is-style-list-disc">
              <li>第4階層 (ol li ul li ol li ul li)
                <ul class="is-style-list-disc"><li>第5階層 (ol li ul li ol li ul li ul li)</li></ul>
                <ol><li>第5階層 (ol li ul li ol li ul li ol li)</li></ol>
              </li>
            </ul>
            <ol>
              <li>第4階層 (ol li ul li ol li ol li)
                <ul class="is-style-list-disc"><li>第5階層 (ol li ul li ol li ol li ul li)</li></ul>
                <ol><li>第5階層 (ol li ul li ol li ol li ol li)</li></ol>
              </li>
            </ol>
          </li>
        </ol>
      </li>
    </ul>
    <ol>
      <li>第2階層 (ol li ol li)
        <ul class="is-style-list-disc">
          <li>第3階層 (ol li ol li ul li)
            <ul class="is-style-list-disc">
              <li>第4階層 (ol li ol li ul li ul li)
                <ul class="is-style-list-disc"><li>第5階層 (ol li ol li ul li ul li ul li)</li></ul>
                <ol><li>第5階層 (ol li ol li ul li ul li ol li)</li></ol>
              </li>
            </ul>
            <ol>
              <li>第4階層 (ol li ol li ul li ol li)
                <ul class="is-style-list-disc"><li>第5階層 (ol li ol li ul li ol li ul li)</li></ul>
                <ol><li>第5階層 (ol li ol li ul li ol li ol li)</li></ol>
              </li>
            </ol>
          </li>
        </ul>
        <ol>
          <li>第3階層 (ol li ol li ol li)
            <ul class="is-style-list-disc">
              <li>第4階層 (ol li ol li ol li ul li)
                <ul class="is-style-list-disc"><li>第5階層 (ol li ol li ol li ul li ul li)</li></ul>
                <ol><li>第5階層 (ol li ol li ol li ul li ol li)</li></ol>
              </li>
            </ul>
            <ol>
              <li>第4階層 (ol li ol li ol li ol li)
                <ul class="is-style-list-disc"><li>第5階層 (ol li ol li ol li ol li ul li)</li></ul>
                <ol><li>第5階層 (ol li ol li ol li ol li ol li)</li></ol>
                <ol start="100">
                  <li>ol li ol li ol li ol li ol li (5)　⭐&lt;ol start="100"&gt;⭐
                  </li>
                  <li>ol li ol li ol li ol li ol li (5)
                  </li>
                  <li>ol li ol li ol li ol li ol li (5)
                  </li>
                  <li value="1000">ol li ol li ol li ol li ol li (5)　⭐&lt;li value="1000"&gt;⭐
                  </li>
                </ol>
              </li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

/* =========================================
   リストネスト視覚化（階段状デザイン）
========================================= */

article .entry-content .nested-staircase {

/* --- WordPress プリセット --- */
:root :where(.wp-block-list),
ul, ol {
  font-size: var(--wp--preset--font-size--step-000);
}

/* --- リストマークのUL個別調整 --- */
ul[class*="is-style-list-disc"] > li::marker {
  font-size: 0;
}

ul[class*="is-style-list-disc"] > li::before {
  content: '・';
  margin-left: -0.6em;
}

/* --- 縦方向の余白（フクロウ・ネスト間隔） --- */
/* 連続するリスト、およびネストされたサブリストの上間隔 */
:is(ul, ol) + :is(ul, ol),
li :is(ul, ol) {
  margin-top: 0.2em;
}

/* 兄弟要素の後に続く、サブリストを持ったリスト項目(li)の間隔 */
:is(ul, ol) li + li:has(> ul, > ol) {
  margin-top: 0.3em;
}

/* li 1行目（::before / ::after：適用、::marker：不適用） */
li::first-line {
  font-size: 1.03em;
}

/* --- ベース設定（リスト全般） --- */
ul, ol {
  list-style-position: inside;
  border-radius: 3px;
  background-color: #EBEBEB;
  margin-left: 0;/* ブラウザ標準インデントの相殺 */
  padding-left: 0;
}

li {
  line-height: 2;
  text-indent: -1.2em;
}

/* UL直下の li の位置・余白調整 */
> ul > li,       /* 1階層目のUL */
ul > li {        /* 2階層目以降のUL */
  text-indent: 0;
  padding-left: 0.6em; /* margin-left より padding の方が挙動安定 */
}

/* OL直下の li の位置・余白調整（数字マーカーのぶら下げ） */
> ol > li,       /* 1階層目のOL */
ol > li {
  text-indent: -0.3em;
  margin-left: 0.6em;
}

/* --- 段階的な背景色・文字色（第2〜第5階層） --- */
/* 第2階層 */
li ul,
li ol {
  background-color: #D6D6D6;
}

/* 第3階層 */
li li ul,
li li ol {
/* --- 縦方向の余白（フクロウ・ネスト間隔） --- */  background-color: #C2C2C2;
  color: #555;
}

/* 第4階層 */
li li li ul,
li li li ol {
  background-color: #ADADAD;
  color: #444;
}

/* 第5階層 */
li li li li ul,
li li li li ol {
  background-color: #999999;
  color: #333;
}

} /* nested-staircase */