[CSS]順序付きリスト、ol要素を丸数字で実装するスタイルシートのテクニック -spanや①は無し | コリス

2016/12/06 111 users コリス span CSS HTML テクニック

Webで調べると、ol要素を丸数字で実装する時はspanとか①②③とかを使うしかないように思えますが、クリーンなHTMLで数値文字参照を使わずに、丸数字を実装するスタイルシートのテクニックを紹介します。 対応ブラウザはす ...記事の続きを読む 続きを読む

[CSS]ol要素を美しくスタイルし、アニメーションをちょっとだけ加えるテクニック | コリス

2012/02/19 97 users コリス 矩形 ポパー アロー Safari

デモ 実装 対応ブラウザ デモ デモはIE9, Firefox, Chrome, Safariでご覧ください。 擬似要素のアニメーションは、Firefoxのみサポートしています。 デモページ：Demo 1 数字を矩形にスタイルし、ホバーで数字からアローが伸びます。 ※アニメーションはFirefoxのみです。 実装 HTML HTMLは非常にシンプルで、ol要素を入れ子にして実装するだけです。 <o... 続きを読む

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

2011/12/06 74 users コリス counter-increment CSS dl要素

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

[CSS]順序付きリストol要素を視覚的に美しくスタイルするチュートリアル | コリス

2011/05/26 152 users ブレーン キャプチャ コリス HTML チュートリアル

プレーンな状態で割とスタイルされるol要素を視覚的に美しくするスタイルシートのチュートリアルを紹介します。 Firefox4でのキャプチャ 順序付きリストを美しくスタイルするチュートリアル HTML HTMLは非常にシンプルなol要素で実装します。 List item one The second item on the list Number... 続きを読む

[CSS]パンくずの実装はどのようにするのがよいかの考察 | コリス

2010/11/10 396 users CSS-Tricks コリス ul要素 チュートリアル CSS

パンくずは何要素で実装していますか？　ul要素？　ol要素？　p要素？ パンくずをどのように実装するのがよいかの考察を紹介します。 先日紹介したCSS-Tricksの「画像を使用しないでApple風のパンくずを作成するチュートリアル」に寄せられたコメントから考察されたもので、各ポイントを意訳したものです。 パンくずのマークアップの考察のきっかけ -ul要素で同列配置 パンくずのマークアップの考察 ... 続きを読む