CSSで章題を強調出来るようにしてみた

自分のエントリーよみずれー。って事で、せめて章だけでも見つけやすいようにと、CSSを頑張ってみた。

参考>> http://www.xs4all.nl/~gerar022/www.mandarindesign.com/troops.html
参考>> http://bloggerbetatips.blogspot.com/2006/10/hack.html

Testtest
test
test
test
test
test


1 test
test
test
test
test
test


1.1 test
test
test
test
test
test

1.1.1 test
test
test
test
test
test

上から順に

.dropcaps { 
            float:left; 
            font-size:50px; 
            color:#2f21a6;
            line-height:45px; 
            padding-top:1px; 
            padding-right:5px; 
}

.dropcaps1 { 
            margin-right:6px;
            margin-top:5px;
            float:left;
            color:#2f21a6;
            background:khaki;
            border:1px solid darkkhaki;
            font-size:50px;
            line-height:45px;
            padding-top:2px;
            padding-right:5px;
            font-family:times;
}

.dropcaps2 { 
            margin-right:6px;
            margin-top:5px;
            float:left;
            color:#2f21a6;
            background:lightblue;
            border:1px solid darkkhaki;
            font-size:30px;
            line-height:25px;
            padding-top:2px;
            padding-right:5px;
            font-family:times;
}

.dropcaps3 { 
            margin-right:6px;
            margin-top:5px;
            float:left;
            color:#2f21a6;
            background:lightgrey;
            border:1px solid darkkhaki;
            font-size:15px;
            line-height:10px;
            padding-top:2px;
            padding-right:5px;
            font-family:times;
}

これをhead部分に追記

で、こんな感じでタグで囲ってやればOK

<span class="dropcaps">T</span>
<span class="dropcaps1">1</span>
<span class="dropcaps2">1.1</span>
<span class="dropcaps3">1.1.1</span>