Category: 上級者

今回はCSSのみを使用して、かなりイイ感じのスライディング・イメージ・パネルの作成方法をご紹介したいと思います。これはパネルに背景画像をセットして、ラベルをクリックすればアニメーション化されるというものです。ラベルにはラジオボタンを使用し、ターゲットはそれそれのパネル部分とし間接セレクタ（general sibling selector）を使っていきます。 今回使用する美しいな画像はJoanna Kustraさんによるもので、Attribution-NonCommercial 3.0 Unported Creative Commons Licenseの元に帰属しています。 同じ様なテクニックを使って、画像をホバーするとスクリーンがかかる効果をFilter Functionality with CSS3でご紹介しておりますので、こちらも併せてご覧くださいね。 ※CSS transitionとアニメーションをサポートしているブラウザでのみ正常に動作します。お気を付け下さいね。 この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 HTMLマークアップ HTMLは大分すると「ラジオボタンとラベル」「パネル用コンテナと各画像のスライス」「タイトル」という３つのパートから成り立っています。「cr-bgimg」クラスを割り当てたコンテナは各パネルを含有しています。更に各パネルは４枚にスライスされており、各スライスは正しい場所に配置されるようにSPANタグで囲まれています。すなわち１つ目のパネルは４枚のスライスから成り、１つ目のスライスは背景画像として最も左側に配置されます。２つ目のパネルも勿論４枚のスライスから成りますが、背景画像の配置場所は「次」の部分へと移行されます。 タイトル用のH3要素には２つのSPANタグがあり、１つはメインヘッドライン用でもう１つはサブヘッドライン用です。 それではCSSスタイリングに移りましょう！ CSSスタイリング ベンダープリフィックスは省略しています。ご了承ください。 私たちの目的は、第１にラベルでカバーしてラジオボタンを隠すことです。WEBブラウザ上でラベルをクリックすれば、それぞれのチェックボックスかラジオボタンが選択された状態になります。なので、インプットにIDを与えればラベルの「for = 参照ID」属性を使って、それぞれのインプットを参照することが可能となります。 次に全ての背景画像を適切な部分に配置すること。第３にラベルがクリックされたら、それぞれのスライス画像とタイトルがきちんと表示されるようにすることです。 それでは、まずは最も外側のコンテナのスタイリングです。白いボーダー線を引いて、ボックスシャドウでほんのり影もつけましょう。 きちんと目的のスライス画像とタイトルに辿りつくように間接セレクタ（general sibling selector）を使用したいので、ここでまずラベルを適切に配置しておく必要があります。z-indexを使ってレイヤーが最上部に来るようにし、トップマージンを350px確保して下の方に配置します。 ラベルに小さな円を加えて、ちょっとかわいくデコりましょう。疑似要素を使って丁度テキストの背後に来るように配置します。 パネル間にもちょっと細工を施してみましょう。ラベル用に別の疑似要素を用意して、パネル状に縦線を描きます。グラデーションを使っているので上の方に行くにつれ線が薄く消えていくよう見えるはずです。 最後のパネルに縦線は不要なので、幅を0pxにしています。 ラベルの設定が完了したので、安心してインプットを隠してしまいましょう。 これでラベルをクリックすれば、対応するインプットがチェックされた状態になります。では今度はラベルに間接セレクタ（general sibling selector）を使用して細工していきましょう。下記のようにコーディングすると、選択されたラベルの色を変更することができます。 それから円部分の疑似要素の背景色とボックスシャドウも変更します。 画像パネルのコンテナはabsoluteで絶対配置し、幅はいっぱいいっぱいに使います。このコンテナは「現在選択されている画像」に背景画像を設定する為、後程使用します。これはデフォルトとして何らかの画像が表示された状態を維持する為です。なので幾つかの背景プロパティを追加しておきましょう。 表示用の画像（パネル）は４枚に分割しているので、１つのパネルの幅は150pxです。（600÷4）。パネルはフロートで左に配置し、スライドインして来る時に余計な部分まで表示したくないのでオーバーフロー分はhiddenで隠します。 SPANタグで囲まれた各スライスはabsoluteで絶対配置し、左側-185pxに配置することにより最初は隠された状態であるようにします。 それから次に画像コンテナの背景と、それぞれの画像スライスの設定です。 ここで背景ポジションはパネルによって配置場所が異なるので、間違わないように気をつけながら設定します。 ラベルがクリックされたら、全てのスライス全てが右側へとスライドアウトするように設定します。 選択された背景画像は-150pxから0pxへとスライドインしてきます。 最後にH3のタイトル要素とSPANタグのスタイリングを行います。H3には透過度のトランジッションを適用させ、対応するラベル（インプット）が選択されたら透過度が０から１へと増加するよう設定します。 もしモバイルデバイスではラベルのトリックを使用したくなかったら、メディアクエリーを使って以下のように設定します。 これはとてもシンプルな解決方法なので、必要あらばif the label trick is supportedもチェックしてみてください。 これで完成です！他にも色々実現可能な効果があるかと思います。幾つかデモをご用意しましたので、そちらも併せてご覧くださいね。 DEMO Demo 1: Slide to right（右側へスライド） Demo 2: Odd/even slide to left/right（奇数と偶数でそれぞれ右側と左側へ） Demo 3: Odd/even slide up/down（奇数と偶数で上と下へ） Demo 4: Scale up/down（縮小拡大） 今回はここまでです。みなさんのご参考になれば幸いです。

