【CSS】ナンバリング箇条書き装飾サンプル集

　どうも！LSSです！！

【CSS】ナンバリング箇条書き、色付き背景に成功しました！【olタグ装飾】

つまづきの記録。ナンバリングの背景を色付き円に…できなかった話^^;

【CSS】ナンバリング付きの箇条書き、ナンバー部分に背景色を付けてみます

【CSS】箇条書きのドットに色をつける【list-style-image】

…と、同じような事を続けてやってきましたが、今回は「まとめ」として使い甲斐のありそうな？ものを５種類並べてみます^^

光を入れて、珠っぽく

1. 4時のニュース
2. ハラキリ侍が行く！
3. Dr.”ピー”ニスの悩み相談室
4. ６年”ピー”組　吉賀先生

コード

<style><!--
.olm0 {position:relative;}
.olm0 li{list-style-position:inside;}
.olm0 li::before{
display:inline-block;position:absolute;
content:"";
width:25px;height:25px;
background-image:radial-gradient(12px circle at 70% 30%,#ffffffe0 20%,#ffffff00 100%),radial-gradient(25px circle at 50% 50%,#40ffff80 50%,transparent 50%);
background-size:25px 25px;background-repeat:no-repeat;
left:-6px;
}
--></style>
<ol class="olm0">
<li>4時のニュース</li>
<li>ハラキリ侍が行く！</li>
<li>Dr.”ピー”ニスの悩み相談室</li>
<li>６年”ピー”組　吉賀先生</li>
</ol>

色数を増やしてみました

1. 4時のニュース
2. ハラキリ侍が行く！
3. Dr.”ピー”ニスの悩み相談室
4. ６年”ピー”組　吉賀先生

コード

<style><!--
.olm1 {position:relative;}
.olm1 li{list-style-position:inside;}
.olm1 li::before{
display:inline-block;position:absolute;
content:"";
width:25px;height:25px;
background-image:
radial-gradient(12px circle at 70% 30%,#ffffffe0 20%,#ffffff00 100%),
radial-gradient(25px circle at 50% 50%,#00ffff40 0%,#ff00ff40 35%,#00000040 50%,transparent 50%);
background-size:25px 25px;background-repeat:no-repeat;
left:-6px;
}
--></style>
<ol class="olm1">
<li>4時のニュース</li>
<li>ハラキリ侍が行く！</li>
<li>Dr.”ピー”ニスの悩み相談室</li>
<li>６年”ピー”組　吉賀先生</li>
</ol>

四角もちょっと凝ってみます

1. 4時のニュース
2. ハラキリ侍が行く！
3. Dr.”ピー”ニスの悩み相談室
4. ６年”ピー”組　吉賀先生

コード

<style><!--
.ols0 {position:relative;}
.ols0 li{list-style-position:inside;}
.ols0 li::before{
display:inline-block;position:absolute;
content:"";
width:25px;height:25px;
border:4px outset #00ff0080;
background-color:#00ff0080;
background-image:
radial-gradient(15px circle at 55% 20%,#ffffffe0 20%,#ffffff00 100%);
background-size:25px 25px;background-repeat:no-repeat;
left:-6px;
}
--></style>
<ol class="ols0">
<li>4時のニュース</li>
<li>ハラキリ侍が行く！</li>
<li>Dr.”ピー”ニスの悩み相談室</li>
<li>６年”ピー”組　吉賀先生</li>
</ol>

星＋text-shadow

1. 4時のニュース
2. ハラキリ侍が行く！
3. Dr.”ピー”ニスの悩み相談室
4. ６年”ピー”組　吉賀先生

コード

<style><!--
.olst {position:relative;}
.olst li{list-style-position:inside;height:45px;}
.olst li::before{
display:inline-block;position:relative;
content:"★";
font-size:45px;
color:#ff000080;
left:-35px;top:8px;
text-shadow:2px 4px 0px #00000040;
}
--></style>
<ol class="olst">
<li>4時のニュース</li>
<li>ハラキリ侍が行く！</li>
<li>Dr.”ピー”ニスの悩み相談室</li>
<li>６年”ピー”組　吉賀先生</li>
</ol>

はぁと型もいけますね^^

1. 4時のニュース
2. ハラキリ侍が行く！
3. Dr.”ピー”ニスの悩み相談室
4. ６年”ピー”組　吉賀先生

コード

<style><!--
.olht {position:relative;}
.olht li{list-style-position:inside;height:45px;}
.olht li::before{
display:inline-block;position:relative;
content:"♡";
font-size:45px;
color:#ff000080;
left:-30px;top:8px;
text-shadow:4px 2px 0px #00000040;
}
--></style>
<ol class="olht">
<li>4時のニュース</li>
<li>ハラキリ侍が行く！</li>
<li>Dr.”ピー”ニスの悩み相談室</li>
<li>６年”ピー”組　吉賀先生</li>
</ol>

radial-gradientで光を入れると、なんか急にかっこよくなったような気がしますね^^

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^