意外に知らなかったCSSの「content」プロパティの使い方
cssの疑似要素のbefore,afterはちらほら使われており、よく使用されているのが、clearfixだと思います。
僕も、clearfixでしか実際は使った事がないので、つい最近までこの使い方を全部知りませんでした。
そもそも、このbefore,afterの疑似要素がIE8からの対応だったので、
正直クライアント案件では使いづらい所がありました。
でも、もうIE7以下の対応はなくなってきたので、堂々と使えるのかなと思っています。
さっそくですが、contentの使い方を書いていきます。
- テキスト
- 画像/ファイル
- プロパティの値
- カウンター
- quoteを入れる
- 【ちょっと番外】
content,beforeを使って吹き出しを作ってみる
テキスト
ここには単純なテキストを入れる事ができます。
数値文字もいれることができますが、16進数で、contentに書く際は文字を少し変える必要があります。
「＆を\に変更」「#とxを削る」「セミコロンを削除」
です。
数値文字に関しては、以下のリンクをご覧下さい。
HTML数値文字参照変換
画像/ファイル
背景画像を指定するのと同じようにurl()で画像を設定出来ます。
プロパティの値
これは、href,alt,titleに入っている内容を表示できます。
attrで指定します。
|
1 | content: attr(href); |
カウンター
連番をつけることができます。
counter-incrementで変数を設定し、
番号をつけたい箇所に、counter(number)を設定します。
counter-resetによって、番号をまた最初からにリセットできます。
|
1 2 3 | counter-increment: number; content: counter(number) "番 "; counter-reset: number; |
quoteを入れる
quotesで設定したものをopen-quote,close-quoteで設定します。
|
1 2 3 | quotes: "【" "】" ; content: open-quote; content: close-quote; |
デモも作成しています。
デモでのhtmlとcssは以下になります。
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <h3>テキスト</h3> <div class="box"> <p class="text">株式会社です。</p> </div> <h3>画像/ファイル</h3> <div class="box"> <p class="img">先頭に画像が入ります。</p> </div> <h3>プロパティの値</h3> <div class="box"> <a href="/" title="スターフィールド株式会社" class="link">のHPはこちら</a> </div> <h3>カウンター</h3> <div class="box"> <ul class="counter"> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> </ul> </div> <h3>quoteを入れる</h3> <div class="box"> <div class="address"> スターフィールド株式会社<br> 〒169-0075<br> 東京都新宿区高田馬場1-25-32 108ビル 3F</div> </div> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | .text:before { content: "スターフィールド"; } .text:after { content:"\00bb,\00ab;"; } .img:before { content: url("../star.png"); } .link:before { content: attr(title); } .link:after { content: attr(href); } .counter li{ counter-increment: number; } .counter li:before { content: counter(number) "番 "; } .address { quotes: "【" "】" ; } .address:before { content: open-quote; } .address:after { content: close-quote; } |
ちょっと番外として、疑似要素とcontentを利用して、cssで吹き出しのデザインを実装することもできます。
html
|
1 2 3 | <div class="fukidashi"> cssを使った吹き出し </div> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .fukidashi{ background-color: #fff; display: block; -webkit-border-radius: 6px; border-radius: 6px; padding: 2%; position: relative; width: 50%; } .fukidashi:after { content: ' '; height: 0; position: absolute; width: 0; border-left: 10px solid transparent; border-top: 10px solid #fff; border-right: 10px solid transparent; left: 10%; top: 100%; } |
ここまで説明しましたが、番外で説明したような今までになかった便利な使い方が今後もっと出てくるかと思います。
Author Profile
スターフィールド編集部
SHARE
