リストの装飾

    <ul>
        <li>ul リスト</li>
        <li>HTMLの基礎</li>
        <li>CSSの基礎</li>
        <li>デザインの基礎</li>
    </ul>

    <ol>
        <li>ol リスト</li>
        <li>HTMLの基礎</li>
        <li>CSSの基礎</li>
        <li>デザインの基礎</li>
    </ol>

ul{list-style-type:none;} /* リストマーカーなし */
ol{list-style-type:none;} /* リストマーカーなし */

ul{list-style-type:disc;} /* disc 黒丸 */
ol{list-style-type:disc;} /* disc 黒丸 */

ul{list-style-type:circle;} /* circle 白丸 */
ol{list-style-type:circle;} /* circle 白丸 */

ul{list-style-type:square;} /* square 黒四角 */
ol{list-style-type:square;} /* square 黒四角 */

ul{list-style-type:decimal;} /* decimal 数字 */
ol{list-style-type:decimal;} /* decimal 数字 */

ul{list-style-type:decimal-leading-zero;} /* decimal-leading-zero 先頭に0をつけた数字 */
ol{list-style-type:decimal-leading-zero;} /* decimal-leading-zero 先頭に0をつけた数字 */

ul{list-style-type:lower-roman;} /* lower-roman 小文字のローマ数字 */
ol{list-style-type:lower-roman;} /* lower-roman 小文字のローマ数字 */

ul{list-style-type:upper-roman;} /* upper-roman 大文字のローマ数字 */
ol{list-style-type:upper-roman;} /* upper-roman 大文字のローマ数字 */

ul{list-style-type:cjk-ideographic;} /* cjk-ideographic 漢数字 */
ol{list-style-type:cjk-ideographic;} /* cjk-ideographic 漢数字 */

ul{list-style-type:hiragana;} /* hiragana ひらがなのあいうえお順 */
ol{list-style-type:hiragana;} /* hiragana ひらがなのあいうえお順 */

ul{list-style-type:katakana;} /* katakana カタカナのアイウエオ順 */
ol{list-style-type:katakana;} /* katakana カタカナのアイウエオ順 */

ul{list-style-type:hiragana-iroha;} /* hiragana-iroha ひらがなのいろはにほへと順 */
ol{list-style-type:hiragana-iroha;} /* hiragana-iroha ひらがなのいろはにほへと順 */

ul{list-style-type:katakana-iroha;} /* katakana-iroha カタカナのイロハニホヘト順 */
ol{list-style-type:katakana-iroha;} /* katakana-iroha カタカナのイロハニホヘト順 */

ul{list-style-type:lower-alpha;} /* lower-alpha 小文字のアルファベット */
ol{list-style-type:lower-alpha;} /* lower-alpha 小文字のアルファベット */

ul{list-style-type:lower-latin;} /* lower-latin 小文字のアルファベット */
ol{list-style-type:lower-latin;} /* lower-latin 小文字のアルファベット */

ul{list-style-type:upper-alpha;} /* upper-alpha 大文字のアルファベット */
ol{list-style-type:upper-alpha;} /* upper-alpha 大文字のアルファベット */

ul{list-style-type:upper-latin;} /* upper-latin 大文字のアルファベット */
ol{list-style-type:upper-latin;} /* upper-latin 大文字のアルファベット */

ul{list-style-type:lower-greek;} /* lower-greek 小文字のギリシャ文字 */
ol{list-style-type:lower-greek;} /* lower-greek 小文字のギリシャ文字 */

ul{list-style-type:hebrew;} /* hebrew ヘブライ数字 */
ol{list-style-type:hebrew;} /* hebrew ヘブライ数字 */

ul{list-style-type:armenian;} /* armenian アルメニア数字 */
ol{list-style-type:armenian;} /* armenian アルメニア数字 */

ul{list-style-type:georgian;} /* georgian グルジア数字 */
ol{list-style-type:georgian;} /* georgian グルジア数字 */

    <ul>
        <li>ul リスト</li>
        <li>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
        <li>とかくに人の世は住みにくい。</li>
    </ul>

    <ol>
        <li>ol リスト</li>
        <li>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
        <li>とかくに人の世は住みにくい。</li>
    </ol>

ul{list-style-position: inside;} /* マーカーがリスト内容の 内側に表示される */
ol{list-style-position: inside;} /* マーカーがリスト内容の 内側に表示される */

ul{ list-style-position: inside; /* マーカーがリスト内容の 内側に表示される */
    text-indent: -1.3em; /* 2行目の位置 -1emから始めて様子を見ながら決める  */
    padding-left: 2em; /* 左余白を入れないとうまくいかない */
} 
ol{ list-style-position: inside; /* マーカーがリスト内容の 内側に表示される */
    text-indent: -1.3em; /* 2行目の位置 -1emから始めて様子を見ながら決める  */
    padding-left: 2em; /* 左余白を入れないとうまくいかない */
} 

ul{ list-style-image: url(img/list-mark-01.png); } /* リストマーカーに画像にする */
ol{ list-style-image: url(img/list-mark-01.png); } /* リストマーカーに画像にする */