[CSS] CSSで作るリストのアイコン
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
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
関連記事
-
[HTML] 初心者を脱却するためのHTMLの心構え!
デザインを見たら、まずレイアウトの方法をイメージしよう 僕は、基本的にデザインを頂いたときに、すぐ
-
[jQuery] フォーカスポイントを決めて、そこを中心に切り抜くプラグインFocusPoint
FocusPoint FocusPointは、レスポンシブにクロップ(切り抜き)するjQueryの
-
[jQuery] クリックしたところから波紋が広がるプラグイン!
Rippler 以前にも波紋のプラグインを紹介しましたが、今回も新たなプラグインを紹介しま
-
[jQuery] 背景画像を画面いっぱいにするプラグイン
背景に、画像をいっぱいに広げて表示したいときってありますよね。 ちょうど、そういう必要があったため
-
[jQuery]背景画像にぼかしを入れるプラグイン
Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画
-
[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する
カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_
-
[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素
さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ
-
[WordPress] 自作プラグインの設定など
プラグインを自作してみる WordPressでプラグインを作成する際の設定(フック)などをまとめて
-
[javascript] Google Maps javaScript API v3の使い方(応用編:マーカーを変更する)
いろんなことが出来るようになったv3 昨日、基本編を書きましたが、今回は応用編です。 v3に
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第3回]
ブログの存在すら忘れてました、僕です。 完全放置プレイだったこの連載?を再開しなきゃと思い、重