Blog

意外に知らなかったCSSの「content」プロパティの使い方

2014.07.29Cat:webデザイン デザイナー

cssの疑似要素のbefore,afterはちらほら使われており、よく使用されているのが、clearfixだと思います。

僕も、clearfixでしか実際は使った事がないので、つい最近までこの使い方を全部知りませんでした。

そもそも、このbefore,afterの疑似要素がIE8からの対応だったので、
正直クライアント案件では使いづらい所がありました。

でも、もうIE7以下の対応はなくなってきたので、堂々と使えるのかなと思っています。

さっそくですが、contentの使い方を書いていきます。

  • テキスト
  • 画像/ファイル
  • プロパティの値
  • カウンター
  • quoteを入れる
  • 【ちょっと番外】
    content,beforeを使って吹き出しを作ってみる

テキスト

ここには単純なテキストを入れる事ができます。
数値文字もいれることができますが、16進数で、contentに書く際は文字を少し変える必要があります。

「&を\に変更」「#とxを削る」「セミコロンを削除」

です。

数値文字に関しては、以下のリンクをご覧下さい。
HTML数値文字参照変換

画像/ファイル

背景画像を指定するのと同じようにurl()で画像を設定出来ます。

プロパティの値

これは、href,alt,titleに入っている内容を表示できます。
attrで指定します。

カウンター

連番をつけることができます。
counter-incrementで変数を設定し、
番号をつけたい箇所に、counter(number)を設定します。
counter-resetによって、番号をまた最初からにリセットできます。

quoteを入れる

quotesで設定したものをopen-quote,close-quoteで設定します。

デモも作成しています。

DEMO

デモでのhtmlとcssは以下になります。

html

css

ちょっと番外として、疑似要素とcontentを利用して、cssで吹き出しのデザインを実装することもできます。

html

css

ここまで説明しましたが、番外で説明したような今までになかった便利な使い方が今後もっと出てくるかと思います。

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