イメージ画像を使わずにリストの行頭記号をカッコよく変える - AdSense実験室

イメージ画像を使わずにリストの行頭記号をカッコよく変える

2013-09-28

HTMLのlistタグ。メニューやリンクなんかでもよく使いますよね。
でも標準で表示される行頭記号(リストマーカー)。あれってちょっと見た目イマイチじゃないですか?

"リストの行頭記号"

三角形とか矢印とか、そういうのがあるといいんだけどな。でも、あいにくそういうのは標準では用意されてません。

仕方がないので、「list-style-type: none; 」でマーク表示を消して、スタイルシートの背景指定で代わりの画像を表示させたりしてる人がほとんどではないでしょうか。

でもこれはこれでいちいち画像を用意しなければならなかったりで、面倒っちゃ面倒。

そこで、画像とか使わなくても

"webフォントリスト記述例"

こんな感じのリストがカンタンに作れちゃう便利な方法をご紹介します。

導入

使用するのはフリーのWebフォント、「font awesome」。
そう、画像じゃなくてwebフォントを使うわけです。

  1. まずはfont awesomeのサイトに行って、フォントのセットをダウンロードします。 "FontAwesome"
    http://fortawesome.github.io/Font-Awesome/

  2. zipファイルを解凍してできたファイルから、「css」と「font」の2つのフォルダをサーバーにアップロード。

ここまでできたら準備は完了。 実際にwebフォントを使う際には、HTMLファイルのヘッダ部でfont-awesome.cssファイルを読み込みます。

<head><link rel="stylesheet" href="./css/font-awesome.css">
</head>

※ font-awesome.cssへのパスは、みなさんがアップした環境に合わせて記述してください。
また、試しに表示させるだけなら、サーバーにアップしなくてもローカル環境に配置して使うことも可能です。

webフォントの使い方

webフォントといってもいろいろあって、このfont awesomeの場合は「記号・アイコン」専用のwebフォントなんです。
こちらのページに、

http://fortawesome.github.io/Font-Awesome/icons/

使えるアイコン一覧がありますので、この中からお好みのものをお選びください。

クリックすれば詳細説明と、使い方も書かれていると思います。
こんな感じですね。iタグで指定した部分が、下の図のように記号に置き換わります。

<i class="icon-rocket"></i> ロケット
<i class="icon-shopping-cart"></i> ショッピングカート
<i class="icon-download-alt"></i> ダウンロード
<i class="icon-envelope-alt"></i> メール

▼実行結果

"webフォント記述例"

これを、list-style-type: none;で行頭表示を非表示にしたリスト内で使えば、お好みの記号でのリスト表示が実現できちゃうというわけです。

<ul>
  <li><i class="icon-chevron-sign-right"></i> リスト1</li>
  <li><i class="icon-chevron-sign-right"></i> リスト2</li>
  <li><i class="icon-chevron-sign-right"></i> リスト3</li>
</ul>

↓ほら、できたー\(^o^)/

"webフォントリスト記述例"

スポンサーリンク

行頭記号を自動で表示させる

これでいちおう目的達成できたわけですが、でもリストの項目ごとにいちいち記号指定しなきゃいけないのはあんまりスマートじゃありませんね。
できれば自動で記号表示されるとなお嬉しい。
というわけで、もう少し手を加えてみたいと思います。

再び先ほどのアイコン一覧から、リスト行頭に使いたい記号を選びます。
今回は、"icon-caret-right"を選択しました。

使いたい記号が決まったら、フォントのインストールの時にアップロードしたcssフォルダ内のfont-awesome.cssファイルを開いて、そのなかから自分が選んだフォントのアイコン名を探します。私の場合は"icon-caret-right"ですね。

.icon-caret-right:before {
  content: "\f0da";
}

こんな風に書かれているはず。このcontent文の1行をコピーして、こんどは自分のHTMLで使うCSSに以下のように記述します。

.list-caret {
    list-style:none;
    font-size:1.2em;
}

.list-caret li:before{
    content: "\f0da";
    font-family: FontAwesome;
    display: block;
    text-align: center;
    float: left;
    margin-right: 6px;
    width:1em;
}

さて、これで準備OKです。
あとは、リストタグでいまのクラスを指定するだけ。

<ul class="list-caret">
  <li>リスト 1</li>
  <li>リスト 2</li>
  <li>リスト 3</li>
</ul>

行頭文字が自動でアイコン記号に置き換わりました。便利~♪

"リストサンプル"

このwebフォント方式、画像と違って「フォント」ですから、サイズや色なんかも普通のテキストと同じようにCSSのスタイル指定で自由に変えられるのがポイント。
たとえばこんな風に。

もちろんリストタグ以外でも使えますから、アイデアしだいでいろいろ応用がきくのではないかと思います。

スポンサーリンク