どうも！LSSです！！
昨日の記事、
にて、その前にいただいたコメントを元に「箇条書き」のマーカーの装飾を試みてみました。
するとその記事に、
とのコメントをいただきました！
あとか様、ありがとうございます^^
昨日の方法は、マーカーを画像に置き換えてしまう方法でしたので、マーカーをナンバリングにする指定とは排他になってしまいます。
他の方法は何通りか考えられそうですが、「なるべく手間をかけない」方法を考えてみました！
ナンバー部分だけに背景色をつけるサンプル
- 4時のニュース
- ハラキリ侍が行く！
- Dr.”ピー”ニスの悩み相談室
- ６年”ピー”組 吉賀先生
コード
<style><!--
.list001 li{
background-image:linear-gradient(45deg,lightblue,pink);
background-size:18px 25px;
background-repeat:no-repeat;
list-style-position:inside;
}
--></style>
<ol class="list001">
<li>4時のニュース</li>
<li>ハラキリ侍が行く！</li>
<li>Dr.”ピー”ニスの悩み相談室</li>
<li>６年”ピー”組 吉賀先生</li>
</ol>
コード解説
ナンバリングつきの箇条書きは、
<ol class="list001">
<li>4時のニュース</li>
<li>ハラキリ侍が行く！</li>
<li>Dr.”ピー”ニスの悩み相談室</li>
<li>６年”ピー”組 吉賀先生</li>
</ol>
のように、<ul>タグの代わりに<ol>タグを使用します。
そして、<ol>タグに
class="list001"
を付け足しました。（ list001 は任意の名前です。好きに名付けてOK！）
そして、別途<style>タグを書き、その中にCSSの指定を書いていきます。
<style><!--
.list001 li{
background-image:linear-gradient(45deg,lightblue,pink);
background-size:18px 25px;
background-repeat:no-repeat;
list-style-position:inside;
}
--></style>
「.list001 li」は
「list001 という名前のクラスを指定した要素の、その中に入っている<li>タグに対して」の指定、って事になります。
そして、冒頭に書いた通り、「ナンバリングを使うなら、list-style-image は使えない」ので、background-image を使用しています。
※background-imageを使った例の記事は↓こちら
今回は、
background-image:linear-gradient(45deg,lightblue,pink);
としていますが、この内容も色々変えて使う事ができます^^
（今回のは、45度の角度で水色からピンクに変わっていく、という指定です）
background-size:18px 25px;
background-repeat:no-repeat;
背景色を付ける範囲を「横18ピクセル、縦25ピクセル」としています。
この指定が「ナンバリングを囲んでいる四角形のサイズ」という事になります。
そして、繰り返しにならないよう、 no-repeat を指定しています。
list-style-position:inside;
list-style-position というプロパティは、inside（内側）と outside（外側）のどちらかを指定する事ができ、省略すると outside を指定したのと同じ事になります。
今回の例でいうと、outside の場合、背景色がつくのが「ナンバーのあとに続く文章の１文字めから」になってしまうので、insideをわざわざ指定しています。
この指定の難点
「四角形のサイズを決めてしまっている」事で、フォントサイズによって「合わない」事になってしまう事が考えられます^^;
コピペで使用される方がおられましたら、その方のブログ上での見た目を確認しながらサイズを調節する必要が出てくるかもですね。
（background-size:18px 25px;の部分です。）
ナンバーが２桁になっても大丈夫？
「難点」に書いたように、四角形のサイズを決めてしまった事で、「じゃあ数字が２桁になったら？」という点。
一応、今回のサンプルでは「２桁でもなんとか耐えられる」サイズを指定しています。
実際に２桁になったサンプルを挙げておきますね。
- ああ、またこの夢か…。
- 嫌になる。
- 鬱蒼とした森の中で、
- 笑顔で手招きをする
- 女の子。
- かなり以前から繰り返し同じ夢を見る。
- 木々の葉擦れの音がリアルに感じられるが、
- 繰り返し同じ夢を見続けているので
- 決して迷う事なく断言できる。
- 「これは、夢だ！」と。
- 先ほどから手招きをしているその女の子、
- 知らない子だ。
- すっかり夢の中だけでの顔なじみになってはいるが…。
- 狭い木々の隙間をくぐり、いつものように彼女の元にたどり着く。
- そして、二人で手を取り、さらに奥へ進むのだ。
- 高台の上にでた。真っ赤に燃える夕陽が俺と彼女を照らす。
- ちなみに、現実ではこの森も高台も全く見覚えがない。
- つまり、全ては俺の空想の産物という事か。
- 手を繋いだままのこの子は、俺の何なのか？
- 特に理想のタイプというわけでもないし。
- 「何を想っているの？」
- にっこりと微笑みながら、彼女が問いかける。
- ぬめりを帯びた不安が、不意に俺の心に
- 根付きはじめた。
- 脳髄の奥から、何かが大量に溢れ出るかのような感覚！
※自作小説：「愛に飢えた男の夢」（書き下ろし） - Little Strange Softwareより、前半部分抜粋。
…うん、カツカツですねｗｗｗ
あとがき
箇条書き部分に手間をかける方法もあり、そちらだとサイズの制約に悩まなくて済むのですが、今回は「極力、手間をかけない」方法を考えてみました。
それでもまだ、改善の余地はあるかもですけどね^^;
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
仕事早っ！
さすがです。
ナンバリングもカラフルとか、カッコよくできるのでしょうか？
①②③とかの方です。😄
私自身のセンスと想像力が足りなくて、「カッコ良い」とかいう陳腐なイメージですが。。。