CSS3は様々な可能性への扉を開いてくれました。今日はCSS3アニメーションを使い、スプラッシュとComing Soon（準備中）ページ効果の作り方をご紹介したいと思います。まるでシンプルな要素に命を吹き込んだかのように自由に動かす方法と、アニメーションシーケンスを実現していますのでお楽しみに。 １つ目のデモで使用しているかわいらしい靴の画像は、これまたかわいらしいAmira Almajidさんによるもので、画像のセットはこちらからご利用いただけます。 ※尚、アニメーションをサポートしているブラウザでのみ動作しますので、ご注意くださいね。 チュートリアルがあんまりにも長くなり過ぎないように、ベンダープレフィックスは省略していますので、こちらも併せてご了承くださいね。それでは早速参りましょうか！ この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 Demo 1 こちらのデモでは画像読込みの時間を確保する為に、アニメーション開始までにかなりのゆとりを持たせています。 １つ目のデモではアニメーション化させる要素が幾つかあります。今回のテーマは「Coming Soon（準備中）」です。 まずコンテンツ部分にメインとなるコンテナ（クラス：sp-container）を用意し、その中にサムネイル用の束をそれぞれ記述しています。それからメインのヘッドライン用の束も用意します。メインコンテンツエリアが表示された後に、E-mailアドレス入力枠をスライドインさせています。 HTMLマークアップ では、次はCSSのスタイリングを見てみましょう！ CSSスタイリング １つ目のデモの主な目的は、以下のようなアニメーションの連続を実現させることです。 fromBackを使ってサムネイル出現 fromBackを使って１つ目のH1タグの出現 fromBackを使ってサブヘッドラインのH2タグ出現 fadeOutを使って１つ目のH1タグとサブのH2タグの消滅 fadeOutを使ってサムネイルが順番に消え始め、fadeInColorで２つ目のH1タグを表示それからsizeDownMoveを使ってコンテンツを左に移動と縮小 slideInを使って矢印とサイドコンテンツをスライド それではメインのコンテナをセンタリングして、コンテンツはabsoluteで絶対配置しましょう。 ご覧いただいて分かるように、６秒後にコンテンツへ「動き」と「拡大」のアニメーションを適用させています。この辺のアニメーションはまた後で見ていくことにします。 矢印用のsp-arrowクラスには矢印を背景画像として設定し、absoluteで絶対配置しています。 サイドコンテンツのsp-sideクラスにはE-mailアドレス入力枠が含まれており、画面右側に配置されるよう設定します。 この矢印とサイドコンテンツはいずれもしばらく経ってからスライドインしてきます。 では次にヘッドラインのスタイリングに移りましょう。 それから入力枠とボタン用のラッピング部分ですね。 ではここで、メインコンテンツの内部を見てみましょう。まずヘッドラインのスタイリングですが、こちらは背部から現れてきて、しばらくするとフェードアウトするように設定します。 ２つ目のヘッドラインは、１つ目のヘッドラインが消えた後にただフェードインしてくるだけです。 サブヘッドラインは１つ目のH1タグ同様現れては消えるようにします。 お次はサムネイルを格納している束の設定です。 サムネイル用のSPANタグは、現れる時に０から１へと拡大させることにより背部から登場してきたように演出しています。こちらも暫くするとフェードアウトしていきます。 それから各サムネイルが順番に現れては消えるようなシーケンスを作成したいと思います。なので行ごとに、サムネイルを囲んでいる子要素（SPANタグ）１つ１つ順番に時間差設定を施していきます。各行は上の行から順に時計回りに表示されるようにしたいので、行の順番に注意して下さいね。 ここで少し疑似要素を使って、各サムネイルの背景に円が表示されるようにしてみましょう。 お待たせしました。ここからがアニメーション部分です。 １つ目のアニメーションは透過度を１から０に変化させることにより、該当要素をシンプルにフェードアウトさせています。 fadeInColorを使って該当要素をフェードインさせ、またRGBAで背景色の設定も行っています。けれどRGBAの透過度レベルは、要素そのものの透過度が０．５に達した時点でまだ０のままです。こうすることにより要素を先に表示させ、後から背景がフェードインしてくるように細工しています。２つめのヘッドラインにも同様の設定を施しています。 次のアニメーションも極めてシンプルで、該当要素を左側からスライドインしてくるように見せています。 sizeDownMoveは該当要素を縮小させ、左（100px）から左（0px）まで移動させています。ここでtranslateを使用することも出来るのですが、要素をabsoluteで絶対配置させているので左側でちょっと動かす程度にしておこうかと思います。 次のアニメーションは、サイズを０から１に拡大することにより要素が後方から現れて来るよう見せ、同時に透過度も０から１に変化させています。 これで１つ目のデモ用のスタイリングは完成です♪次はもっとシンプルなのでご安心くださいね。 Demo 2 今度は心にグサッとくるメッセージが連続して現れるスプラッシュページなんていかがでしょうか。今回のデモでは単純にボカシ効果を加えつつ、次から次へとメッセージが表示されるような効果を実現させています。 HTMLマークアップ 今回も先ほどと同じ様な感じでコンテナとコンテンツ用にDIVタグを用意し、更にその内部の各メッセージ部分にはframeというクラスを与えています。それに加えて一番最後に表示される地球とリンク用の要素も用意します。 では早速スタイル設定を見ていきましょうか。 CSSスタイリング ヘッドラインはそれぞれ画面上でセンタリングさせ、flurFadeInOutというアニメーションを使って現れたり消えたりさせています。 それぞれのメッセージに時差設定をします。 最後の１つはアニメーション化させてず、代わりに含有しているSPANタグを順番にアニメーション化させています。 地球は実は背景画像であり、abosoluteで絶対配置しています。他のアニメーションが全て完了した14秒後にフェードインさせます。表示画面いっぱいに広がるよう拡大させています。 「join us」リンクは円形の要素で、回転しながら現れてきます。 ここからはアニメーション設定です。 １つ目のアニメーションは、現れては消えるメッセージ用のアニメーションです。text-shadowとthe scaleを巧く使ってボカシ効果を演出しています。 次のアニメーションも大体同じなのですが、今度は最後のメッセージ用で消えずに残ったままにしています。 地球用のアニメーションでは、画面一杯まで拡大させているのと、透過度を始めは増やしてそれから減らしています。 次のアニメーションはリンク用です。回転しながら現れてくるというものですね。 Demo 3 ３つ目のデモは商品やアプリを紹介する時に使えるようなアニメーションで、テキストメッセージが色んな動きを見せてくれます。 HTMLマークアップ またこちらも同じような感じでコンテナとコンテンツ用にDIVタグを用意し、更に右側用の要素と左側用の要素をそれぞれDIVタグでラッピングさせています。その狙いは右側と左側とできっちりと分けてテキストに動きを加えたいからです。 ではここからはスタイル設定です。 CSSスタイリング まず真ん中の縦線用の疑似要素を持たせたコンテンツエリアをアニメーション化させたいと思います。まるでそれが「開いて」そこからテキストが流れ出てきているかのように演出します。それから縦線の左側で連続してテキストが右からスライドインしてくるように見せます。同様に右側もで、こちらは左からスライドインさせます。sp-midクラスを適用させたSPANタグのフォントは少し大きめにしてあり、他のテキストが消え去った後でもその場に残るようにしています。２つの大き目フォントのテキストを上に移動させ、コンテンツエリア全体をギュッと詰め寄らせています。（高さを減らすことにより縦線自体も短く変化します。）最後にサインアップ用のボタンを出現させています。 コンテナ部分の幅と高さは固定します。コンテンツのラッピングはまずアニメーションのopenで出現させ、それからaqueezeを適用させることにより高さを減らしています。後者の方は他のテキストが全てフェードアウトしてから発生させる為、開始時間はかなり遅めの設定です。 真ん中の縦線は疑似要素を使って表示させています。 ヘッドライン用のラッピングではoverflowはhiddenにしてあります。こうすることによりスライドさせてもオーバーラップは見えないよう保障されます。 H2要素は内側にSPANタグを含有しており、以下のようなスタイル設定を行っています。 「sp-top」と「sp-bottom」は左からスライドしてきてから消滅します。そして「sp-mid」はフェードアウトする代わりに上に移動します。 右側でも同様の効果が現れるように設定します。ただこちら側は左から要素がスライドしてきます。 sp-midクラスを持った２つの要素が上に移動した直後に、ビックリマークがクエスチョンマークを上書きしたように見せる為、クエスチョンマークをフェードアウトさせてビックリマークを出現させています。 「sp-full」でラッピングされた最後に現れるテキストはフェードインさせて、サインアップリンクの方はズームインもさせています。 そしてここからはアニメーションです。 １つ目のアニメーションはコンテンツエリアを「開く」ことです。ただ単に高さを伸ばせば完成です。 スケーリング用のプロパティを使用していないので、squeezeアニメーションは実際は何もスクイーズしていません。この効果を適用させる時にコンテンツエリアにまだテキストが残っているのでスクイーズはさせず、ただ高さを減らすだけに留めています。 次の２つのアニメーションは要素をフェードイン、フェードアウトさせているだけです。 slideLeftとslideRightはtranslateを使用することにより反対側に要素を移動させています。 moveUpは要素を上に持ち上げています。 最後のアニメーションはscaleを０から１に変更することにより、要素をズームインさせています。 これで完成です！みなさんのお役にたてば幸いです。

