リストにCSSカウンターで数字を表示して全体的にグラデーションカラーにする | かちびと.net

2019/06/10 8 users グラデーションカラー padding Flex center

Result CSSカウンターで加えた数字をグラデーションに、というもの スクロールしても色が変わらず維持できます だからどうしたと言われたらまぁ言い返す言葉も無いんですが css /* リストのスタイル*/ li { counter-increment: index; display: flex; align-items: center; padding: 12px 0; box-sizing: border-box; } ... 続きを読む

CSSのcounter-incrementを使ってリスト以外に番号を付ける方法｜Webpark

2013/02/18 98 users Webpark プロパティ CSSプロパティ CSS サンプル

あまり使っているのを見たことがないマイナーなCSSプロパティ「counter-increment」を使ったサンプルを紹介します。 「counter-increment」というプロパティを初めて聞いたという方も多いかもしれません。「counter-increment」は、サンプルのように番号を自動的に付けるときに使われます。リスト（list-style-type: decimal）のような感じですね... 続きを読む

CSS3でシャレオツなリストを作るチュートリアル:phpspot開発日誌

2012/06/22 179 users チュートリアル シャレオツ phpspot開発日誌 CSS3

CSS3 ordered list styles - RedTeamDesign CSS3でシャレオツなリストを作るチュートリアル。 list-styleを無効にしてブラウザ標準の数字部分をやめて、content: counter(li), counter-increment といったプロパティを使って数値部分を独自にデザインしています。 リスト部分の数字のデザインはなかなか難しかったと個人的に記... 続きを読む

[CSS]ol要素に頼らないナンバリングするスタイルシートのテクニック | コリス

2011/12/06 74 users コリス CSS ol要素 ナンバリング dl要素

下記は各ポイントを意訳したものです。 ol要素を使用しないでナンバリングをするコンテンツは、例えばデモにあるようなFAQのリストです。 このFAQのリストは、dl要素で実装されています。 dl要素でナンバリングしたデモページ ※実装は、下記で紹介。 ナンバリングの実装には擬似要素と「counter-increment」を利用しており、アイデアの元となったのは「Styling ordered lis... 続きを読む