どうも！LSSです！！
先日、
の記事にて「背景画像にインラインSVGを当てる」事ができました。
その時はbackground-imageプロパティにSVGを適用していました。
が、CSSには background-imageと似た書式を利用する「border-image」や「list-style-image」があります。
そのうち、list-styleについては、
【CSS】箇条書きのドットに色をつける【list-style-image】
【CSS】ナンバリング付きの箇条書き、ナンバー部分に背景色を付けてみます
これらの記事で、gradientを使って色々試みていましたが…
「ここにSVGが使えるなら、かなり自由にデザインできるのでは？」
と思い、list-style-imageの方から挑戦してみる事にしました！
早速サンプル＆コードです
- ひとつめのこうもく
- ふたつめのこうもく
- みっつめのこうもく
- よっつめのこうもく
コード
<style><!--
.yubi li{
list-style-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" stroke="rgb(0,0,0)"><path d="M 1,10 l 10,-7 2,0 -5,5 10,0 2,2 -2,2 -6,0 0,6 -2,2 -6,0 -6,-3" fill="none"></path></svg>');
background-size:20px;
}
--></style>
<ul class="yubi">
<li>ひとつめのこうもく</li>
<li>ふたつめのこうもく</li>
<li>みっつめのこうもく</li>
<li>よっつめのこうもく</li>
</ul>
難なくいけましたね^^
SVGは即興で、またコード手打ちで適当に描いた指差しマークです。
<path d="M 1,10 l 10,-7 2,0 -5,5 10,0 2,2 -2,2 -6,0 0,6 -2,2 -6,0 -6,-3" fill="none">
この数字の羅列で線を引いています。
SVG内の座標 1,10 を親指の付け根として始まり、右に10 上に7まで線を引いて、そこから右に2 高さそのままの位置まで線を引いて、左に5 下に5 の位置まで線を引いて…といった感じ^^
色もつけてみましょうか。
- ひとつめのこうもく
- ふたつめのこうもく
- みっつめのこうもく
- よっつめのこうもく
コード
<style><!--
.yubi2 li{
list-style-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" stroke="rgb(0,0,0)"><path d="M 1,10 l 10,-7 2,0 -5,5 10,0 2,2 -2,2 -6,0 0,6 -2,2 -6,0 -6,-3" fill="pink"></path></svg>');
background-size:20px;
}
--></style>
<ul class="yubi2">
<li>ひとつめのこうもく</li>
<li>ふたつめのこうもく</li>
<li>みっつめのこうもく</li>
<li>よっつめのこうもく</li>
</ul>
クラス名を yubi2 に変えた他は、赤文字部分「pink」に変えただけです。
閉じた図形でなくても塗りつぶせるんですね（今、試して初めて知りましたｗ）
今回のは適当に描いた図形ですが
SVG形式でさえあれば、もっとカラフルな画像でも、かっこいい画像でも、画像ファイルを使用せずに自由なマークを付ける事ができます^^
に挙げたような「謎の制約」があるぐらいで^^;
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
