フローチャート式のサイトマップ

Result

フローチャート式のサイトマップというか、サイトマップにフローチャートを利用しただけです

横向きのフローチャートと同様に疑似要素で罫線を作って繋いでいきます

ある程度少なめのコードでリストの数が増えたりモニタサイズが異なっても対応できるので汎用的な印象です

内容としては今更感満載のネタですが必要になった機会があったのでおさらい

css

.tree,
.tree ul,
.tree li {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.tree {
  margin: 0 0 1em;
  text-align: center;
}
.tree,
.tree ul {
  display: table;
}
.tree ul {
  width: 100%;
}
.tree li {
  display: table-cell;
  padding: 0.5em 0;
  vertical-align: top;
}
/* 横線 */
.tree li:before {
  outline: solid 1px #666;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.tree li:first-child:before {
  left: 50%;
}
.tree li:last-child:before {
  right: 50%;
}

.tree code,
.tree span {
  border: solid 0.1em #666;
  display: inline-block;
  margin: 0 0.2em 0.5em;
  padding: 0.2em 0.5em;
  position: relative;
}

/* 縦線 */
.tree ul:before,
.tree code:before,
.tree span:before {
  outline: solid 1px #666;
  content: "";
  height: 0.5em;
  left: 50%;
  position: absolute;
}
.tree ul:before {
  top: -0.5em;
}
.tree code:before,
.tree span:before {
  top: -0.55em;
}

.tree > li {
  margin-top: 0;
}
.tree > li:before,
.tree > li:after,
.tree > li > code:before,
.tree > li > span:before {
  outline: none;
}

html

<ul class="tree">
    <li><span>TOPページ</span>
      <ul>
        <li><span>企業理念</span>
          <ul>
            <li><span>社長より</span>
              <ul>
                <li><span>プロフィール</span></li>
              </ul>
            </li>
            <li><span>コンセプト</span>
              <ul>
                <li><span>社会貢献</span></li>
                <li><span>製品</span></li>
                <li><span>個人情報</span></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><span>リクルート</span>
          <ul>
　　・
　　・
　　・
    </li>
  </ul>

via

Tree view from unordered list