CSS3の力は尋常では無く、本当にすごいことばかりです。今回のチュートリアルではそのCSS3の巨大な力を、非常にクリエイティブな方法で「いい意味で」悪用する方法をご紹介したいと思います。早速ですが、今回は何種類かのサムネイル・ホバー効果をCSS3のトランジッションを使って表現していきます。色んなスタイルを使用し、それぞれのサンプルでサムネイルをホバーすると、予期せぬ効果が現れるようなものを作っていきます。 ※CSS3のプロパティをサポートしているブラウザでのみ正常に機能しますのでご留意ください。 この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 HTMLマークアップ HTMLマークアップの構造は非常にシンプルで直感的で、画像とその他全ての情報を囲い込むコンテナを作成しています。 viewクラスの中に、maskクラスを含んだ要素を含有しています。このmaskクラスはCSS3で実現させる効果を担うものであり、更にその中にタイトル（H2）や詳細、フルサイズ画像へのリンクといったコンテンツを含有しています。（幾つかのサンプルでは、詳細をDIVタグのcontentクラスで囲み、mask要素は別の要素として機能させています。） CSSスタイリング HTMLマークアップが済んだら、スタイリングに移りましょう。まずは一般的な設定をクラスに施し、それから目的に応じて個別に特別な設定をしていきたいと思います。CSS3のベンダープレフィックスは省略していますのでご注意くださいね。 それでは１０個の個別設定を見ていきましょう！ Demo 1 こちらの効果には、viewに加えてview-firstというスペシャルクラスも追加しています。今後もそれぞれのデモに、view-secondだとかview-thirdだとかスペシャルクラスを追加していきます。 こちらの1つ目のデモでは、いい感じのホバー効果を演出するために基本的なトランジッションを幾つか加えています。 ではここから効果の心臓部に入っていきます。今回のデモでは画像の上にマウスオーバーさせた時、delayプロパティを使って簡単なアニメーションをエミュレートさせています。このhover疑似クラスで使用しているtransition-delay（時間的変化開始の遅延）プロパティは、ノーマルクラスのものとは異なり変更が可能です。今回はノーマルクラスでは設定しておりませんが、hover疑似クラスには適用させています。こうすると、ほんの少しスタートを遅らせることが出来ます。マウスを画像から外すと、デフォルト値の「０」がすぐに適用されるため「元に戻る」のはあっという間です。 Demo 2 ２つ目のデモではスペシャルクラスのview-secondを追加しています。そして今回はmaskクラスの中は空っぽのままにして、contentクラスでその他の要素を含有させています。 ここでのmaskクラスは、今回のスペシャル効果を実現させるために別の属性を持たせています。どういうことかと言うと、transformプロパティ（translate（移動）とrotate（回転））を適用させ枠外で正方形を作っています。そしてホバー時にスライドインしてくるように、タイトル等のコンテンツもtranslate（移動）を使ってこの時点では枠外に出してしまっています。 次に、ホバー時に各要素を従来の配置場所まで移動させる為に、ここでもtransformプロパティでtranslate（移動）を適用させています。mask部分にはrotate（回転）も加えていますね。コンテンツの各要素は少しずつ時間差でスライドインしてくるように、遅延も加えています。 Demo 3 ３つ目のデモでは、transformプロパティのtranslate（移動）とrotate（回転）を使って、コンテンツを引っ張り込んでいます。 ここの部分はホバー時の簡単な説明です。transition-delay（遅延）プロパティを上手に使って、コンテンツの要素を今までとは反対の順番でスライドインさせています。 Demo 4 ４つ目のデモでは、画像に回転を加えながらシンプルにズームイン、ズームアウトさせています。全てtransformプロパティのscale（拡大）のおかげです。画像に対してtransition-delay（遅延）を０．２秒で設定していますが、ホバー時は０秒です。こうすることにより、ホバー時にはすぐさま変化し、マウスアウト時には少しゆっくり変化し始めるようになります。 ここからは効果実現のためのコードです。CSS3を使えば何でも出来ちゃいますね。 Demo 5 ５つ目のデモではtransition-timing-functionプロパティのease-in-outと一緒にtranslateプロパティを使って、コンテンツを左からスライドインさせています。 ホバーすると画像を右側に移動させ、コンテンツを左からスライドインさせて画像を押しのけているように見えるはずです。 Demo 6 ６つ目のデモでは、コンテンツを前方に浮き出た状態から本来のサイズまでズームアウト（１０から１へ縮小）させています。infoボタンはtranslateを使って下からスライドインさせています。 元に戻る時は、スムーズに見えるように遅延設定を調整します。 Demo 7 ７つ目のデモでは、画像は中心に向かって回転縮小させ、コンテンツは上から順番に落ちてきます。 ホバー時には詳細の要素に遅延効果を加えており、こうすることによりまず画像が回転し、あとから画像のあった部分にコンテンツが降ってくるように見えます。元に戻る時はコンテンツはすぐに消滅し、画像が回転拡大しながら戻ってきます。 Demo 8 ８つ目のデモではアニメーションを使って、バウンド効果を加えています。コンテンツが上から落ちてきてバウンドしているように見えます。 mask要素にアニメーションを加え、コンテンツが上から落ちてくるように調整しながら遅延の定義を加えます。 本当にバウンドしているように見せる為にtranslateYを使用し、幾つかフレームも設定します。 Demo 9 ９つ目のデモでは、右下からと左上からスライドインさせる為２つのmask要素を使います。 ２つのマスクの開始地点はそれぞれ別なので、１つは上に１つは下に個々に設定します。 コンテンツは２つのマスクが中央で接触したその線上から現れているかのようにスタイリングさせています。 ホバー時は２つのマスクは端と端がほんの少し重なり、コンテンツはその隙間から浮き出てきます。 マスク用のtransition-delay（遅延）は、ホバーした瞬間に移動開始するよう設定してあります。けれどマウスを外した時は、少し間を開けてから元の隙間に戻っていきます。 Demo 10 最後のデモでは画像はどんどん拡大してフェードアウトさせ、真ん中からコンテンツが湧きあがってくるように見せています。この効果はscale（拡大）と透過レベルを調整することにより実現します。 ホバー時はシンプルにscaleを使って画像を拡大し、opacity（透過度）を「０」にすることによりフェードアウトさせています。 終わりに・・・ CSS3は非常に素晴らしい可能性を秘めており、様々な効果を実現することが出来ます。もしかしたら、簡単な効果なら全てのブラウザでJavaScriptに頼らずCSS3で１００％実現出来るようになる日も近いかもしれませんね。今回のアーティクルがみなさんの役に立ち、ご自身のプロジェクトに何かしらのインスピレーションを与えることが出来たなら幸いです。

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 疑似要素の:beforeや:afterは「すごい」のヒトコトに尽きます。ページ上のいかなる要素においても、他のHTML要素で出来ることは何でも出来てしまうようなすごいモノを追加で2つもゲットすることが出来てしまいます。しかもセマンティック的に悪影響を及ぼすことなく、様々なデザインの可能性を拡げてくれます。今回は総集編です。それでは早速ご紹介していきましょうか。 複数の背景キャンバスの実現 相対配置した親要素に疑似要素を絶対配置できっちりと貼り付けることが可能なので、色々と遊べる2枚のエクストラレイヤーが追加されたと考えてよいでしょう。ニコラス・ギャラガーさんが別の記事で、複数のボーダーラインや、CSS3での複数背景シミュレーションや、同じ高さの列など詳しくご紹介なさっています。 単一要素で作成可能な図形例 上記の画像内にあるアイコンは全て単一要素から作成することが可能で、しかも非常に実用的です。それとは対照的に「CSSでコーヒーカップを描いてください！」などと言われたら、それは面白そうですが1700個以上のdivタグが必要となってしまうので全く実用的ではありません。他にもいろいろな形があります。 六芒星のサンプルをご覧ください： 印刷用ページでのURL表示 CSSサンプル フロートの解除 フロートを解除するために、セマンティック的によろしくない余計なタグをコンテナ要素に追加するよりも、疑似要素を使用して解除することが出来ます。一般的に「clearfix」として知られる手法ですが、もう少しセマンティック的に表現するとクラス名は「group」です。 float: center;　のシミュレーション いくらみんなで望んでみても、floatプロパティーには実際はセンタリング用の値はありません。けれどfloatには右寄せと左寄せはあるので、疑似要素をプレースホルダーとして使用し2つの列の真ん中を削って画像を配置することが出来ます。 ラベルブロックに使用言語の表示 今このサイトでは疑似要素を使って、使用している言語名をラベルとして表示させています。 アイコンセットの作成 ニコラス・ギャラガーさんがまたすごいことをしています。上記の画像内にあるアイコンは全て画像を一切使用せず疑似要素だけで作られています。 限りあるスペースの有効活用 CSSが与えてくれたり奪ったりすること。何が言いたいかと言うと、疑似要素のコンテンツはメディアクエリーによって、条件的に適用されたり無効化されたりします。例えば上記の画像例で言えば、スペース幅に応じてアイコンを使用したり、もっと充分にスペースがあるならば単語や文字を追加して表示させたりすることが可能です。 タイポグラフィーな飾り書きを追加 もし疑似要素がテキストだったなら、親要素のタイポグラフィースタイルを継承します。けれどもしコンテンツを設定しているなら、その部分は好きなようにスタイル設定することが出来ます。例えば別のフォントや色などの飾り書きを使ってヘッダーを目立たせることも出来ます。 フルブラウザ幅のバー作成 もしコンテンツはそのままのサイズで、背景だけブラウザのサイズに応じて幅を変更させたいような場合、セマンティック的にもよろしくないようなラッピングタグを追加してみたり、すっちゃかめっちゃかなスペース設定をしてみたりと試してみて煮詰まってしまったことはございませんか？これもまた疑似要素をうまく使用することにより簡単に解決します。1つの要素でコンテンツ幅を制限し、ヘッダーバーの方は疑似要素でフルサイズまで拡張するようシミュレートさせることが出来ます。 ボディ枠線の作成 通常の枠線を左右に使用し、position:fixedで固定された疑似要素で上下の設定をします。すると何もマークアップすることなく、ボディ枠線効果を実現させることが出来ます。 きらりと光るボタンの作成 まず透明→白→透明のグラデーションになっている画像を疑似要素ブロックに入れて、ボタンの外側に配置します（overflow: hiddenで隠してあります）。次にhover時にボタンの上を通過させるようにします。こうすればマウスを乗せた時に、きらりと光って見えるボタンを作ることが出来ます。今のところ疑似要素のトランジッションに対応しているのはFirefoxの4か5のみなので、Firefoxの4か5で試してみてください。 特定リンクのロールオーバー時はページ全体をフェイドアウト もし親要素が相対配置されていなかった場合、絶対配置されている疑似要素は、その更に1つ外側の相対配置されている親要素を元に配置が決まります。もし相対配置されている要素が無ければ、大元のルート要素に関連付けられます。これをうまく利用して、フルブラウザ・ウィンドウ要素を作ることが出来ます。メイン要素の下に配置し、マウスが乗せられた時に「ページフェイドアウト」効果をリンクに適用させます。 ヘッダーに3D効果なリボン設定 リボンを嫌いな人はいないと思います！このページにHTMLとCSSの詳細が載っています（http://css-tricks.com/snippets/css/ribbon/）。これは少しz-indexを負の値で使用している為、不透明な背景が設定された親要素の下に隠れてしまわないように、ラッピング用に内側に追加でタグを記述する必要がある場合があります。 olリストの番号にスタイル設定 順序付きリスト（olリスト）の番号部分に、スタイル設定を試みたことがありますか？色々試してspanを使ってラッピング用にタグを追加したり、リストアイテムをスタイル設定したり、はたまたspanでそのスタイル設定を無効化してみたりしてもうにっちもさっちもいかなくなってしまったりとか・・・。それか背景画像をとんでもない方法で使ってみたり、リストスタイルを無効化させて独自の番号を入れてみたりとか・・・。どれもこれもしょうもない方法ですよね。疑似要素をカウンターとして使う方が断然ベターです。 データテーブルのレスポンシブ化 大きなデータテーブルは小さなスクリーンで見るにはやっかいですよね。大き過ぎて垂直方向にも水平方向にもスクロールしなければならなかったり、全体を表示させるために縮小されていて今度は小さ過ぎて全く読めなかったりとか。CSSのメディアクエリーと疑似要素を組み合わせれば小さなスクリーンに合わせて読み易くなるように、データテーブルをレスポンシブ化＆再フォーマットすることが出来ます。 ツールチップのスタイル設定 HTML5のデータ属性を利用して、その属性を疑似要素としてスタイリングします。こうすればCSSだけで簡単にツールチップが作成出来るのです！