[CSS] CSSで作るリストのアイコン

公開日: : 最終更新日:2014/08/09 CSS, Web制作 , ,

CSSだけでも色々出来る!

CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現が画像を使わずにできるようになってきてます。

よく使うリストのアイコンもCSSだけで可能です。
今回はそんなリストを3種類紹介します。

>の形のアイコン

アイコンを配置させるのに使うのが:beforeという疑似要素。
また、ものによっては:afterも一緒に使ったりしますが、今回は:beforeのみ使用します。

.sankaku{
	list-style:none;
	margin:0;
	padding:0;
}
.sankaku li{
	position:relative;
	padding:0 0 0 10px;
	line-height:1.2;
}
.sankaku li:before{
	content:"";
	display: block;
	width:4px;
	height:4px;
	border-top:2px solid #333;
	border-right:2px solid #333;
	transform: rotate(45deg);
	position: absolute;
	left:0px;
	top:-webkit-calc(100%/2);
	top:calc(100%/2);
	margin:-4px 0 0;
}

ざっと説明しますと、まずはリストのデフォルトアイコンをなくして、その次にこれから作るアイコンを置けるスペースを作ります。
ここからが、アイコンの説明。
contentは、中身ですので今回は空っぽです。そして四角の大きさを決めて、そこにつける枠線(border)がアイコンの役割をしています。
このままだと¬ こんな形なのでそれを45度回転させています。
あとは、場所を絶対配置で決めて微調整しています。
calc(100%/2)というのは、CSS3の calc()ファンクションというものです。

[参照] CSS の calc を使えば複雑なサイズ指定が可能らしい ここに色々載っています。

さて、CSSの設定が終わればHTMLなんですが、今回はクラスを付けるだけですので割愛します。
結果が下のリストになります。

  • ああああああ
  • いいいいいい
  • うううううう

ちゃんと>のアイコンが入ってますね。

▶︎のアイコンを入れる!

では、次にアイコンの形を変えてみましょう。
よく使われる▶︎のアイコンです。

内容はほとんど一緒で下記の様になります。

.sankaku2 li:before{
	content: '';
	border: solid #000;
	border-color: #000 transparent transparent;
	border-width: 4px 4px 0;
	width:0;
	position: absolute;
	top:-webkit-calc(100%/2);
	top:calc(100%/2);
	left: 0px;
	transform: rotate(-90deg);
	margin:-4px 0 0;
}

今回は、90度反時計回りに回して、倒しています。
元々、CSSで線を引くときにwidthを0にすると四つの三角の集合体になります。
それを上だけ色をつけて、他の辺には色をつけずにアイコンを表現しています。
結果は、下記の様になります。

  • ああああああ
  • いいいいいい
  • うううううう

チェックマークにしてみよう!

チェックマークは、一番最初の>このアイコンの応用になります。
内容はほぼ同じで下記の様になります。

.check li:before{
	content:"";
	display:block;
	width: 3px;
	height: 6px; 
	border: solid #333;
	border-width: 0 2px 2px 0;
	position:absolute;
	left: 0px;
	top: 40%;
	margin-top: -4px;  
	transform: rotate(45deg);
}

変わっているところは、正方形ではなく長方形になっていることでチェックマークを表現しているところですね。

結果は、下記の様になります。

  • あああああ
  • いいいいい
  • ううううう

まとめ

CSSってすごいですね。まだまだいろんな事ができます。
ブラウザが対応してなかったりもしますので注意が必要ですが、どんどん使っていきたいですね。

今回は、ベンダープレフィックスは省略しましたが、実際のソースにはまだまだ必要な場合もあります。
実際に使ってみたり、対応状況を調べてなるべくソースも綺麗にわかりやすくしましょう。

ad

関連記事

[CSS] フォームや登録の進み具合をCSSだけで表現する方法

フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います

記事を読む

[CSS] animationを使ってみる!

色の変化をCSSのみで実装できる! CSS3のキーフレームアニメーションでは、JSで出来る、背景色

記事を読む

[jQuery] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]

jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え

記事を読む

[CSS] clearfixの使い方を考える

現在のclearfix 以前は、IE6に対応させるためにソースがちょっと多かったですが、現在はかな

記事を読む

no image

[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素

さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ

記事を読む

[CSS] ベンダープレフィックスはどこまで必要か?

各ブラウザが独自に先行実装しているCSS3 CSS3が現在、各ブラウザでも対応状況が進み、だいぶ使

記事を読む

[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する

カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第3回]

ブログの存在すら忘れてました、僕です。 完全放置プレイだったこの連載?を再開しなきゃと思い、重

記事を読む

[CSS]印刷用CSSの設定方法

印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第4回]

完全に放置してました、僕です。 別に忘れていた訳じゃないんですが、時間がありませんでした。

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。
PAGE TOP ↑