擬似要素と擬似クラスの違いやダブルコロンとシングルコロンの話
私のように趣味でWebサイト作成をしていると基礎が抜け落ちていたりするので復習を兼ねて擬似要素と擬似クラスの違いについて考えてみました。 擬似クラス（Pseudo-classes） 擬似クラスには次のようなものがあります。何気なく使っていますが、擬似クラスという名称を知らない方も多いのではないでしょうか。 :link :visited :hover :active で、擬似クラスはCSS3で大幅に追加されました。 E:nth-child(n) ･･･ n番目の子要素に適用 E:nth-of-type(n) ･･･ n番目にあるE要素に適用 E:first-of-type ･･･ 兄弟関係にあるE要素で最初のものに適用 この他にもまだまだあります。これらの詳しい内容については「保存版！CSS3セレクタの説明書｜Webpark」をご参考に。 なぜ擬似クラスという名称なのか 例えば、以下のような
擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
