【CSS】CSSの小技テクニックをご紹介
文頭に数字を連番で自動出力するCSS
文頭に数字を連番で自動出力してくれるcounter-incrementというプロパティを紹介します。
| counter-reset:(カウンター名) (リセット値); | カウンターをリセットして特定の番号から表示することができます。 |
|---|---|
| counter-increment:(カウンター名); | 連番で数字が自動表示されます。 |
使い方ですが、まず親となるセレクタに
counter-reset: number;
を付与します。
※こちらの「number」ですが名前は何でも構いません。
そして、子要素の疑似要素に
counter-increment: number;
content: counter(number)”位”;
を付与してください。
[HTML]
|
1
2
3
4
5
6
|
<p>すきな果物ランキング</p>
<div class=“count-box”>
<div>リンゴ</div>
<div>バナナ</div>
<div>イチゴ</div>
</div>
|
[CSS]
|
1
2
3
4
5
6
7
8
9
|
.count–box {
counter–reset: number;
}
.count–box div:before {
counter–increment: number;
content: counter(number)“位”;
padding–right: 5px;
}
|
【使用例】
リストを作成する際に追加するだけで自動で数字が出力されるので、ヒューマンエラーの防止に繋がります。
2テキストの大文字・小文字・全角文字を変換するCSS
テキストの形式をCSSで自由に変換することができるtext-transformというプロパティを紹介します。
| text-transform: capitalize; | 単語の先頭を大文字に変換します。 |
|---|
【原文】
lorem ipsum dolor sit amet, consectetur adipiscing elit,
【指定後】
Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit,
| text-transform: uppercase; | 全ての文字を大文字に変換します。 |
|---|
【原文】
lorem ipsum dolor sit amet, consectetur adipiscing elit,
【指定後】
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT,
| text-transform: lowercase; | 全ての文字を小文字に変換します。 |
|---|
【原文】
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT,
【指定後】
lorem ipsum dolor sit amet, consectetur adipiscing elit,
【使用例】
WPなどのCMS化した箇所で指定された形式で出力させたい場合などうっかりミスを防ぐため保険としてこちらのプロパティを指定してあげると親切かと思われます。
