東京のWeb制作会社LIGLIGならできるおもしろいこと。意外と知らない!疑似要素と疑似クラスでできること2013.04.17意外と知らない!疑似要素と疑似クラスでできることハルエ2013.04.17Web制作シェアこんにちは、デザイナーのはるえです。疑似要素と疑似クラスってありますよね。私がCSSを覚えたてのときは「は?何これ」って感じで、得体の知れないものを見るような目で使ってました。「この2つって何が違うの?」「どれが疑似要素で疑似クラス?」「どういうときに使うの?」と何かと敬遠しがちな人も多いと思います。この2つを使うことでできることがぐんと広がるので、今では恐縮しながらありがたく使わせていただいております。疑似要素とは疑似要素とは、要素内の特定の文字や行に対してスタイルを指定したりするものです。使われる疑似要素:before{}:after{}:first-letter{}疑似要素の中でも特に「:before」と「:after」を極めると、CSSだけのデザインの表現幅が一気に広がります。LIGブログでも使用している「blockquote」やカテゴリーのタグなんかもそうですね。その他にもできることがたくさんあります!こちらは後で詳しく紹介させていただきます。疑似クラスとは疑似クラスとは、要素が特定の状態にある場合にスタイルを指定するものです。使われる疑似クラス最も多く使われているであろう、おなじみのaタグに使うやつが疑似クラスです。a:link{}a:hover{}a:visited{}またnth-child(n)も覚えておくとなにかと便利ではないでしょうか。この疑似クラスは指定した要素内のn番目の子要素にスタイルを適用することができます。ZERO」さんの一覧表が参考になります。ZEROhttp://zero.css-happylife.com/selectors/※CSS3になってから一気にセレクタの種類が増えた分、IE7/8未対応の疑似要素・疑似クラスも含まれていますので、その点ご注意していお使いください。最近は画像を使わずにCSS3だけで装飾できることが増えてきたので、頻繁に使われている方も多いと思います。:before疑似要素と:after疑似要素でよく使われるのが「content」プロパティを用いた方法です。対象となる要素の前後に指定した内容(文字列や画像、URLなど)を追加することができます。スタイルシートリファレンスhttp://www.htmq.com/style/content.shtml:beforeと:afterのスゴ技「吹き出し」よく見るこういった吹き出しも、疑似クラスの:afterとborderプロパティを使うことでで簡単に作ることができます。Gallagher」さんの下記リンク先ページでは、様々な種類の吹き出しデザインを見ることができます。CSS-TRICKShttp://css-tricks.com/examples/ShapesOfCSS/:beforeと:afterのスゴ技「アイコン」こんなアイコンまで:beforeと:afterだけで画像は一切使わずに作成されています。Gallagher」さんより。Gallagherhttp://nicolasgallagher.com/pure-css-gui-icons/:beforeと:afterのスゴ技「リボン」よく見かけますよね。みんな大好きリボンです!でもこのリボン・・・自分で書こうとすると結構面倒くさいです。Tools」というCSSジェネレーターがありますので、こちらを使ってみてもいいかもしれません。Toolshttp://livetools.uiparade.com/:beforeと:afterのスゴ技「olリストの番号にスタイルを設定」:before要素を使用することで、olリストの番号部分にスタイルを適用することができます。Streethttp://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/:beforeと:afterのスゴ技「ツールチップ」HTML5のデータ属性を利用することで、JSを使わなくてもCSSだけで簡単にツールチップを作成することができます。DEMOマウスをのせるとツールチップが表示されます。1;}まとめ今回紹介させていただいた疑似要素と疑似クラスでできることは、画像を使ったりJS組めばできてしまうことなので、中々覚える機会ってないと思うんです。私の場合あまり参考書とかは見ずにソースを見て回って覚えることが多いのですが、最近自分の知らない疑似要素や疑似クラスを使ってるサイトが多くなって来たので、これを機に調べてみました。長いソースになっちゃう場合もあるので、まだまだ実践的ではないものもありますが、テクニックだけでも身に付けておくとあらゆる場面で活かせるのではないでしょうか。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。