↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone / WebKitでしか最適化されていません)
これは簡単！ a要素ひとつでiPhone UIボタン - jsdo.it - share JavaScript, HTML5 and CSS
ちなみにiPhone / WebKitで実際に見るとこんな感じに見えます↓
今回のサンプル作成でこだわったのは、1要素に1クラスを指定するだけでiPhoneのようなデザインを実装することです。
つまり、以下のように指定するだけでiPhone風ボタンに早変わりする、というような手軽さを意識しました。
実はタイトル周りもCSSのみで実装しています。
ソースもかなりシンプル。
さらには背景の縞々模様もCSSのみで作っていたりします。
CSS3のポテンシャルは非常に高いです。
こうした比較的シンプルなデザインであればCSSのみで、かつ要素を何重にも入れ子に・・なんてしなくても実現できてしまいます。
（具体的には、:after擬似要素、:before擬似要素を匠に使うことで、無理に思えるデザインも実装できてしまったりします）
[追記] Twitterで指摘をもらいましたが、:after(:before)擬似要素はCSS3からの定義ではありません。ここで言いたかったのは、それらを工夫して使うことでCSS3の力が増し、CSSのみで複雑なデザインが実現できる、ということでした。:after(:before)擬似要素がCSS3だと勘違いされる人がいるかもしれないので追記しておきます。
iPhone4の対応で画像サイズがーという悩みを解消できることを考えると、色々とテンプレートとして作ってみるのも面白いのではないでしょうか。
ぜひぜひみなさんも色々なデザインを、少数構成で実現できるように挑戦してみてください。
ちなみにこのサンプルは、自分で作ったCSS3ジェネレーターでグラデーションを調整しながら作りました。よかったら使ってみてください。
jsdo.itで公開したら意外と好評だったので、解説などを書いてみたいと思います。
ゲームなどにありそうなリングメニューを、CSSだけを使って実装した例です。下に実際の動くサンプルもあるので、ぜひ触って見てください。
ちなみに右の画像は、中央の「main」にマウスオーバーした際にアニメーションでメニューが出てくる瞬間の画像です。
まずは下のサンプルをご覧ください。ちなみにアニメーションに対応しているブラウザのみ、アニメーションが実行されます。具体的には、GoogleChrome、Safari、Firefox、Operaです。
リングメニューをCSSで実装してみる - jsdo.it - share JavaScript, HTML5 and CSS
今回のテクニックの肝は、transform-originです。このプロパティは、transform系の値を変更する際、どこを基点にするかというものになります。
このtransform-origin、デフォルト値は50% 50%となっています。つまりその要素の縦横中央、ということですね。もしこれを0 0とすれば左上が基点となり、100% 100%とすれば右下が基点となるわけです。そしてこの数値には、pxも指定することができるので、細かく位置を調整することも可能となります。
前回と合わせて連続でtext-shadowネタです。今回は、text-shdaow のぼかし部分を利用して、CSS のみでテキストをぼかすテクニックの紹介です。
今回のテクニックは text-shadow に対応しているブラウザであれば、CSS のみで実現可能です。
まずは下の jsdo.it のサンプルを見てください。（下の方にある「Play」ボタンを押すと実行されます）
スタイルをtextareaに設定しているので、ぼかし状態の文字が入力されるのが確認できると思います。
[Demo] Blur text for CSS3 - jsdo.it - share JavaScript, HTML5 and CSS
まずポイントとなるプロパティは当然、text-shadowです。
普通はテキストに影をつけるためのプロパティですね。
それを以下のようにすることでぼかし部分だけを表示することができます。
color が大事なポイントです。普通はカラーは色をつけるのが当たり前ですが、今回のテクニックの場合はこれを透明にしてしまいます。
つまり、影の上に乗っているテキストの色を透明にすることで、結果、影だけが表示されぼかし効果が残る、というわけです。
サンプルを WebKit 系ブラウザで見ている人は気づいていると思いますが、実はこのサンプルにはアニメーションを設定しています。
text-shadow のぼかし部分を 0 から 10px などに指定することで、プレゼンツールで表示されるような効果を得ることができます。ぜひ試してみてください。
元々は CSS3 Watch の記事じゃないか、というコメントを頂きました。調べたところ、そこでこのCSSに関する記事が見つかったので参考として記載しておきます。
今回は、とあるサイトで見かけた面白い表現を紹介したいと思います。
右にある画像が、その表現を拡大したものです。これはテキストに対してtext-shadowを指定しただけです。
もちろんテキストなのでコピペもできるし、textareaに指定すれば入力した文字がこのような立体的な文字になります。
下にjsdo.it上で作成したデモを載せてあります。下のほうにある「Play」ボタンを押すことでサンプルが実行されます。
サンプルはtextareaなので、自由にテキストを入力してみてください。（対応ブラウザは WebKit 系か、Firefoxです）
※ちなみにアンチエイリアスのかかったフォントじゃないとあんまりきれいに見えませんｗ
今回のこのテクニックの肝はtext-shadow（というかそれだけ）です。
この text-shadow、実は影の部分の指定を複数指定することができるのです。
意外と知らない人は知らない気がするこの指定、カンマ区切りで列挙すればひとつの要素に対して様々な影をつけることが可能になります。
さて、ではどんなことをやっているかというと、サンプルを見ていただくと一目瞭然ですがこの「影を複数指定できる」というのを利用して、立体的に見えるようにたくさんの影を指定することで実現しています。
.realTextクラスに指定している text-shadow の値の最初の 5 つが、文字が飛び出しているように見せる部分。そのあとの 7 つが、その盛り上がった文字からできる影を表現しています。
最初の 5 つの指定で、徐々に暗くなるように色を指定しています。（実際のものは同じ色でも光の当たり方によってグラデーションができます。それを表現している、というわけです）
そして次の 7 で、盛り上がった（ように見える）テキストから、さも影が落ちているような演出をしている、というわけです。
残念ながら、最初のほうにも書いた通り、対象ブラウザが限定されてしまいます。
しかし、対応していないブラウザでも、立体的に見えないだけでテキストは正常に表示されます。
なので、こうしたリッチ表現ができるブラウザにはリッチな表現を、そうでないブラウザに対しては情報にアクセスできるようにしておく、という対応ができます。いわゆる「プログレッシブ・エンハンスメント」ですね。
最初に、Firefox ではまだtext-overflowを実装していません。
もともとは IE の独自実装であり、現在は CSS3 で策定中の仕様となります。
ところが、Opera、webkit は先行実装しているので対応しています。
しかし、Firefox は前述したようにまだ実装されていません。
そこで、Firefox 向けにもなんとか text-overflow と同じ効果を得るテクニックの紹介です。
今回のテクニックの肝は、margin の使い方です。
とりあえず実際に動いているデモを見てください。（Firefox で見てください）
サンプルを見ると、しっかりとテキストか溢れたときだけ...が表示されているのが分かると思います。
（Firefox の【表示＞ズーム＞文字サイズだけ変更】のチェックを入れれば、拡大・縮小でテキストサイズだけが変更できるので、それでサイズを変更するとより分かりやすいと思います）
text-overflow は他の主要なブラウザではすでに実装されているので、それらのブラウザ向けにはそのものを使い、Firefox 向けにだけ今回のテクニックを使っています。
ちなみに Firefox3.0 も対象とするものと、除外したものふたつを紹介します。
やっていることはほとんど同じですが、3.0 では実装の違いからうまく動かない部分があるので代替えとしての処理になります。
3.0 を無視するのであれば、無駄な要素が必要なく、CSS だけですべて実現可能となります。
Firefox3.0 のシェアがそれほどないことから、特に必要でなければ無視したほうが無難かもしれません。
効かなかったとしても閲覧に支障が出るわけではないからです。（効かなかったとしても、通常の overflow: hidden でテキストが切り取られるのでレイアウトは破綻しません）
では、実際にテクニックの解説です。
まずはソースを見てください。
HTML はそれほど複雑ではありません。よくある形としては、様々なコンテンツを含んだ div 要素（サンプルではoverflowBox）があり、その中のどれかの要素（例えばタイトル）の文字数が未知数で、予め想定しておけない、という場合がありえると思います。
そしてそれを実現するには、その想定できない要素（つまりtext-overflowを適用させたい要素）に対してclass="overflow"を指定するのみです。
続いて CSS を見てみましょう。
今回の肝はmarginだと書きました。
ざっくりとなにをしているかを説明すると、まずオーバーフローする横幅を決めます。（サンプルの場合は 180px）
そのうえで、そのブロック要素の中に、テキストの内容に応じてボックスのサイズが変わる要素を配置します。（display: inline-block）
さらに、テキストがあふれない場合には...が表示されないようoverflow: hiddenを指定しておきます。
そして:after擬似要素の content に "..." を指定、それを絶対配置し、オーバーフローする横幅（180px）と同じだけの値分右にずらします。（right: -180px）
そして最後に、その要素の margin-right に 100% を指定します。
この :after 擬似要素が、text-overflow のように...を表示する部分になります。
上記の内容を図にしてみました。テキストが増えても、...の位置が変わりません。
結果、テキストが溢れるくらい長くなったときにだけ「...」の部分が表示される、つまり text-overflow と同じ挙動をする、というわけです。
さて、ではなぜそうなるのか。
まず、margin に % を指定するとその値は親ボックスの幅（width）が基準となります。
（ちなみに、margin-top/bottom も同様に幅を基準にするので、margin はすべて幅を基準にしている、というわけです）
つまり、テキストの内容に応じてボックスが拡張されることで、margin の値も変化していくのです。
そしてオーバーフローで消したいところまでボックスが伸びると、右にずらした分と margin の値が釣り合い、結果その消えていた分が顔を出す、というわけです。
ただこのテクニックにも問題はあり、テキストが等幅ではない場合は文字が欠けてしまう場合がある、ということと、背景に画像を使っているなど、複雑な背景の場合には使えません。
なぜなら、この文字を消す処理は、「...」を表示している要素に対して背景に色をつけ、テキストにかぶせることで消えているように見せているためです。
また、Firefox3.0 では、:after 擬似要素の position がうまく動作せず、常にテキストの最後に「...」が表示されてしまいます。
そのためサンプルでは、HTML 自身に「...」を追加し、代替案としているわけです。（サンプルで言うと .leader の部分。これはそのまま :after 擬似要素と同じことをしています）
さらに、セレクタの部分には普段見慣れない指定があるかと思います。
これは Firefox 向けのハックです。ハックについては ヨモツネットさんの「Firefox 1.0, 1.5, 3.0, 3.5 用の CSS ハック」を参考にさせて頂きました。
そしてそれ以外にも:notなどの指定がありますが、これは IE7 対策です。
本来、セレクタのグループの中に未知のもの（サンプルではx:-moz-brokenの部分）が含まれていると、指定されているプロパティを無視するのが仕様なのですが、なぜか IE7 では無視せず、しっかりとプロパティが反映されてしまいました。
なので、実際に使いたいセレクタに、さらに:notを加えることで、それ自体も無視するようにした、というわけです。
これらの指定をすることで、text-overflow に対応しているブラウザにはそれを、Firefox だけに今回のテクニックをする、というのを実現しているわけです。
今さらですが、いちおう念のためってことで。
クラスは複数指定することができます。個別のクラスをひとつの要素に割り当てる、という使い方や、決まったクラスの組み合わせのみスタイルを適用する、なんていう使い方ができます。HTML、CSS の指定方法は以下の通りです。
HTML 側は上記のように、半角スペース区切りでクラスを指定すればそれで複数のクラスが指定されたことになります。（もちろん 2 つだけではなく、3 つ以上を指定することも可能です）
CSS 側は上記の 3 つ目の例のようにスペースを開けずにクラス名を連結させると、ふたつのクラスが指定されている要素にのみスタイルを割り当てることができます。（class1, class2 それぞれ別に定義している場合は、それらを合成したスタイルが割り当てられます）
これを適用すると以下のようになります。
これを踏まえて。
ある案件で、複数クラスを使ったレイアウトをしていたら軽くはまったのでメモ的にエントリー。
元々 IE6 では複数クラスの実装が不完全で、正確には理解していない、というのは知っていたんですが、まさか適用されない場合があるとは知りませんでした。
まず、複数クラスを使う場合の問題点。
IE6以下ではclassの複数指定は、CSS側のセレクタの記述は対応していないようで、並べられた最後のclass名単品でしか見られていないようです。
上記 引用はどういうことかというと、IE6 では CSS 側で複数のクラス指定に対応しておらず、いくら連結して指定したとしてもそれらがすべて無視され、最終的に最後に書かれたクラス名だけを読み取ってしまっている、ということです。イメージとしてはこんな感じ→.class1.class2.class3
そのため、以下のように CSS を指定しても、上記のサンプルの HTML にもスタイルが適用されてしまう、という問題が発生します。
▼実際に IE6 で表示してみた例
▼それ以外のブラウザ（キャプチャは Google Chrome）で表示した例
見てみると違いは明白ですね。本来、上記のように複数クラスを指定すると、class1, class2, class3 すべてが指定されている要素にのみ、スタイルが適用されるはずです。
しかし、IE6 では最後に書かれているclass2を読み取り、さも class2 として定義されたかのように 2 つ目と 3 つ目の要素にスタイルが適用されてしまっています。
なので、OOCSS の考えのような形で使用する分にはほとんど問題になりませんが、複数指定されている場合に表示を切り分ける、などのような使い方をする場合は注意が必要です。
下手をすると想定外の箇所にもスタイルが適用されて、レイアウトが崩れる、なんてこともあるかもしれません。
さて、今回ハマったのがこちら。まず以下の引用を見てください。
1つのタグにidとclassを両方設定した際に起きるバグです。(わかりづらくて、すいません。。。)
このバグが発生する条件は少し限られていて、idで設定したスタイルをclassを付け替えることによって、見た目を変更しようとすると発生します。ページのレイアウトは一緒だけど、色違いのページが数パターンあるという場合などで使用するかもしれませんね。
具体的にどういうことかというと、下記のコードを見てください。
まずは HTML から。
サンプルでは比較しやすいように id が重複していますが、通常のサイトのように 1 つであっても問題が発生します。
続いて CSS。
#id.class と書くと、指定した id と class の両方が指定されている要素にのみスタイルを適用することができます。
想定としては、ID で大枠のレイアウトスタイルを書き、ページごと（あるいはモジュールごと）に class をつけかえて色や見た目を変化させる、という感じになるかと思います。（というかまさに今回ハマったのはそういった使い方でした）
上記のものを表示してみると以下のようになります。（Google Chrome でのキャプチャ）
見てみると、それぞれ上からしっかりとスタイルが適用されているのが分かるかと思います。
しかし、これを IE6 で見てみると下のような感じになります。
3 つの内、下ふたつにスタイル（背景色）が当たっていないのが分かると思います。
複数クラスの場合は、他で指定されたものが反映されていましたが、今回のサンプルでは完全にスタイルが無視されてしまっています。
こうなると、!important 規則を使ってもなにをしても反映されなくなってしまいます。（優先度ではなく、完全に無視されているような感じ）
そこで、このバグの回避方法が引用先の記事で書かれていました。そこで紹介されていたのは 2 つになります。
バグの発生条件にも書きましたが、どうやらセレクタの最後でクラスの付け替えによるスタイルの上書きをしようと試みた際に発生するようなので、最後に別のものを追加すれば回避することができます。
下記のソースでは、セレクタの最後をpにすることでバグを回避しています。
上記の説明を、今回のサンプルに適用すると以下のようになります。
このように、#id.class の指定をしている要素のさらに内側に、別の要素を追加します。（サンプルでは p 要素を追加していますが、p 以外でも大丈夫です）
そして CSS は以下のようにします。
こうすることで CSS の指定を認識してくれるようになります。（これが認識される、ということは id + class の指定はいちおう認識してるってことですよね・・なぜ最後に要素を足さないと認識しないのか・・まさにバグですね；）
これは、#id.class という表記だとバグが発生するために、この連結での指定をやめてclass 単体でスタイルを指定する、というもの。
ただ、これだと根本の解決にはなっておらず、おそらく普通の指定方法となんら変わらないですよね。
それでもやはり、 IE6 対応を視野に入れるのであればこうした処置はやむを得ないことだとは思います。
また他のところでも言っていますが、ID でなければならない状況ってなにげに少ないと思っています。
JavaScript からアクセスする、というような用途がない限りは、class 指定だけでもスタイルを当てていくことはむずかしくありません。むしろ、ID の介入によって 優先度 が上がり、かなりしっかりと構造を定義しておかないと、後々別の箇所で新しい指定をしたい、と思ったときに上書きできずに、仕方なく id による優先度上げを行うしかない場合もあったりします。
そういう意味でも、あまり id での指定を多用せず、複数クラスの指定に留めておくのが安全かもしれません。
今回のネタは、box-shadow を使った、ちょっと面白い演出とデザインの紹介です。
box-shadow は現在、最初に書かれていた仕様の CSS Backgrounds and Borders Module Level 3 からは削除されおり、まだ策定中の段階ですが、先日リリースされた Opera10.50 ではベンダープレフィクスが取れた状態で使用できるようになっています。（なぜ・・・？）
そのため、Firefox や WebKit 系ブラウザで使うには-moz-や-webkit-のベンダープレフィクスが必要です。
また今回のネタでは、transition プロパティに対応している WebKit のみ、アニメーションの演出を見ることができます。
いちおう Opera10.50 でも transiton には対応したのですが、box-shadow へのアニメーションは適用されませんでした。
ということで、百聞は一見にしかず、ということでデモを見てください。
今回も CSS3 で遊んでみるシリーズです。
"今回のネタは、CSS3 で袋文字を作る"、です。
いちおう、WebKit では -webkit-text-strokeというそのものズバリなプロパティがありますが、そもそも WebKit しか対応していないこと、また微妙に縁がテキストにかぶるので（現状のままだと）使いづらい、というのがあります。
今回のネタは、見栄えはよくないですが、いちおう IE にも対応させてあります。
ただ、やっぱりネタなので実践で使うには「？」ですが、こんなこともできるよーという感じでご覧下さいｗ
ちなみに、色々なサイズを見られるように JavaScript を使って境界線の太さを調整できるようにしてあります。また、使う人がいるか分かりませんが 設定したものを CSS として書き出すようにしてあります。
いきなりはてブで vantguarde さんに突っ込まれました・・。今回の件はプログレッシブ・エンハンスメントではないですね。フォールバック、というらしいです。
プログレッシブ･エンハンスメントは、「なくても内容が破綻しない」というときのことですね。今回は "代替" を用意してるので違う、と。てか、こうなるとすでにタイトルが破綻してる気が・・ｗ とりあえず積極的に新しい技術を使っていこう、という気持ちは変わらないので、このままにしておきます、ってことでいちおう注意。
ちなみに CSSのプログレッシブエンハンスメントの例 にちょっと詳しく書いてありました。
ちょっと面白い記事を見つけたので紹介です。（元記事： IE Background RGB Bug）
概要はというと、単一セレクタによる指定で RGBa に対応していない IE6, 7 に対処しつつ、対応しているブラウザには RGBa を適用させる、というときの注意点です。
RGBa は、IE6, 7 は対応していません。なので、もしそのまま指定すると当然、IE6, 7 では背景色がない状態になってしまいます。
背景色がなくても問題ないこともありますが、例えばベースのテキストカラーが白（黒背景）で、見出しだけ白っぽい背景にした、などという場合、当然その見出しに載せるテキストカラーは黒に近い色になると思います。
そんなとき、もし背景色が表示されないとなるとテキストが見づらいばかりか、最悪の場合見れない、などということにもなりかねませんよね。
なので、RGBa に対応していない IE6, 7 であっても適切に文字が見えるようにしなければなりません。
CSS ハックを利用して、IE6, 7 だけに改めて背景の色を指定する、ということも考えられますがやや冗長になってしまいます。そこで、ひとつのセレクタ内で完結する記述方法が下記です。
こうして並べて記述することで、IE6, 7 とモダンブラウザ双方とも背景色が表示されるようになります。
しかし、元記事でも触れていますが、この方法、ショートハンド（backgroundのみのもの）で指定しないと IE6, 7 では反映しないようです。なので、下記のように書いてしまうと IE6, 7 では背景色が表示されません。
最近では、モダンブラウザで使える機能は積極的に使い、IE6（場合によっては IE7）などの対応していないブラウザに対しては同じような表示になるよ代替を用意する、という "プログレッシブ・エンハンスメント" という考え方が徐々に広まってきています。
RGBa はとても使いやすい機能なので、積極的に使っていきたいですね。
ちなみに、IE6, 7 では RGBa に対応していない、と書きましたが、filter をうまく使うと RGBa のようなことを実現することは可能です。以前、IE6, IE7でもRGBaを使う という記事を書いたので、よかったら参考にしてみてください。
今回のテクニックは、以前書いた ピュアCSSで実装する DKIR を応用した画像ボタンのロールオーバー効果 の応用版です。
なので HTML はいじらずに、CSS の変更だけで実現しています。
また、今回のテクニックは ul, li 要素に対して:hover擬似クラスを使って実現しているためIE6 は未対応です。が、IE6 でもマウスオーバーの効果は正常に動作するので、IE6 以外のモダンブラウザ向けに仕込んでおくといい感じです。いわゆる "プログレッシブ・エンハンスメント" ってやつですねｗ
カテゴリー
最近のエントリー
©2009-2011 CSS-EBLOG All Rights Reserved
