カテゴリー WEB

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

by 管理人コメントをどうぞ (CSSのcontentプロパティが面白い♪)

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

スポンサーリンク

1
2
3
4
5
6
7
8
9
10
11
12

.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みたいに要素追加してると思いました。
まず例えです。以下のスタイルシートを設定します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<style type="text/css">
ul{
    list-style: none;			
}
li{
    display: block;
    font-style: normal;
    margin-left: 20px;
    width: 140px;
}
li:before {
    content: attr(id);
}
li:after {
    content: attr(class);
}
</style>

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

1
2
3
4
5

<ul>
<li id="this" class="text">これ</li>
<li id="that" class="test">あれ</li>
<li id="it" class="sample">それ</li>
</ul>
  • thisこれtext
  • thatあれtest
  • itそれsample

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

その他

1
2
3
4
5

<style type="text/css">
a:after {
    content: attr(title);
}
</style>

HTML

1

<a href="#" title="これはサンプルですよ">リンク</a>

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<style type="text/css">
.rank {
    counter-increment : rank;
    color : #00F;
}
.rank:before {
    content : "第" counter(rank) "位";
    font-size : 14px;
    color : #F00;
}
h2 {
    counter-reset:rank;
}
</style>

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<h2>売れ筋ランキング</h2>
<dl>
<dt class="rank">ノートパソコン</dt>
<dd>やはり一台は持っておきたいところ</dd>
<dt class="rank">携帯電話</dt>
<dd>スマートフォン人気で上位に食い込む</dd>
</dl>
<h2>家電ランキング</h2>
<dl>
<dt class="rank">炊飯器</dt>
<dd>極め炊きに勝るものなし！</dd>
<dt class="rank">電子レンジ</dt>
<dd>電子レンジがお料理しちゃう</dd>
<dt class="rank">掃除機</dt>
<dd>静音性と吸引力の高い掃除機が人気！</dd>
</dl>

売れ筋ランキング

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

家電ランキング

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

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

1
2
3
4
5
6
7
8
9
10
11

<style type="text/css">
ol { 
    counter-reset: list 
}
li {
    display: block 
}
li:before { 
    content: counters(list, ".") ". "; counter-increment: list 
}
</style>

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

 
 
<ol>
<li>リスト</li>
<li>リスト
<ol>
<li>リスト
<ol>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ol>
</li>
<li>リスト</li>
<li>リスト</li>
</ol>
</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ol>
  • 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などがあります。カッコなどを付け足したりするのに有効です。詳しくは調べてみてください。

以上です。

このエントリーをはてなブックマークに追加
Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です