最近になって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位掃除機
- 静音性と吸引力の高い掃除機が人気！
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
- 1.リスト
- 2.リスト
- 2.1.リスト
- 2.1.1.リスト
- 2.1.2.リスト
- 2.1.3.リスト
- 2.2.リスト
- 2.3.リスト
- 2.1.リスト
- 3.リスト
- 4.リスト
- 5.リスト
- 6.リスト
家電ランキング
次はcountersです。これは引数に文字列を入れることができ、ネストにした場合に有効です。
HTML
こんな感じ。
便利ですよね。これは使えるのでどんどん使っていこうー。
その他open-quote,close-quote,no-open-quote,no-close-quotなどがあります。カッコなどを付け足したりするのに有効です。詳しくは調べてみてください。
以上です。