今日はめずらしく事務所でブログ書いています。
気分転換にカフェ行ってますが、やっぱりデスクトップの方が記事書きやすい。

ホームページを作るにあたってリストを使うことは多いと思います。
初期で用意されているリストはダサい！
なので、自分でリストを飾りたいですよね。
リストをオリジナルで作る方法はいくつかあります。
基本のやり方から順に紹介します。

CSSでリストのタイプを指定

ダサいやつです。
用意されたCSSの”list-style-type”属性を使うと簡単にリストは実現できます。

HTML

<ul class="circle">
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
</ul>

<ul class="square">
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
</ul>

CSS

.circle{
  list-style-type:circle;
}

.square{
  list-style-type:square;
}

See the Pen EmqWpB by Yoshimune (@hachidaime) on CodePen.

リストのスタイルはたくさんあります。
たくさんありすぎて紹介が面倒なので、ここを見てもらった方がいいです。
list-style-type

画像を使ったリスト

先ほどのリストは標準で使えるリストで教科書に書いてあるやつです。
リストの先頭記号をあえて消して、背景に画像を使って入れることでリストっぽく見せることができます。
paddingで左側に余白を作るので、リストっぽく文章の先頭もきれいにそろいます。
画像ファイルがあれば何でも使えるのでリストデザインにこだわるならこれが一番いいかも。

HTML

<ul class="list star">
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
</ul>

<ul class="list file">
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
</ul>

CSS

.list{
  list-style:none;
  padding:0;
}

.star li{
  background: url(http://www.y-com.info/images/common/icons/star.svg) no-repeat 0 0;
  background-size: 20px;
  padding-left: 30px;
}

.file li{
  background: url(http://www.y-com.info/images/common/icons/file.svg) no-repeat 0 0;
  background-size: 20px;
  padding-left: 30px;
}

See the Pen 画像を使ったリスト by Yoshimune (@hachidaime) on CodePen.

WEBフォントを使ったリスト

ちょっと高度かもしれないけれど、WEBフォントを使うって方法もあります。
僕はよく使いますが、あまりメジャーではない:beforeという疑似セレクタを使います。
要素の先頭に無理矢理挿入する感じです。
サンプルでは

content:’●’;
content:’★’;

といった感じでテキストを挿入していますが、
WEBフォントを使えば文字以外のテキストを挿入することも可能です。
この方法のメリットは画像を用意しなくてもいいってこと。
color属性を使えば簡単に色も変えることができるので、手軽さではこちらの方がいいかもしれません。
サンプルでは緑や黄色に変えています。

HTML

<ul class="list circle">
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
</ul>

<ul class="list star">
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
</ul>

CSS

.list{
  list-style-type: none;
  padding: 0;
}

.circle li:before{
  content:'●';
  margin-right: 10px;
  color: #0c5;
}

.star li:before{
  content:'★';
  margin-right: 10px;
  color: #f90;
}

See the Pen WEBフォントを使ったリスト by Yoshimune (@hachidaime) on CodePen.

[RelService] [Service]