Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
17
Help us understand the problem. What is going on with this article?
@fumi_nagaoka

<ol>タグをcssで装飾する

More than 3 years have passed since last update.

<ol>タグ(番号付きリスト)をcssで装飾する方法。

仕組み

基本はこれ。

scss
ol {
  counter-reset: counter-name;

  li { //元のスタイルをリセットする
    margin: 0; 
    list-style: none;
  }

  li:before {
    counter-increment: counter-name;
    content: counter(counter-name);
  }
}

counter-name のところは、自分で好きな名前をつけてください。

  1. counter-increment: で指定したカウンターの数を1増やして、
  2. content: coounter() でその数を表示して、
  3. counter-reset: でカウンターをリセットする

というようなことが可能らしいです。

上記cssを適用した<ol>は、だいたいこんな表示。

1あああああ
2いいいいい
3うううううう

デザインする

scss
ol {
  counter-reset: counter-name;

  li {
    margin: 0; 
    list-style: none;
    position: relative;
    padding-left: 20px;
  }

  li:before {
    counter-increment: counter-name;
    content: counter(counter-name) ".";
    color: #269fdb;
    position: absolute;
    left: 0;
 }
}

↓↓

スクリーンショット 2016-09-21 20.06.14.png

ちなみに、数字の後ろや前に文字を追加したい場合、
content: "第" counter(counter-name) "位";
これで 第3位 と表示されます。

もっとデザインする

border-radiusなども組み合わせていけば、色んなデザインがcssで作れます。
ホバーエフェクトなども気軽に使えるので(olで使うタイミングがあるか謎ですが)覚えておきたいです。

スクリーンショット 2016-09-21 20.19.22.png
(コードは間違えて消しました)

contentには他にも諸々あるようなので、後日調査したいところですね。

17
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
visasq
ビザスクは「知見と、挑戦をつなぐ」をミッションに、世界で1番のナレッジプラットフォームをつくっています。 様々なニーズにつなぐことで、実際に経験したことで得られた知識や意見を、知見として価値最大化します。組織、世代、地域を超えて、知見を集めつなぐことで、世界中のイノベーションに貢献します。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
17
Help us understand the problem. What is going on with this article?