![http://blog.mips-lab.com/2016/05/02/custom2/](https://cdn-ak-scissors.b.st-hatena.com/image/square/a835426a75da9cc1d3fb9b9f60c9780e21ce98c5/height=288;version=1;width=512/http%3A%2F%2Fblog.mips-lab.com%2Fwp-content%2Fuploads%2F2016%2F05%2Fcustom2-3.png)
最近は、CSSというとCSS3にクローズアップされることが多いのですが、今回は、CSS2より追加された「counter(カウンタ)」の着目してみました。 CSSの「counter(カウンタ)」を使用すると連番などの自動ナンバリングの機能を実装することができます。 「1」「2」「3」「4」のような一般的なナンバリングをはじめ、「1.1.」「1.2.」「1.3.」「2.1.」のような章や節を表す形での実装、さらには「第1章」「第2章」「第3章」という書き出しをつけることができます。 さまざまな用途に応用ができそうな機能ですね。 「counter(カウンタ)」は、すべての要素において:before 擬似要素及び:after 擬似要素に当てた content プロパティで実装することができます。 ※IE8よりサポート、IE6, 7は未サポート さっそくサンプルを作りながら実装方法をまとめてみます。
どうも下山です。 忙しくなるとこのブログの存在を忘れるのが特技です。 いえ、特技と言うほどのものではありません。 今回はol、段落番号に括弧をつけてやろうとやっきになってアーデモナイコーデモナイってやった挙句のまとめです。 html sassSee the Pen LpGzzy by mitsuki sagayama (@sagayama) on CodePen. sassそのままだと見慣れない方もいると思うからcssにコンパイルすると↓ ol li { list-style-type:none; counter-increment:cnt; } ol li:before { content:"(" counter(cnt) ")"; margin-right:0.5em; }それでは見慣れないプロパティもありますので解説していきます。 counter-incrementって?counte
counter-resetプロパティは、要素の連番(カウンタ)の値をリセットする際に使用します。 counter-resetプロパティを適用した要素が現われるたびに、指定した名前のカウンタの値が0にリセットされます。 また、カウンタ名の後にスペース区切りで整数値を指定すると、カウンタの値がその数にリセットされます。 ■値 none カウンタの値をリセットしない(初期値) カウンタ名 指定した名前のカウンタの値が0にリセットされる カウンタ名 整数値 半角スペースで区切って整数値を指定すると、カウンタの値がその数にリセットされる スタイルシート部分は外部ファイル(sample.css)に記述。 dt.sample1:before { counter-increment:sample; content:counter(sample) "位 "; } h3 {counter-reset:samp
あれ?どうやるんだっけな?となるコトが多いので、勉強がてら記事に。 olを使って連番付きのリストを作ろうと思った場合、数字部分が気に入らない事があります。 ブログパーツで言うと、人気記事のマークアップで、ランキングなんかを作るときに、数字部分にアプローチできれば、捗ること請け合いですね。 と思って、さあ、CSSで装飾や!ってなっても、あれolの数字って、どうやって弄ったらいいんだ?list-style??みたいになります。 じゃあ、本腰入れてolの数字をカスタマイズしてやろう!と、イマココって感じです。 olとは?まずはolってなによ?という話しですが、簡単に言えば「数字付きリスト」をマークアップするためのHTMLですね。 <ol> <li>こんな</li> <li>感じで</li> <li>数字付き!</li> </ol> こんな感じで数字付き!といった具合に。 ブログやサイトのUIを作
番号付きリストの「ol」を使う場合、普段は1から順に番号を振ることが多いですが、稀に途中から順番に数字を振りたい場合もありますよね。 例えばランキング圏外のものを10個紹介する際に11~20位を表示させたい、といったケースもあるでしょう。 というわけで、任意の数字から始めるための書き方と、ついでに並び順を逆にする方法もご紹介します。
list-styleで括弧付の数字を振りたいときという記事を見まして、まさにこれがやりたかったわけですが、応用もできるよ、ということで、h2タグを使った例が紹介されていました。 h2 { counter-increment : chapter ; } h2:before { content : "第" counter(chapter) "条" ; } これって俺の好きなdl, dt, ddで使えるやん!と思った次第です。 なんでこれを使いたくなったかというと、利用規約とかを整形している最中だったのですが、番号振るのが億劫だったのです。 以下、sassです。dtが出る度に自動で条を振ってくれます。括弧が必要だったら付ける程度で。 あと、dd要素内でol liの入れ子があったらよきに計らってくれます。 入れ子先で括弧付き番号を振ってくれます。便利。 dl { dt { font-weight:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く