Styling Nested Lists

Styling Nested Listsの日本語訳です。

A notebook entry from October 19, 2003

最近私はサイトマップを作成していて、サイトマップが基本的にはoutline of sortsであることに気づいた。So how should I go about marking it up? I settled on a series of nested tables — ha! gotcha — nested unordered lists.

行のマークアップ

At their very basic — nested, unstyled lists deliver the exact hierarchy I was looking for. I could feel good about the structure that all browsers and devices would read, while easily styling it with CSS later on.

A simple version might look something like this:

<ul>
<li>Weblog</li>
<li>Articles
   <ul>
   <li>How to Beat the Red Sox</li>
   <li>Pitching Past the 7th Inning
      <ul>
      <li>Part I</li>
      <li>Part II</li>
      </ul>
   </li>
   <li>Eighty-Five Years Isn't All That Long, Really</li>
   </ul>
</li>
<li>About</li>
</ul> 

Figure 1 below shows us how the markup above will render in most browsers. Woilla. A site map or outline. But let’s kick it up a notch (apologies to Emeril).

Figure 1

スタイルの追加

略

カスタムバレット

最下層のみ