いずれもli
要素と組み合わせて使えそうなリストアイコンのサンプルで、画像は使用せずに全てCSSのみで実装してみたものです。
最近ならwebフォントやSVGで使い勝手良いものが実装できたり、あとは使用できるブラウザは限られてきたりしますが、問題ないブラウザであればサイズやカラー変更といったこともCSSのみで簡単に変更できます。
はじめに
最後のサンプルのみol
要素使ってますが、その他に関しては全てHTMLは下記のように単純なul
, li
要素を使ってます。
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br />Rem quasi explicabo consequatur consectetur, a atque voluptate officiis eligendi nostrum.</li>
</ul>
CSSに関しても大体やっていることは一緒ですが、サンプルコードで記述していない共通のリセットスタイルとしてはlist-style: none;
を指定しています。
また、表示位置に関しては大雑把に指定しているので環境によっては残念な見栄えになっている可能性があります。
紹介するコードを使用する場合、特に位置調整については調整を行ってください。
ここでは見栄えをイメージで紹介しており、実際の見栄えは下記で確認できます。
ライン
ul li {
position: relative;
}
ul li::after {
display: block;
content: '';
position: absolute;
top: .65em;
left: -1em;
width: 8px;
height: 1px;
background-color: #666;
}
矢印 #1
ul li {
position: relative;
}
ul li::after {
display: block;
content: '';
position: absolute;
top: .5em;
left: -1em;
width: 6px;
height: 6px;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
矢印 #2
先ほどの矢印に::before
で表現したラインを組み合わせて別のタイプの矢印アイコンに見せるものです。
ul li {
position: relative;
}
ul li::after,
ul li::before {
display: block;
content: '';
position: absolute;
}
ul li::after {
top: 9px;
left: -1em;
width: 6px;
height: 6px;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
ul li::before {
top: 12px;
left: -1.025em;
width: 8px;
height: 1px;
background-color: #666;
}
オリジナルディスク(円形) #1
list-style-type: disc;
で表示される感じのをCSSで表現したもので、この方法であればブラウザ毎に若干違いがあったりするようなものも統一させることができ、自由にサイズやカラー変更も可能です。
ul li {
position: relative;
}
ul li::after {
display: block;
content: '';
position: absolute;
top: .5em;
left: -1em;
width: 6px;
height: 6px;
background-color: #666;
border-radius: 100%;
}
オリジナルディスク(円形) #2
こちらはlist-style-type: circle;
で表示される感じのをCSSで表現したものです。
同じく自由にサイズやカラー変更も可能で、今回のサンプルでは行っていませんがbox-shadow
などのプロパティも使って立体的な感じに見せるのも良いかと思います。
ul li {
position: relative;
}
ul li::after {
display: block;
content: '';
position: absolute;
top: .5em;
left: -1em;
width: 5px;
height: 5px;
background-color: #fff;
border: 1px solid #3498db;
border-radius: 100%;
}
矢印×ディスク(円形)
上で紹介した矢印とディスク(円形)を組み合わせて、よりアイコンっぽい感じにしてみたものです。
ul li {
position: relative;
}
ul li::after,
ul li::before {
display: block;
content: '';
position: absolute;
}
ul li::after {
top: .35em;
left: -1.2em;
width: 14px;
height: 14px;
background-color: #3498db;
border-radius: 100%;
}
ul li::before {
z-index: 2;
top: .625em;
left: -.975em;
width: 4px;
height: 4px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
ダイヤ
ul li {
position: relative;
}
ul li::after {
display: block;
content: '';
position: absolute;
top: .5em;
left: -1em;
width: 6px;
height: 6px;
background-color: #3498db;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
チェックマーク
ul li {
position: relative;
}
ul li::after {
display: block;
content: '';
position: absolute;
top: .5em;
left: -1em;
width: 8px;
height: 3px;
border-left: 2px solid #3498db;
border-bottom: 2px solid #3498db;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
機種依存文字
こちらはこれまでのものとは少し違って、機種依存文字をアイコン代わりに表示させてみたものです。
文字なのでこれまでと同様、カラーやサイズ変更は容易にできます。
ul li {
position: relative;
}
ul li::after {
display: block;
position: absolute;
top: .4em;
left: -1.2em;
font-size: 12px;
line-height: 1;
}
ul li:nth-of-type(1)::after {
content: '\002713';
color: #3498db;
}
ul li:nth-of-type(2)::after {
content: '\00266b';
color: #e67e22;
}
ul li:nth-of-type(3)::after {
content: '\002665';
color: #e74c3c;
}
ul li:nth-of-type(4)::after {
content: '\00272a';
color: #f1c40f;
}
ul li:nth-of-type(5)::after {
content: '\002731';
color: #9b59b6;
}
ランキング風
counter-increment
プロパティを使って、簡単にランキング風のリストを作る方法です。
今回のサンプルではただ文字列を出しているだけですが、::before
では単純に数字だけ出力して、そこに::after
を用いて表示させたアイコンを組み合わせたり、webフォントを使って表示した王冠やトロフィーなどと組み合わせて使ったりするのも良いと思います。
ol li {
position: relative;
padding-left: 3.5em;
counter-increment: li;
}
ol li::before {
content: 'Rank ' counter(li) ' -';
display: block;
position: absolute;
top: .3em;
left: -1em;
color: #666;
font-size: 14px;
line-height: 1;
font-weight: bold;
}
ol li:nth-of-type(1)::before {
color: #e4aa1d;
}
ol li:nth-of-type(2)::before {
color: #9eaeb9;
}
ol li:nth-of-type(3)::before {
color: #b76901;
}