【HTML & CSS】デフォルトのリストマークにさようなら！疑似要素を使った3つの実用的なli装飾Tips。
2015.2.16
突然ですが、HTMLコーディングをしていてulやolのliのリストマークを表示する際、どんな装飾をされていますか？
「circle」「disc」「decimal」「square」などが多くなってくるかと思いますが、
ul,ol {
list-style: none;
}
上記のように僕はlist-style: none;でデフォルトのリストマークは出さないようにしています。
今回はクライアントワークで実際に使っている、擬似要素「:before」を使った3つの実用的なli装飾の方法をご紹介します。
疑似要素を使った3つの実用的なli装飾Tips
使いづらいリストマーク。
ulやolはアイテムを箇条書きのグループにするときに使うためのものですが、実はとっても使いづらいんです。主にブラウザの違いによるものですが、marginの解釈の違いや、リストマークを「inside」や「outside」の位置に指定しても見当違いの位置に表示されてしまい、調整がきかなかったりすることがけっこうあります。
こういったことが原因で、デフォルトのリストマークは消し、自由に装飾できるようにCSSを書いています。
liの基本CSS
以下の手法のすべては下記の指定をした上で有効になります。忘れずに指定してくださいね。
li {
font: normal 12px/20px Meiryo,sans-serif;
padding-left: 1em;
position: relative;
}
解説します。
今回の例では、擬似要素の「:before」を左上に絶対配置する事によってリストマークを表示しますので、まず「padding-left: 1em;」で左から1em（1文字分）余白をとり、もし改行が発生しても2行目以降も左に1em分の余白が取れる状態にしておきます。
次に「:before」を「position: absolute;」で絶対配置しますので、「:before」の親要素であるliに「position: relative;」を仕掛けます。これによって、「:before」の親要素であるliの左上に配置の基準点を作ることができ、「あれ？？擬似要素はどこ？？」という事態を回避しています。
ではいよいよ解説を始めます。
オススメのリストマークその1：テキスト
まずはシステムフォントを使ったテキスト装飾です。
li:before {
display: block;
content: "・";
width: 1em;
height: 1em;
position: absolute;
left: 0;
top: 0;
}
「content: “・”;」という指定をしていますが、これによってliのテキスト部分と同じフォント指定のものを使って全角の「・」をリストマークとして使っています。
お分かりかとは思いますが、「・」の部分を「■」などにするとリストマークは「■」になります。
オススメのリストマークその2：アイコン
あまりくどい演出は逆に敬遠されてしまいますが、リストマークを目立たせたい場合にアイコンを使うのはとても有効です。
アイコンを表示するにはPhotoshopやIllustratorなどでアイコン画像を作って表示させるようになりますが、自分で作らずとも無料素材などを利用すれば効率も良く、クオリティも高いものが仕上がります。
以下のサイトのアイコンなどは使いやすくていいんじゃないかと思います。
Free Vector Icon Set (325+ Icons)
http://graphicdesignjunction.com/2014/11/free-vector-icon-set-325-icons/
li:before {
display: block;
content: "";
width: 12px;
height: 12px;
position: absolute;
left: 0;
top: 4px;
background: url(アイコン画像までのパス) no-repeat 0 0;
background-size: 12px 12px;//画像のサイズをテキストサイズに合わせる
}
backgroundに画像を指定することによってリストマークとして表示させています。
なお、アイコン画像に関してはお好みで選んでいただければと思います。
画像のサイズをテキストサイズに合わせるように心がけてください。
いろいろな画像が使えるのでこの方法が一番思い通りのリストマークが作れますね。
オススメのリストマークその3：FontAwesome
普通ならPhotoshopやIllustratorなどでアイコンを生成してそれを読み込ませる必要があるのですが、最近は便利なもので「アイコンWebフォント」というものがありますよね。
今回は最も有名な「FontAwesome（フォントオーサム）」というサービスを使ってアイコンWebフォントによるリストマークを付けてみましょう。
下準備として、HTMLファイルの<head></head>内に、FontAwesomeのCSSファイルを読み込ませます。
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css">
これで「FontAwesome」の使用準備が整いました。
次にCSSで指定を行っていきましょう。
アイコンは以下のページの「fa-angle-double-right」を使ってみましょう。
こちらのページの「Unicode」と表示されている横の「\f101」を「content: “”;」に指定します。
fa-angle-double-right
http://fortawesome.github.io/Font-Awesome/icon/angle-double-right/
li:before {
display: block;
content: "\f101";
font-family: "FontAwesome";
width: 1em;
height: 1em;
position: absolute;
left: 0;
top: 0;
}
これで「fa-angle-double-right」のアイコンWebフォントがリストマークとして表示されると思います。
ちなみにcontentの「\（バックスラッシュ）」には気をつけてください。言い方はおかしいかもしれませんが本当にバックスラッシュなので、「Windowsだったら¥なんでしょ？」とかではないんです（笑）どんな環境でも「\」で打つようにしてください。
FontAwesomeのUnicodeをコピペするのが確実ですね。
大切なのは「見やすさ・わかりやすさ」
いかがでしたか？基本的にはこういった方法でliのリストマーク装飾を行っていますが、デフォルトのリストマークも指定によってはブラウザ間の差異をなくすことができます。
自分にあった方法で装飾を行っていただければと思いますが、liに限らず、装飾する上で何よりも心がけて頂きたいのは「見やすい・わかりやすい」という点。
ユーザーが一目見たら「あ、これはリストでこういう内容なんだ」とわかれば、こちらの装飾の役割は全うしているんじゃないかなと思います。