CSS: ol, ul, li タグ【応用編】

今回は実際に使っていろいろなアレンジをしていこうと思います。

1. イメージをリストに使う

• Apple
• Orange
• Cherry
• Peach

HTML

<ul>
 　<li class="list21">Apple</li>
 　<li class="list21">Orange</li>
 　<li class="list21">Cherry</li>
 　<li class="list21">Peach</li>
</ul>

CSS

li{
    background: url("../img/list.png") 0 50% no-repeat;
    list-style-type: none;
    padding-left: 15px;
    }

2. 入れ子のリストを使う

1. 暖色
• 赤
• オレンジ
• 黄色
2. 寒色
• 青
• 緑
• 紫

HTML

<ol>
   <li>暖色</li>
    　<ul>
         <li>赤</li>
         <li>オレンジ</li>
         <li>黄色</li>
      </ul>
   <li>寒色</li>
       <ul>
          <li>青</li>
          <li>緑</li>
          <li>紫</li>
       </ul>
 </ol>

3. ナビゲーションリストを作る

横並びのリストを作る際によく使われます。

● inline-blockを使ったリスト

HTML

<nav class="nav-list">
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">GALLERY</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</nav>

CSS

li {
  display: inline-block;
  margin: 0 10px;
}

● floatを使ったリスト

HTML

<nav class="nav-list">
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">GALLERY</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</nav>

CSS

.nav-list li {
  display: inline-block;
  margin: 0 10px;
}

●  inline-blockを使った応用編

HTML

<nav class="nav-list">
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">GALLERY</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</nav>

CSS

.nav-list ul {
              font: bold 11px "Helvetica Neue";
              margin: 0;
              padding: 0;
              text-transform: uppercase;
              }
.nav-list li {
              display: inline-block;
              }
.nav-list a {
              background: #eacf60;
              color: #fff;
              padding: 10px 40px;
              text-decoration: none;
              }
.nav-list a:hover {
                  background: #877012;
                  }

4. ol(Ordered list)を使いこなそう

1. 朝
2. 昼
3. 晩

HTML

<ol>
  <li>朝</li>
  <li>昼</li>
  <li>晩</li>
</ol>

■ 開始番号を指定する

20. 朝
21. 昼
22. 晩

HTML

<ol start="20">
  <li>朝</li>
  <li>昼</li>
  <li>晩</li>
</ol>

■ 番号を逆にする

1. 朝
2. 昼
3. 晩

HTML

<ol reversed>
  <li>朝</li>
  <li>昼</li>
  <li>晩</li>
</ol>