『Web標準の教科書』各章

第6章第11節（p.433-440）

ul {
  margin-left: 15px;
  padding-left: 15px;
  border-left: 2px dotted #7aa;
  }
li { 
  list-style-type: none;
  margin-top: 4px;
  margin-bottom: 4px;
  }
：
：
<ul>
  <li><a href="./html/">HTML/XHTML辞典</a></li>
  <li><a href="./css/">CSS辞典</a></li>
  <li><a href="./char/">Web文字/記号辞典</a></li>
  <li><a href="./color/">Webカラー辞典</a></li>
  <li><a href="./media/">Webメディア辞典</a></li>
</ul>

ul {
  margin: 10px 0;
  padding-left: 45px;
  background: url(./images/ul_bcg.gif) repeat-y;
  }
li { 
  list-style-type: none;
  margin-top: 4px;
  margin-bottom: 4px;
  }

li { 
  list-style-type: disc;
  list-style-image: url(/images/li_marker.gif);
  margin-top: 4px;
  margin-bottom: 4px;
  }
：
：
<ul>
  <li><a href="./html/">HTML/XHTML辞典</a></li>
  <li><a href="./css/">CSS辞典</a></li>
  <li><a href="./char/">Web文字/記号辞典</a></li>
  <li><a href="./color/">Webカラー辞典</a></li>
  <li><a href="./media/">Webメディア辞典</a></li>
</ul>

ul {
  margin-left: 0;
  padding-left: 0;
  }
li {
  list-style-type: none;
  margin-top: 4px;
  margin-bottom: 4px;
  margin-left: 15px;
  padding-left: 25px;
  background: url(/images/li_marker.gif) no-repeat center left;
  }
：
：

li {
  list-style-type: decimal;
  margin-top: 4px;
  margin-bottom: 4px;
  }
li#item1 { list-style-image: url(/images/li_1.gif); }
li#item2 { list-style-image: url(/images/li_2.gif); }
li#item3 { list-style-image: url(/images/li_3.gif); }
li#item4 { list-style-image: url(/images/li_4.gif); }
li#item5 { list-style-image: url(/images/li_5.gif); }
：
：
<ol>
  <li id="item1">必要なツールを用意する。</li>
  <li id="item2">Webの仕組みを理解する。</li>
  <li id="item3">コンセプトワークをする。</li>
  <li id="item4">（X）HTMLでページを制作する。</li>
  <li id="item5">CSSでページをデザインする。</li>
</ol>

ol {
  margin-left: 0;
  padding-left: 0;
  }
li {
  list-style-type: none;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 5px;
  padding-left: 35px;
  }
li#item1 { background: url(./images/li_1.gif) no-repeat center left }
li#item2 { background: url(./images/li_2.gif) no-repeat center left }
li#item3 { background: url(./images/li_3.gif) no-repeat center left }
li#item4 { background: url(./images/li_4.gif) no-repeat center left }
li#item5 { background: url(./images/li_5.gif) no-repeat center left }
：
：

dt {
  color: #666;
  font-weight: bold;
  }
dd {
  margin-left: 20px;
  padding-left: 20px;
  background: url(/images/dd_uri.gif) no-repeat center left;
  }
：
：
<dl>
  <dt>Website</dt>
  <dd>
    <a href="http://www.cybergarden.net/">
    http://www.cybergarden.net/
    </a>
  </dd>
  <dt>Blog</dt>
  <dd>
    <a href="http://www.cybergarden.net/blog/">
    http://www.cybergarden.net/blog/
    </a>
  </dd>
  <dt>E-mail</dt>
  <dd>
    <a href="mailto:mashiko@cybergarden.net">
    mashiko@cybergarden.net
    </a>
  </dd>
</dl>

dt {
  padding: 3px;
  border-top: 1px solid #699;
  border-bottom: 1px solid #699;
  background: #699 url(/images/dt_bcg.gif) repeat-y;
  color: #fff;
  font-weight: bold;
  text-align: center;
  }
dd { margin: 3px 0; }
：
：
<dl>
  <dt>references</dt>
  <dd><a href="./html/">HTML/XHTML辞典</a></dd>
  <dd><a href="./css/">CSS辞典</a></dd>
  <dd><a href="./char/">Web文字/記号辞典</a></dd>
  <dd><a href="./color/">Webカラー辞典</a></dd>
  <dd><a href="./media/">Webメディア辞典</a></dd>
</dl>

dt {
  padding: 3px;
  border-top: 1px solid #699;
  border-bottom: 1px solid #699;
  background: #699 url(/images/dt_bcg.gif) repeat-y;
  color: #fff;
  font-weight: bold;
  text-align: center;
  }
dd { margin: 3px 0; }
dd ul { margin: 0; padding: 0; }
dd ul li {
  list-style-type: none;
  margin: 3px 0;
  }
：
：
<dl>
  <dt>references</dt>
  <dd>
    <ul>
      <li><a href="./html/">HTML/XHTML辞典</a></li>
      <li><a href="./css/">CSS辞典</a></li>
      <li><a href="./char/">Web文字/記号辞典</a></li>
      <li><a href="./color/">Webカラー辞典</a></li>
      <li><a href="./media/">Webメディア辞典</a></li>
    </ul>
  </dd>
</dl>

第6章 第11節（p.433-440）

Chapters

第6章第11節（p.433-440）