(個人的な)Graceful Degradationへのシフト

webcre8はこれまでIE対応の必要な環境で仕事をしていた為あまりIE6,7で使えない技術には興味が湧かなかったんですが、(ずっと進んでない)ブログのリニューアルのことを考えていると、やはりどうしても擬似要素や過去ブラウザを無視(ざっくり対応)した形でのCSS3の使い方に魅力を感じてしまうわけです。

つまりプログレッシブ・エンハンスメント→グレースフル・デグラデーション的な考え方に気持ちがシフトしているんですね。そしてどうせCSS3を使用してディティールに凝るのなら、「空divや重ね使いで無理矢理作っていたものをさっくり作れる」ことに驚くより、「フォールバックを意識したコーディングをして過去ブラウザにはあっさりコンテンツを見せる」方がやっぱりいいなーと感じているわけです。

とりあえず擬似要素で

そこで今回は自分が擬似要素を使ってやりたかったことを実現しつつ、その他で擬似要素で出来る面白そうな(かつ実践的だと感じた)表現を色々紹介してみようと思います。擬似要素、と言いつつ殆ど::beforeと::afterなんですが…いやまじ便利ですって::beforeと::after。超自由。

擬似要素とは

では軽く擬似要素の説明をしておきましょう。不要な方は次の章へ！

擬似要素は擬似的な要素を作る

擬似要素は擬似的な要素を作る…そのまんまですねｗ 吐き出されたソースを見てみても、擬似要素によって生成された要素は書かれていません。FirefoxだとアドオンのFirebugやコンテキストメニューの要素を調査、Google Chromeならデベロッパーツール等で存在を確認することが出来ます。

面白いのは、::beforeや::after等のcontentによって挿入されたテキストは、選択してコピーしようとしても出来ないことです。コピペしようとしたとき、「こいつ…擬似か！！」って気分になりますｗ

ちなみに私の記憶が確かならばFirefox3.6ではこれを使った場合ちゃんと擬似要素が表示されますが、なぜか普通のテキストのように選択できてしまってましたw選択できるのはIE8でした、うろ覚えですみません＞＜

混同されがちな擬似クラスとの区別

擬似要素だったかクラスだったかよくわかんなくなります(あんまり使ってこなかったので…)。まあ擬似クラスはクラスなのでクラスを指定する代わりに使ったりするものなわけですが、CSS3から増えたものはよくわかんないのが多いですね…。

でも単純な話し、擬似要素は今

• ::before
• ::after
• ::first-line
• ::first-letter

の四つしかないので、これを覚えてしまった方が早いでしょう。後のは全部擬似クラスですｗ

ちなみに擬似クラスの種類についてはこちらで見られます。

セレクタ｜CSS HappyLife ZERO

一応他にも過去に提案された擬似要素があるみたいですが、どれも一般的な実装に至っていません。見てるのは楽しいですけど、まあ普通の人は気にしないで良いでしょう…。

text-shadow と ::selection 擬似要素 | Unformed Building

疑似要素 – CSS3 Pre-Reference ～ CSS3のリファレンスサイト ～

:afterと::afterの違い

実は前項も含め、この辺は記事を書いている間の資料探しでがっしり書いてくれているものを見かけてしまったのであまり書く必要はないなーと…ｗ

CSSの疑似要素と疑似クラスをもう一度最初から | 3streamer blog

ざっくり言うと、CSS2までは:after、CSS3からは::afterと言う事です。擬似クラスは:hover等のままです。

擬似要素で出来ること：clearfix

ではここからどういう用途に擬似要素を使うのか見ていきましょう。

floatを使ったときに出る表示の狂い(floatを使うと親要素の高さがなくなることによって起きます)を解消する為に作られた一番有名なCSSスニペット、clearfixには::afterが使われています。どういう処理が行われているのか知らない人も少なくないと思いますが、ざっくり言うとclearfixは、floatを終わらせたいコンテンツの終わりに見えないブロック要素を挿入してclear:bothすることでfloatを解除するものです。

webcre8は最近は

float解除の決定版。clearfixを考えたら、進化した。 : Web Design KOJIKA17

を使っていますし、

overflow:hiddenでfloatをclear – とその理由 | Takazudo Clipping*

と言う方法もあります。

擬似要素で出来ること：複数背景

複数の背景画像を背景に設定することでより柔軟なエレメントの表現ができます。実践的な例で言うと、リピートした背景と別にワンポイントの背景をつけたり、エレメントの上下に画像の枠をつけるなどです。やり方は以下の記事で紹介されています。

[CSS]一つの要素に背景やボーダーをマルチプルに配置する実用的なテクニック | コリス

CSS3なら単純に一つのエレメントに複数の背景を指定できますが、この方法を使えばCSS3でなくても同じことが再現できることになります。

擬似要素で出来ること：複数ボーダー

上記の記事にマルチプルボーダーのやり方も書かれていますが、地味にwebcre8はこれがやりたくて。ボーダーは背景と違い複数指定ができませんから、この方法を使うしかありませんね。擬似要素なら単純にみてくれの部分のみを強化してくれて、非常にスマート！

WEBCRE8.jpの記事の囲みなどは画像で作っていましたが、擬似要素を使うことで完全にCSSのみで代替できます。

