CSSのcontentプロパティが面白い♪

最近になってcontentプロパティの使い方がわかったので載せておきます。CSSのcontentプロパティってそもそもほぼ使わないんですよね。まあ、clearfixぐらいしか使わないです。で、あんまり意味も知らなかったですけど、こんなことができるんだって思ったんで忘れないように書いておきます。

---

スポンサーリンク

---

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

有名なclearfixにcontentありますけど意味わかってなかったです。
そもそもcontentは要素の前後に内容（文字列や画像等）を追加するプロパティだったんですね。
疑似要素の :before か :after と組み合わせて使用しないとダメなんです。
clearfixのcontentはなんでピリオド.なのかというとネットスケープが空やスペースだとクリアできなようです。
今となっては1px画像でもよさそうですね。
content: url(cleafix.gif);

contentプロパティ使い方—attr編—

私が驚いたのはこのattrの値なんです。これってjQueryみたいに要素追加してると思いました。
まず例えです。以下のスタイルシートを設定します。

HTMLにはこんな感じで書きます。

これ
あれ
それ

• thisこれtext
• thatあれtest
• itそれsample

のように表示されます。前後に指定した要素が表示されるんですね。

その他

HTML

リンク

リンクこれはサンプルですよ
の様になるんです。

こんな使い方があるなんて知らなかったな～

contentプロパティ使い方—counter編—

このcounterはすごい！自動で連番振ってくれます。
olみたいな感じ。
counter(<識別子>, [プロパティの値]);
counters(<識別子>, <文字列>, [プロパティの値]);

HTML

売れ筋ランキング

ノートパソコン
やはり一台は持っておきたいところ
携帯電話
スマートフォン人気で上位に食い込む

家電ランキング

炊飯器
極め炊きに勝るものなし！
電子レンジ
電子レンジがお料理しちゃう
掃除機
静音性と吸引力の高い掃除機が人気！

売れ筋ランキング

第1位ノートパソコン

やはり一台は持っておきたいところ

第2位携帯電話

スマートフォン人気で上位に食い込む

家電ランキング

第1位炊飯器

極め炊きに勝るものなし！

第2位電子レンジ

電子レンジがお料理しちゃう

第3位掃除機

静音性と吸引力の高い掃除機が人気！

次はcountersです。これは引数に文字列を入れることができ、ネストにした場合に有効です。

HTML

リスト
リスト

リスト

リスト
リスト
リスト


リスト
リスト


リスト
リスト
リスト
リスト

• 1.リスト
• 2.リスト
  • 2.1.リスト
    • 2.1.1.リスト
    • 2.1.2.リスト
    • 2.1.3.リスト
  • 2.2.リスト
  • 2.3.リスト
• 3.リスト
• 4.リスト
• 5.リスト
• 6.リスト

こんな感じ。
便利ですよね。これは使えるのでどんどん使っていこうー。

その他open-quote,close-quote,no-open-quote,no-close-quotなどがあります。カッコなどを付け足したりするのに有効です。詳しくは調べてみてください。

以上です。