1. fumi_nagaoka

    Posted

    fumi_nagaoka
Changes in title
+<ol>タグをcssで装飾する
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,78 @@
+`<ol>`タグ(番号付きリスト)をcssで装飾する方法。
+
+## 仕組み
+
+基本はこれ。
+
+```scss: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: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](https://qiita-image-store.s3.amazonaws.com/0/45187/348d3ac3-c7ab-2427-b155-1dee8273d878.png)
+
+ちなみに、数字の後ろや前に文字を追加したい場合、
+```content: "第" counter(counter-name) "位";```
+これで ```第3位 ``` と表示されます。
+
+### もっとデザインする
+
+border-radiusなども組み合わせていけば、色んなデザインがcssで作れます。
+ホバーエフェクトなども気軽に使えるので(olで使うタイミングがあるか謎ですが)覚えておきたいです。
+
+![スクリーンショット 2016-09-21 20.19.22.png](https://qiita-image-store.s3.amazonaws.com/0/45187/cf9a410d-5037-914a-1fca-83167defffd4.png)
+(コードは間違えて消しました)
+
+`content`には他にも諸々あるようなので、後日調査したいところですね。