タグ

擬似要素に関するmasakaz77のブックマーク (2)

  • CSSの疑似要素と疑似クラスの違いを明確に |https://wp.yat-net.com/name

    ちょっとわかりづらい疑似要素と疑似クラスの違いについてまとめました。 疑似要素、疑似クラスの記述は、css2までは:beforeのようにコロンが一つだったのですが、css3になってから、疑似要素は::beforeというようにコロンを2つつけるようになり、疑似要素と疑似クラスを識別するようになりました。(疑似クラスは以前と同じく:は一つで記述します。) 疑似要素と疑似クラスはぱっと見て違いがわかりづらいですよね。分けるとこのようになります。 疑似要素 文章の1文字目、1行目など、要素の一部に対して影響を与える事ができるのが疑似要素になります。前述の通り:(コロン)は2つつけます。 ::before ::after ::first-letter ::first-line ::selection 例えば とすれば、指定した要素の最初の文字だけ、色が変わるので、要素の一部に対して影響をあたえるとい

    CSSの疑似要素と疑似クラスの違いを明確に |https://wp.yat-net.com/name
  • floatを解除する手法のclearfix と 次世代のレイアウトの話

    floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな

    floatを解除する手法のclearfix と 次世代のレイアウトの話
  • 1