ホームページの文章の中でも、箇条書きは利用頻度が高めです。
まめわざの箇条書きは、●・○・■などの記号、アラビア数字・ローマ数字、アルファベットのマーク（マーカー）が選べましたが、このたび見出しなどで利用できるアイコンの一部が利用できるようになりました。
さらに、マークの色やサイズも変えられるようになったので多様な表現が可能となりました。
利用例と合わせて以下で紹介します。
箇条書き内のテキストを大きくしたり色を付けたりしなくても、マークをアイコンにして大きくしたり色を付けたりすることで目立たせることが可能です。
尚、マークの位置は通常は「上付き」ですがアイコンでは一律「中央付き」となります。
「チェック項目」のニュアンスを用意に表現できます。ここでも読みやすさを優先して文章はなるべく装飾せず、マークを変えて目立たせています。
可・不可の一覧として箇条書きを利用する際は、○×のアイコンを併用すれば視認性が向上し、意味が伝わりやすくなります。
人物のリストの場合にをつかったり、注意事項の説明にを使ったりと、様々な表現が可能です。
この他、 などのアイコンがご利用いただけます。
マークを変更したい箇条書きブロックの「装飾」をクリックします。
左側の「テキスト・マーク」タブをクリックし、マーク・マークの色・マークのサイズ・マークの影を設定します。
マークの色・サイズ・影は、アイコンをマークとして利用した場合にのみ動作します。
アイコンをマークとして利用した場合は、中央寄せ時にアイコンが中央寄せになりません。
いきなりの余談ですが、今回の仕様拡張の背景話です。
先日、テキストの装飾の1つとして白抜きが利用できるようになりました。
しかし、これをリストで利用するとマーカーが見えなくなってしまう不具合がIE以外のブラウザで発生しました。
原因は、「マーカーの色はテキストの色と同一になるが、text-shadowは効かない」というブラウザの仕様によるもので、色が白にはなるものの枠や影が表示されないので背景に埋没してしまうためです。
マーカーの色だけを設定するCSSプロパティは存在しないため、おそらく解決方法はありません。text-shadowを使った白抜き文字をリストに使うのはやめましょう。
IEをベースにCSSコーディングを行っている方は、IEではtext-shadowが効くので一見問題ないように思えるため特に注意が必要です。
スマートフォンを中心に高精細ディスプレイが普及し、ギザギザにならないベクター画像をより積極的に使用すべき状況となりました。
HTMLで利用できるベクター画像であるSVGは、URLエンコーディングをしてCSS内に直接記述することが可能です。
list-style:image: url();だけのとてもシンプルなCSSで、url()内にSVGを直書きする方法をご紹介します。
CSSは意味不明な文字の羅列でとっつきにくいですが、書いてあるのはlist-style-image:url();だけです。この括弧の中が長大になっています。
ulのスタイルとしてlist-style-imageを定義するだけなので、とても使い勝手のいい方法です。上のコードをコピーして、ご自由にご利用ください。
尚、この方法はIE9～11、Chrome、Safari、Firefox、iOSのSafari、Android4の標準ブラウザ・Chromeなどで表示が可能です。代表的な未対応ブラウザはIE8以下、Android2系です。
すべてのコードの中に「ff0000」となっている部分がありますので、これを16進法の色指定で置換すれば色が変わります。
すべてのコードの中に「0.5em」（チェックは「1em」）となっている部分がありますので、これをpxやemで置換すればサイズが変わります。
上記１の方法はとても便利なのですが、ウェブフォントが利用できない点と、font-sizeに連動しない点が問題で、まめわざへの利用は見合わせました。
代わりに、下記のようにlist-styleを非表示にして、疑似要素でマーカーを表示しています。
疑似要素を使う場合は、ご覧のようにセンタリングが効きません。
また、文字サイズに合わせてright, top, marginなどを微調整する必要がありますのでご注意ください。
疑似要素を使う場合は、SVG直書きではあまりメリットがなさそうです。ウェブフォントと併用し、色をcolorプロパティで、サイズをfont-sizeプロパティでサクッと変えられるのが最大の利点です。