どうも！LSSです！！
先日の記事、
のコメント欄にて、
とのコメントをいただきました。
さじ様、ありがとうございます^^
で…試みてはみたんです…けどね^^;
- 単純にradial-gradientにしてみた例
- before要素とborderを使ってみた例
- position:absoluteを外してみた例
- after要素にしてみた例
- 最初のやつのサイズ調整してみた例
- 円の中心位置をズラしてみた例
- 結局、未解決
単純にradial-gradientにしてみた例
- 4時のニュース
- ハラキリ侍が行く！
- Dr.”ピー”ニスの悩み相談室
- ６年”ピー”組 吉賀先生
コード
.list002 li{
background-image:radial-gradient(circle at 50% 50%,lightblue 0%,pink 50%,transparent 50%);
background-size:18px 25px;
background-repeat:no-repeat;
list-style-position:inside;
}
--></style>
<ol class="list002">
<li>4時のニュース</li>
<li>ハラキリ侍が行く！</li>
<li>Dr.”ピー”ニスの悩み相談室</li>
<li>６年”ピー”組 吉賀先生</li>
</ol>
うーん、惜しいんだけど、位置がちょっと右すぎますね…。
なお、background-positionでも修正は効きませんでした^^;
before要素とborderを使ってみた例
- 4時のニュース
- ハラキリ侍が行く！
- Dr.”ピー”ニスの悩み相談室
- ６年”ピー”組 吉賀先生
コード
<style><!--
.list003 li{
list-style-position:inside;
}
.list003 li::before{
display:inline-block;
position:absolute;
content:"";
border:1px solid black;
border-radius:15px;
width:15px;
height:15px;
}
--></style>
<ol class="list003">
<li>4時のニュース</li>
<li>ハラキリ侍が行く！</li>
<li>Dr.”ピー”ニスの悩み相談室</li>
<li>６年”ピー”組 吉賀先生</li>
</ol>
::before要素を使った上に、色々と あがいてみましたが…なぜかこっちでは、数字部分が無いものとして文頭にかぶるんですね^^;;;
position:absoluteを外してみた例
- 4時のニュース
- ハラキリ侍が行く！
- Dr.”ピー”ニスの悩み相談室
- ６年”ピー”組 吉賀先生
コード
<style><!--
.list004 li{
list-style-position:inside;
}
.list004 li::before{
display:inline-block;
content:"";
border:1px solid black;
border-radius:15px;
width:15px;
height:15px;
}
--></style>
<ol class="list004">
<li>4時のニュース</li>
<li>ハラキリ侍が行く！</li>
<li>Dr.”ピー”ニスの悩み相談室</li>
<li>６年”ピー”組 吉賀先生</li>
</ol>
うん、やっぱり数字の後、文の前に来てしまいますね^^;
ところで、::afterにしてみたらどうなるんでしょう？？
after要素にしてみた例
- 4時のニュース
- ハラキリ侍が行く！
- Dr.”ピー”ニスの悩み相談室
- ６年”ピー”組 吉賀先生
コード
<style><!--
.list004 li{
list-style-position:inside;
}
.list004 li::before{
display:inline-block;
content:"";
border:1px solid black;
border-radius:15px;
width:15px;
height:15px;
}
--></style>
<ol class="list004">
<li>4時のニュース</li>
<li>ハラキリ侍が行く！</li>
<li>Dr.”ピー”ニスの悩み相談室</li>
<li>６年”ピー”組 吉賀先生</li>
</ol>
なるほど、やはりこうなりますね。
つまり、「ナンバー」「::before」「文」「::after」の順に並ぶ、と。
何の解決にもなっていませんが、これはこれで何か別に使えるのかも？ｗ
最初のやつのサイズ調整してみた例
- 4時のニュース
- ハラキリ侍が行く！
- Dr.”ピー”ニスの悩み相談室
- ６年”ピー”組 吉賀先生
コード
<h2>最初のやつのサイズ調整してみた例</h2>
<style><!--
.list006 li{
background-image:radial-gradient(25px circle at 50% 50%,lightblue 0%,pink 50%,transparent 50%);
background-size:25px 25px;
background-repeat:no-repeat;
list-style-position:inside;
}
--></style>
<ol class="list006">
<li>4時のニュース</li>
<li>ハラキリ侍が行く！</li>
<li>Dr.”ピー”ニスの悩み相談室</li>
<li>６年”ピー”組 吉賀先生</li>
</ol>
一応、円を少し大きくする事はできます。
どんどん、コレジャナイ感が増していってる気がしますねｗ
…ん？待てよ？？
円の中心位置をズラしてみた例
- 4時のニュース
- ハラキリ侍が行く！
- Dr.”ピー”ニスの悩み相談室
- ６年”ピー”組 吉賀先生
コード
<style><!--
.list007 li{
background-image:radial-gradient(25px circle at 25% 50%,lightblue 0%,pink 50%,transparent 50%);
background-size:25px 25px;
background-repeat:no-repeat;
list-style-position:inside;
}
--></style>
<ol class="list007">
<li>4時のニュース</li>
<li>ハラキリ侍が行く！</li>
<li>Dr.”ピー”ニスの悩み相談室</li>
<li>６年”ピー”組 吉賀先生</li>
</ol>
一応、こういう位置変更は可能ですね。
円ではなくなってしまっていますが^^;
結局、未解決
「自動ナンバリング」を使わない方法なら、余裕で出来るかもですが、今のところ「自動ナンバリングを活かしつつ、円で綺麗に囲む」方法に至らず、です。
background-imageよりも::before要素が後にくる、というのが納得いかないｗｗｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
今度はナンバリングの方なんですね。オリジナルな使い方が膨らみそうですね！ちなみに丸の形には。。？（笑）