複数ボーダーについてはこの後[CSS3]擬似要素とbox-shadowを駆使したエレメントデザインのコツ(サンプルコード付き) – WEBCRE8.jpという記事を書きました。

擬似要素で出来ること：アイコンやマーカー

エレメントの一部にアイコンを設置したり、見出しのマーカーをつけたり。これは以前なら単純に背景画像として設置していることが多かったと思いますが、アイコンを単体で使い回したい場合等、アイコンのみを別個にマークアップした方が良さそうです。

Twitter Bootstrapが採用していたアイコンをi要素でマークアップし、意味をテキストで入れておくやり方も、webcre8的には結構気に入ってます。アイコンのみでそのエレメントの説明をするUIの場合には有効です。

しかしアイコンのみでそのエレメントの意味を表すのではなくテキストエレメントの補足説明としてアイコンを置く場合、アイコンはただの装飾になるので、アイコン自体は情報を持たない方が望ましいのではないかと考えています。その場合は擬似要素で置くのが最適なんじゃないですかね。

これがどういう事かはちょっと別途記事を書きます。必ず書きます。

Demo: Pure CSS GUI icons (experimental) — Nicolas Gallagher

WebTecNote – [css] contentプロパティで挿入できるコンテンツ

最近だとこの記事もありましたね。

CSSの擬似要素を使った見出しデザイン｜Webpark

WEBCRE8.jpで実際に使ったもの

これに関しては以前[作りました]olの通し番号を丸や四角付きにするjQueryプラグイン 「orderedList.js」という記事を書いています。ol要素のリストにキレイな通し番号をつけるjQueryプラグインです。まあ実際にはちょっとCSSを書けば良い程度のものなので、手軽に使う事が出来ますよ。

擬似要素で出来ること：様々な装飾

上記の項とやることが似てはいますが、使用する意図が違います。違った形状の飾りやメタファーを用いることでビジュアル的に他の要素との差異を作りだしたり注目させる効果を生みます。以下の記事で詳細に説明されているので参照してみてはいかがでしょうか。

CSSのみ画像不要の吹き出しの作り方を若干丁寧に解説してみる | 56docブログ

擬似要素で出来ること：図形の作成

また、三角形だけでなく六茫星や五角形等、変わった形状の要素を表現する事にも擬似要素が使えます。バッジなどの表現は画像を使わないのもアリですねー。

http://css-tricks.com/examples/ShapesOfCSS/

下の方に行くほどマニアックな形状が作れますｗ

擬似要素で出来ること：ダミーテキスト

目からウロコの擬似要素の使い方。他にもこんなことやっている人っているんでしょうか。

CSS3で、ダミーテキストを簡単に表示できるのか？ (ダミーテキストが面倒くさい)｜Web Design KOJIKA17

まずjQueryの併用、そして擬似クラスも合わせて用い、テキストの入っていない要素にCSSで指定したダミーテキストを表示させます。中にテキストが入っている場合は表示させない。すごい発想。個人的には擬似要素で吹き出しとか三角形を作ることが出来ると知ったとき以上にインパクトがありました。モダンブラウザ向けならピュアCSSでも可能なようです。

この記事自体めっちゃ面白いんですけど(面倒くさいって何回言うねんｗ)、他にも擬似要素を使うにあたっての留意点等が書かれているので合わせて読むことをお勧めします★

擬似要素で出来ること：見出し以外での段落の強調

この記事は::beforeと::afterを使いたかっただけの記事なのですが、申し訳程度に::first-lineと::first-letterにも触れておきますw

これらは両方とも段落の最初の部分を他の部分と違う表現にし、文頭を目立たせる為に使われます。

::first-letterでは、よく雑誌などでも見られる段落の最初の文字だけを大きくする表現を実装できますし、::first-lineでは最初の行ごと見せ方を変え、更に文頭を目立たせることができます。

最初の行というのは文章のコンテキスト的に何か意味があるものでもなく、他に使い方が思いつきませんね…。なんかもっと別なことの為に使えるものが思いついたら記事書きますねー★

終わりに

せっかく今まで封印されていた擬似要素に本格的に手を出したので、他の擬似クラスや属性セレクタももうちょっと突き詰めてみたいですね。一部には使ってますけど。自分なりに良い使い方が貯まってきたらまとめて記事にしようと思います★

余談

WEBCRE8.jpでは過去にIE対応に関する記事も一応書いていますが(業務では苦手意識もなくそれなりに得意なつもりでもあった)、正直IE対応に関する興味が急速に薄れています…ｗ(というかほぼない) それは情報として得られるIE6,7のシェア減少という話のせいもあるのですが、このブログに限って言うなら全PVを通してIE6,7合計の1.4%くらいなんですよね。

あとはスマートフォン対応の制作にかなり心を惹かれているという原因もありますね。IE？なにそれって感じの。…まあこっち(PC環境)にはこっちの、あっち(スマートフォン環境)にはあっちの鬼がいるんですけどねｗ

追記：擬似要素のスペル間違ってましたｗ

擬似要素＝pseudo-element です。最近スペル間違いとかなんか増えてるんで気をつけます…。