タグ

擬似クラスに関するnaoatsunのブックマーク (2)

  • content―スタイルシートリファレンス

    contentプロパティは、要素の直前または直後に、文字列や画像などのコンテンツを挿入する際に使用します。 contentプロパティを適用することができるのは、:before擬似要素および:after擬似要素のみです。 擬似要素(pseudo-element)とは、直訳すれば「偽りの要素」となります。 要素の一部にスタイルを適用するために、擬似的に設定される「要素のようなもの」のことです。 :before擬似要素および:after擬似要素は、要素の直前および直後に、文字列や画像などのコンテンツ(内容)を挿入するために擬似的に設定されます。 ■値 文字列 挿入する文字列を「"」または「'」で括って指定します。 URI(URL)でファイルを指定 URI(URL)で画像や音声等のファイルを指定します。 カウンタ ここでいうカウンタとは要素内容に自動連番をつけるということです。counter()関

  • コピペだけ!CSSでWEBデザインの幅が広がる便利テクニック集 | Code部

    なるべくスマートなソースで効率良く実装したいの開発者というもの。そんな方のためにCSSだけで様々なデザインができてしまう疑似要素と疑似クラスの活用方法をご紹介致します!吹き出しデザインなどのよく使うテクニックも紹介していますので、ぜひご覧るださい!前回の『知らなきゃ損!?リンクの色をお洒落に変えるCSSテクニック!』では擬似要素と擬似クラスの基的な概要と使用例をご紹介しました。今回の実践編では、擬似要素と擬似クラスを応用した実践的なデザイン&コーディングテクニックをご紹介していきますね!実践編では、基礎編でご紹介できなかったプロパティも登場します。どれも便利なプロパティなので、是非使い方を抑えて頂ければと思いつつ、それでは早速、実践的な使用例をご紹介していきますね。 擬似要素や擬似クラスの実践的な使用例 色違いのリスト 擬似クラス:nth-child()を使ってリストの偶数行と奇数行のス

    コピペだけ!CSSでWEBデザインの幅が広がる便利テクニック集 | Code部
  • 1