CSS-EBLOG

デバッグ用CSSをその場で書けるブックマークレットを作ってみた

2010-08-17T14:23:34Z

とにかくその場で追加したいんです

最近あまりに忙殺されているえどです。こんにちわ。
いやほんと、平日なにもする時間がありません。なので、手短に書きたいと思いますｗ

普段制作をしていると、その場でさっと CSS をとりあえず追加してみて、動きがどうなるか見てみたいな、と思うことはありませんか？
それが IE6 ならなおさら。しかも保存した CSS がサーバに反映されるまで多少のタイムラグがあった日には反映されたのを見るまでなにもできません。（もちろん、ローカルのファイルを参照させて開発する、なんてこともできますが、とにかくちょっと今ここで！　っていうのってなにげにあるんですよね）

んで、新しい PC になって特にそう思うことがよくあったので、それならいっそ、とブックマークレットを作ってみました。
作りが違うんで、IE 用とそれ以外のブラウザ用で分けてます。

作ってみたブックマークレット

そして下のやつがその作ってみたブックマークレットです。

CSSを手軽に追加するブックマークレット(IE6対応) - jsdo.it - share JavaScript, HTML5 and CSS

使い方

使い方は簡単です。
コーディングをしているときなどに、ちょっとこのスタイルを追加したい、というときに実行します。
すると右上に入力ボックスが出てくるので、あとはそこに普段通りに CSS を書くだけです。
table td {...}みたいに継承関係も含めて記述可能です。もちろん複数のセレクタやプロパティを書いても大丈夫です。

Firebug では、その要素自体にスタイルを追加する、みたいなことはできますが、継承関係を持ったスタイルを追加したり、class 自体にスタイルが割り当てられてない場合に、class そのものにスタイルを追加できない、という物足りなさがありました。

そういう不便さもあったので作ったものです。よかったら使ってみてください。

Firefoxでもtext-overflowを実現するテクニック

2010-06-09T00:39:00Z

text-overflowの実装状況

最初に、Firefox ではまだtext-overflowを実装していません。
もともとは IE の独自実装であり、現在は CSS3 で策定中の仕様となります。

ところが、Opera、webkit は先行実装しているので対応しています。
しかし、Firefox は前述したようにまだ実装されていません。
そこで、Firefox 向けにもなんとか text-overflow と同じ効果を得るテクニックの紹介です。

今回のテクニックの肝は、margin の使い方です。
とりあえず実際に動いているデモを見てください。（Firefox で見てください）

実際に動いてるサンプル

http://css-eblog.com/eblog_sample/1006/text-overflow/

サンプルを見ると、しっかりとテキストか溢れたときだけ...が表示されているのが分かると思います。
（Firefox の【表示＞ズーム＞文字サイズだけ変更】のチェックを入れれば、拡大・縮小でテキストサイズだけが変更できるので、それでサイズを変更するとより分かりやすいと思います） text-overflow は他の主要なブラウザではすでに実装されているので、それらのブラウザ向けにはそのものを使い、Firefox 向けにだけ今回のテクニックを使っています。

ちなみに Firefox3.0 も対象とするものと、除外したものふたつを紹介します。
やっていることはほとんど同じですが、3.0 では実装の違いからうまく動かない部分があるので代替えとしての処理になります。

3.0 を無視するのであれば、無駄な要素が必要なく、CSS だけですべて実現可能となります。

Firefox3.0 のシェアがそれほどないことから、特に必要でなければ無視したほうが無難かもしれません。
効かなかったとしても閲覧に支障が出るわけではないからです。（効かなかったとしても、通常の overflow: hidden でテキストが切り取られるのでレイアウトは破綻しません）

では、実際にテクニックの解説です。
まずはソースを見てください。

HTML ソース

HTML はそれほど複雑ではありません。よくある形としては、様々なコンテンツを含んだ div 要素（サンプルではoverflowBox）があり、その中のどれかの要素（例えばタイトル）の文字数が未知数で、予め想定しておけない、という場合がありえると思います。
そしてそれを実現するには、その想定できない要素（つまりtext-overflowを適用させたい要素）に対してclass="overflow"を指定するのみです。
続いて CSS を見てみましょう。

CSS ソース

.overflowBox {
                width: 180px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
            }
            .overflow:not(div) ,
            x:-moz-broken {
                position: relative;
                display: inline-block;
                overflow: hidden;
            }
            .overflow:not(div) .leader ,
            x:-moz-broken {
                display: inline;
                background: white;
                position: absolute;
                right: -180px;
                margin-right: 100%;
            }
            .leader {
                /* exclude not firefox */
                display: none;
            }
     
            .sample2 .overflow:not(div):after ,
            .overflow:last-of-type>div ,
            x:-moz-broken {
                content: "...";
                display: inline;
                background: white;
                position: absolute;
                right: -180px;
                margin-right: 100%;
            }

今回の肝は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 向けのハックです。ハックについてはヨモツネットさんの「Firefox 1.0, 1.5, 3.0, 3.5 用の CSS ハック」を参考にさせて頂きました。

そしてそれ以外にも:notなどの指定がありますが、これは IE7 対策です。
本来、セレクタのグループの中に未知のもの（サンプルではx:-moz-brokenの部分）が含まれていると、指定されているプロパティを無視するのが仕様なのですが、なぜか IE7 では無視せず、しっかりとプロパティが反映されてしまいました。

なので、実際に使いたいセレクタに、さらに:notを加えることで、それ自体も無視するようにした、というわけです。

これらの指定をすることで、text-overflow に対応しているブラウザにはそれを、Firefox だけに今回のテクニックをする、というのを実現しているわけです。

IE6で複数クラスを使う時の注意点

2010-04-30T01:00:00Z

複数クラスの使用

今さらですが、いちおう念のためってことで。
クラスは複数指定することができます。個別のクラスをひとつの要素に割り当てる、という使い方や、決まったクラスの組み合わせのみスタイルを適用する、なんていう使い方ができます。HTML、CSS の指定方法は以下の通りです。

HTML 側は上記のように、半角スペース区切りでクラスを指定すればそれで複数のクラスが指定されたことになります。（もちろん 2 つだけではなく、3 つ以上を指定することも可能です）

CSS 側は上記の 3 つ目の例のようにスペースを開けずにクラス名を連結させると、ふたつのクラスが指定されている要素にのみスタイルを割り当てることができます。（class1, class2 それぞれ別に定義している場合は、それらを合成したスタイルが割り当てられます）
これを適用すると以下のようになります。

これを踏まえて。

複数クラスではまったのでメモ

ある案件で、複数クラスを使ったレイアウトをしていたら軽くはまったのでメモ的にエントリー。

IE6 で使う上での注意点

元々 IE6 では複数クラスの実装が不完全で、正確には理解していない、というのは知っていたんですが、まさか適用されない場合があるとは知りませんでした。

まず、複数クラスを使う場合の問題点。

IE6以下ではclassの複数指定は、CSS側のセレクタの記述は対応していないようで、並べられた最後のclass名単品でしか見られていないようです。

出典：IE6以下でclassの複数指定でバグがあった - Webコーダーの手帳

上記引用はどういうことかというと、IE6 では CSS 側で複数のクラス指定に対応しておらず、いくら連結して指定したとしてもそれらがすべて無視され、最終的に最後に書かれたクラス名だけを読み取ってしまっている、ということです。イメージとしてはこんな感じ→.class1.class2.class3

そのため、以下のように CSS を指定しても、上記のサンプルの HTML にもスタイルが適用されてしまう、という問題が発生します。

▼実際に IE6 で表示してみた例

▼それ以外のブラウザ（キャプチャは Google Chrome）で表示した例

見てみると違いは明白ですね。本来、上記のように複数クラスを指定すると、class1, class2, class3 すべてが指定されている要素にのみ、スタイルが適用されるはずです。
しかし、IE6 では最後に書かれているclass2を読み取り、さも class2 として定義されたかのように 2 つ目と 3 つ目の要素にスタイルが適用されてしまっています。

なので、OOCSS の考えのような形で使用する分にはほとんど問題になりませんが、複数指定されている場合に表示を切り分ける、などのような使い方をする場合は注意が必要です。
下手をすると想定外の箇所にもスタイルが適用されて、レイアウトが崩れる、なんてこともあるかもしれません。

ID と連携して使用する場合の注意

さて、今回ハマったのがこちら。まず以下の引用を見てください。

1つのタグにidとclassを両方設定した際に起きるバグです。(わかりづらくて、すいません。。。)
このバグが発生する条件は少し限られていて、idで設定したスタイルをclassを付け替えることによって、見た目を変更しようとすると発生します。

ページのレイアウトは一緒だけど、色違いのページが数パターンあるという場合などで使用するかもしれませんね。

出典：IE6.0のバグ　?idとclassを両方設定した際

具体的にどういうことかというと、下記のコードを見てください。

まずは HTML から。
サンプルでは比較しやすいように id が重複していますが、通常のサイトのように 1 つであっても問題が発生します。

続いて CSS。
#id.class と書くと、指定した id と class の両方が指定されている要素にのみスタイルを適用することができます。

想定としては、ID で大枠のレイアウトスタイルを書き、ページごと（あるいはモジュールごと）に class をつけかえて色や見た目を変化させる、という感じになるかと思います。（というかまさに今回ハマったのはそういった使い方でした）

上記のものを表示してみると以下のようになります。（Google Chrome でのキャプチャ）

見てみると、それぞれ上からしっかりとスタイルが適用されているのが分かるかと思います。
しかし、これを IE6 で見てみると下のような感じになります。

3 つの内、下ふたつにスタイル（背景色）が当たっていないのが分かると思います。
複数クラスの場合は、他で指定されたものが反映されていましたが、今回のサンプルでは完全にスタイルが無視されてしまっています。
こうなると、!important 規則を使ってもなにをしても反映されなくなってしまいます。（優先度ではなく、完全に無視されているような感じ）

バグの回避方法

そこで、このバグの回避方法が引用先の記事で書かれていました。そこで紹介されていたのは 2 つになります。

要素を追加して回避する

バグの発生条件にも書きましたが、どうやらセレクタの最後でクラスの付け替えによるスタイルの上書きをしようと試みた際に発生するようなので、最後に別のものを追加すれば回避することができます。

下記のソースでは、セレクタの最後をpにすることでバグを回避しています。

出典：IE6.0のバグ　?idとclassを両方設定した際

上記の説明を、今回のサンプルに適用すると以下のようになります。

このように、#id.class の指定をしている要素のさらに内側に、別の要素を追加します。（サンプルでは p 要素を追加していますが、p 以外でも大丈夫です）
そして CSS は以下のようにします。

こうすることで CSS の指定を認識してくれるようになります。（これが認識される、ということは id + class の指定はいちおう認識してるってことですよね・・なぜ最後に要素を足さないと認識しないのか・・まさにバグですね；）

ID と class を分ける

これは、#id.class という表記だとバグが発生するために、この連結での指定をやめてclass 単体でスタイルを指定する、というもの。
ただ、これだと根本の解決にはなっておらず、おそらく普通の指定方法となんら変わらないですよね。

それでもやはり、 IE6 対応を視野に入れるのであればこうした処置はやむを得ないことだとは思います。
また他のところでも言っていますが、ID でなければならない状況ってなにげに少ないと思っています。

JavaScript からアクセスする、というような用途がない限りは、class 指定だけでもスタイルを当てていくことはむずかしくありません。むしろ、ID の介入によって優先度が上がり、かなりしっかりと構造を定義しておかないと、後々別の箇所で新しい指定をしたい、と思ったときに上書きできずに、仕方なく id による優先度上げを行うしかない場合もあったりします。

そういう意味でも、あまり id での指定を多用せず、複数クラスの指定に留めておくのが安全かもしれません。

CSS Nite LP9 第2回コーディングコンテストで、見事に入賞しました！

2010-04-20T14:56:27Z

Web Site Expert 賞を頂きました

コーディングコンテストの結果が発表されたようです。応募された作品や、入賞した作品へのコメントも掲載されているので、見てみると面白いかもしれません。

前回の記事の CSS Nite LP9 第2回コーディングコンテストに応募しましたで応募したコンテストで、見事入賞することができました！（結果発表はこちら）

時間があまり取れず、最後の方は急ぎ足で作ったのと、HTML5.JP を運営している羽田野さんの書籍：徹底解説HTML5マークアップガイドブックを応募後に読んで、なんだか色々と「ああしておけばよかった・・orz」としきりに後悔していましたが、幸いにも賞を頂くことができました。

ただ、今回のコンテストでは最優秀賞はいなかったとのこと。
次回（もしあれば）は最優秀賞をもらえるよう、がんばりたいと思います。

今回のコンテスト参加で、賞以前に、とても勉強させてもらいました。
一度、がっつりとコーディングをしてみることで色々なものが見えてきます。
まだ上記の結果発表ページの下から、デザインデータなどがダウンロードできるのでコンテストに関係なく、コーディングルールを意識して制作してみると色々と勉強になっていいと思います。時間があるかたはぜひ、チャレンジしてみてください。

いちおう、CSS Nite LP9 にも参加してきたんですが、あいにくお通夜と重なってしまい、一番見たかった最後の 3 セッションは結局断念・・(´；ω；｀)　とりあえずそのセッションに関しては公開されているスライドを見て気を紛らわせることにしますｗ

CSS Nite LP9 第2回コーディングコンテストに応募しました

2010-03-28T06:47:00Z

無事、コーディングコンテストに応募できました。

なんと見事、コーディングコンテストで受賞しました！詳細はこちら！

以前 CSS Nite LP9にて、第2回コーディングコンテスト開催決定。で書いたコーディングコンテストに応募しました！

なかなか時間が取れず、結局最後の 3 連休で時間を作って大慌てで作成しました。作業時間としては大体 13 時間くらいかな？
だからというのでもないですが、今見直すと色々と直したいところがちらほら・・。

しかし、実際に作ってみてとても勉強になったいい課題だったと思います。
CSS3 を前提としているからか、「あ、きっとこれはこれを使うことを考えてるんだろうな」みたいなところが見え隠れして、細部まで考えられてるなーというのが印象に残ってます。

ということで、とりあえず応募したのはこんな感じになりました↓

http://css-eblog.com/eblog_sample/1003/lp9cc/

応募した感想

作ってみての感想をちょろちょろと書いてみます。
そして制作に当たる前に念頭において作業に当たったテーマが "とにかく減らせる部分は減らす" ということ。例えば画像だったり、class名だったり、要素だったり。

色々見ていくと結構減らせるところがあるんです。特に画像なんかは。なのでコンテスト以前に、どこまで減らせるものなのか、っていうことに挑戦しようと思って制作に当たりました。（まぁ結局精査できずに、冗長になってるところとかありますが・・）

CSS3 についての感想

今回の主題のひとつ。そして CSS-EBLOG って名前のブログなので、ここを重点的に書きたいと思います。

作成し終えての感想としては "とにかく CSS3 は面白い！" ということ。
マークアップを終えて、「さーCSS当てるぞー」ってなったとき、とにかくできることが豊富なので（そして普段の案件ではまず使わないプロパティ目白押しなので）一瞬手が止まるｗ　「あ、ここはこのプロパティでいいのか・・」みたいな感じで、なんかついつい普段使ってるテクニックを使ったりなんかして、書き直したり、みたいなことがありました。
でもやっぱり、「あー、これ使えるなら楽だわー」ということのほうが圧倒的に多かったｗ

各カラムの高さを揃えるなんてdisplay: boxで OK だし、角丸も画像要らないし、グラデも楽チン。

あ、そうそう、今回の制作で（自作ですが）とても重宝したツールが Photoshopライクな操作で手軽に作れるCSS3ジェネレーターです。ちらほらグラデを利用したデザインだったので、PSD から色をとりつつ、このツールでグラデを作ってはコピペ、を繰り返してました。~~あー、ここの文脈に aside 使いたい・・~~

box-shadowなんかも大いに役に立ってくれました。（これが使えないだけでほんとにめんどくさい作業になる・・。どうか仕様に戻ってきてください）

参加された方の twitter のつぶやきなどを見ていると、グラデ＋パターンどうしよう、というのを見たりしました。これを通常の案件でやられたら、実現するのにかなり悩みますが、CSS3 の multiple background と linear-gradient を使えば、パターン用の小さい画像ひとつ用意するだけで簡単に実現できてしまいます。

なので、デザインの再現、という部分においてはかなり楽に作業ができました。「NEW!」なんかのアイコン部分なんかもなにげに CSS のみで実現できちゃいますし。どちらかというと、マークアップのほうが時間がかかったかも。ただ 1 点、「ライセンスについて」の説明部分で、情報詳細へのリンクなどが（文章量に関係なく）横一列に並んでいるデザインだったので、ここの実装がすごい手間取りました。（ボックス全体が同じ高さなら楽なんですが、途中だけ同じ高さ、みたいな感じなので・・）

とにかく、制作したことで色々な発見があってすごい勉強になった課題でした。もし参加されていない人も、応募締め切りは過ぎていますが、挑戦するとすごい勉強になるのでおすすめですよ！

HTML5 についての感想

こちらも今回の主題のひとつ。そして HTML5 は勉強不足でした・・。応募終了後、締め切りを過ぎてからちらほらコンテストについてのコメントが流れ始めたんですが、「あー、ここはこれがあったかー！」なんて気づきがあったりして、もっと勉強せねば！　という思いにかられました。

ただ、実際に組んでみて思ったことは "HTML の見通しがとてもいいこと"。
どういうことかというと、sectionやnav、headerなど、要素名自体に意味があるものが増えたことで、div によるマークアップが減ったこと。結果、なにを意味している部分なのか、というのが見やすくなったわけです。

さらに、これは CSS3 前提というのも大きくて、普段なら色々入れ子にしたり、class 名をつけたり、ということをしないといけない部分をかなりクリーンに保つことができたことです。子供セレクタがあるおかげで、汎用的な要素に対しても特に class 名をつけたりすることなく、気軽にスタイルを当てることができました。

将来的には（しっかりと作りさえすれば）とても見やすく、メンテナンス性の高いものが作れるようになるんだろうなーというふうに思っています。

ちなみに、CSS HappyLife さんが HTML5 ざっくりメモなんてものを書かれてて、ここを見て「そうだったかー」という発見もあったり。分かりやすく書いてくれているので、一度見ておくといいかも。

全体を通しての感想

さて、色々と書いてきましたが、ちょっとだけ気になった部分などを。
メンテナンス性や HTML をクリーンに、と書きましたが、場合によっては今以上に厳密に設計しないと大変なことになるかなーということも同時に感じたのでそれを書きたいと思います。

まず、nth-child の擬似クラス。
とても便利で、使い勝手のいいものですが、更新などについてよく考えて使わないと、ただ単に「上から 3 つ目の p 要素だけ背景色これね」みたいな感覚で使ってしまうと、もし更新が入った際に、そのひとつ前になにか要素を追加しなければいけなくなったとき、同様にして CSS も修正しないといけなくなります。

なので、擬似クラスにもしっかりと意味を与えて、例えば 3 つ目の li 要素は margin を 0 に、みたいに前後になにか要素が入った場合でも、必ず「3 番目に意味がある」という感じで使わないととても修正が大変になってしまいそうです。

それから、様々に追加されたセレクタを駆使して実現するデザイン。これは、「やっぱりこれこっちに移動しよう」みたいになったときに、今までのように class 名をつけておけば HTML だけの移動で済んだものが、あまりに擬似クラスなどのセレクタに頼りすぎていると、やはり CSS 側での修正が入ってしまう可能性があること。

ユーザスタイルシートなどで、HTML をいじれないけど・・みたいなときはとても効果を発揮してくれそうな各種セレクタですが、新規の構築時には意味をもたせるという意味でも、妥当な class 名は指定しておいたほうがいいかもしれません。（あくまでモジュール単位を意識して、全部につける必要はないと思いますが）

さて、色々と書きましたが、実際に作ったものを見て、色々と突っ込んでくれると勉強になるので嬉しいッスｗ

box-shadowを使った面白演出 - CSS3で遊んでみる4

2010-03-08T05:04:00Z

今回のネタは、box-shadow を使った、ちょっと面白い演出とデザインの紹介です。
box-shadow は現在、最初に書かれていた仕様の CSS Backgrounds and Borders Module Level 3 からは削除されおり、まだ策定中の段階ですが、先日リリースされた Opera10.50 ではベンダープレフィクスが取れた状態で使用できるようになっています。（なぜ・・・？）

そのため、Firefox や WebKit 系ブラウザで使うには-moz-や-webkit-のベンダープレフィクスが必要です。

また今回のネタでは、transition プロパティに対応している WebKit のみ、アニメーションの演出を見ることができます。
いちおう Opera10.50 でも transiton には対応したのですが、box-shadow へのアニメーションは適用されませんでした。

ということで、百聞は一見にしかず、ということでデモを見てください。

デモ

http://css-eblog.com/eblog_sample/1003/box-shadow-tips/

ダウンロード

http://css-eblog.com/eblog_sample/1003/box-shadow-tips/box-shadow-tips.zip

今回のネタの解説

今回使用しているのはbox-shadowがほとんどです。
box-shadow の使い方は以下の通りです。（※現在は草案からも消えているので、今後仕様が変更される可能性があります[2010/03/06 現在]。下の書式については、mozilla developer center を参考にしました）n

inset は、Photoshop で言うところのシャドウ内側に当たる指定になります。
続いて左から順に、X 座標のずれ、Y 座標のずれ、ぼかしの度合い、シャドウの幅、色、となります。
offset-x, offset-y, spread-radius に関してはマイナス値も指定することができます。

inset を指定すると、効果がボックスの内側に作用するようになります。今回のネタは、この inset を使ったテクニックです。n

box-shadow の値は複数指定することができる

デモのソースを見てもらうと分かりますが、box-shadow プロパティの値には、複数の値を指定することができます。（指定する場合は、カンマ区切りで列挙します）
つまり、外側に普通のドロップシャドウをつけつつ、inset を利用してちょっとした装飾ができる、というわけです。例えば、n

上記のように、カンマ区切りで外側のシャドウと、内側に 1px のボーダーのようなシャドウを指定することができます。
内側に 1px のハイライトを入れることによって、立体感を増し、よりディティールを意識したボタンをデザインすることができるようになります。n

またカラーには RGBa も使えるので、透明度を調整することで色を直接指定するよりも直感的にデザインすることができます。n

幅のサイズを変更したり、X 座標のずれを調整したりすることを複数指定でいくつも適用することで面白い演出が可能です。
Photoshop のレイヤースタイルでやるようなことが結構実現できると思うので、色々いじってみてはどうでしょうか。n

画像は一切使用していません

ちなみに、今回のサンプルでは画像を一切使っていません。グラデーションも CSS3 の機能を使って描いています。
そのため、Firefox3.6、Google Chrome, Safari でしか正常に動作しません。

グラデーションの指定は結構めんどくさいですが、以前作った Photoshopライクな操作で手軽に作れるCSS3ジェネレーターを使うと、比較的簡単にグラデーションのソースが生成できるので、よかったら利用してみてください。n

合わせて読むと役に立つかもなエントリー

CSS Nite LP9にて、第2回コーディングコンテスト開催決定。

2010-02-21T14:09:00Z

表題通り、4/17に開催される CSS Nite LP9 にて、コーディングコンテストが開催されることになりました。

あらかじめ用意されている PSD データを基に、自分の考えに基づいてコーディングを行い、テクニック、デザイン再現性、メンテナンス性の高さを競うものです。

さらに今回のコンテストはなんと、HTML5+CSS3 でのコーディングとなります。
HTML5 とか CSS3 まだ使ったことないんだよなーという人も、この機会に参加してみてはいかがでしょうか。いちおう自分も参加するつもりでおります。

しかも発表は、CSS Nite LP9 イベント当日に行われるそうです。いくつかの賞が用意されているようで、最優秀賞作品はシックス・アパート公式サイトで公開されるようです。（デザインサンプルの提供がシックス・アパートで、コンテスト対象のデザインも MT5 のページ 1 ページをコーディングする、というものです）

対象ブラウザも Firefox3.6 と Safari4 と、かなり思い切ったものなので、思う様 CSS3 を書くチャンスですｗ
なかなか実務で使うことが難しい CSS3 ですが、たまに CSS3 のサンプルを書くとあまりにも楽なセレクタや表現の幅の広がりに涙が出そうになります。
そういった CSS3 の素晴らしさを知る、という意味でも参加してみると面白いと思います。

CSSのみで袋文字を実現する - CSS3で遊んでみる3

2010-01-29T01:46:00Z

今回も CSS3 で遊んでみるシリーズです。
"今回のネタは、CSS3 で袋文字を作る"、です。

いちおう、WebKit では -webkit-text-strokeというそのものズバリなプロパティがありますが、そもそも WebKit しか対応していないこと、また微妙に縁がテキストにかぶるので（現状のままだと）使いづらい、というのがあります。

今回のネタは、見栄えはよくないですが、いちおう IE にも対応させてあります。
ただ、やっぱりネタなので実践で使うには「？」ですが、こんなこともできるよーという感じでご覧下さいｗ

ちなみに、色々なサイズを見られるように JavaScript を使って境界線の太さを調整できるようにしてあります。また、~~使う人がいるか分かりませんが~~ 設定したものを CSS として書き出すようにしてあります。

デモ

http://css-eblog.com/eblog_sample/1001/text-stroke/

解説

今回のネタは、ズバリtext-shadowです。
実はこのプロパティ、値を複数指定してシャドウの部分をいくつも作れるのです。
それを利用して、円状に微妙にずらしたシャドウをいくつも指定することで袋文字を実現している、というわけです。

なので見てもらうと分かりますが、かなりの量のコードを吐きますｗ
実際これを組み込むのは骨だよなーと思ったのが「ネタ」という位置づけにした理由です。
いちおう JavaScript で自動で生成しているのでそれをコピペすればそれほど大変ではありませんが、負荷的にどうなのかとか、そのへん一切考えていないのでやはり微妙かなと。
ただ、"text-shadow の値を複数指定する" というのは意外と使い道があったりするのかなーというのもあって、今回ネタを考えてみました。

それといちおう、filter プロパティを使って IE にも対応させています。ただ、正直 IE での表示はきれいなものとは言えませんｗ　なので使うときは自己責任で・・・。

RGBaを使ったプログレッシブ・エンハンスメントと注意点

2010-01-27T05:16:00Z

いきなりはてブで vantguarde さんに突っ込まれました・・。今回の件はプログレッシブ・エンハンスメントではないですね。フォールバック、というらしいです。
プログレッシブ･エンハンスメントは、「なくても内容が破綻しない」というときのことですね。今回は "代替" を用意してるので違う、と。てか、こうなるとすでにタイトルが破綻してる気が・・ｗ　とりあえず積極的に新しい技術を使っていこう、という気持ちは変わらないので、このままにしておきます、ってことでいちおう注意。
ちなみに CSSのプログレッシブエンハンスメントの例にちょっと詳しく書いてありました。

ちょっと面白い記事を見つけたので紹介です。（元記事： IE Background RGB Bug）

概要はというと、単一セレクタによる指定で RGBa に対応していない IE6, 7 に対処しつつ、対応しているブラウザには RGBa を適用させる、というときの注意点です。

デモ

http://css-eblog.com/eblog_sample/1001/rgba-pe/

RGBa を使う

RGBa は、IE6, 7 は対応していません。なので、もしそのまま指定すると当然、IE6, 7 では背景色がない状態になってしまいます。
背景色がなくても問題ないこともありますが、例えばベースのテキストカラーが白（黒背景）で、見出しだけ白っぽい背景にした、などという場合、当然その見出しに載せるテキストカラーは黒に近い色になると思います。

そんなとき、もし背景色が表示されないとなるとテキストが見づらいばかりか、最悪の場合見れない、などということにもなりかねませんよね。
なので、RGBa に対応していない IE6, 7 であっても適切に文字が見えるようにしなければなりません。

CSS ハックを利用して、IE6, 7 だけに改めて背景の色を指定する、ということも考えられますがやや冗長になってしまいます。そこで、ひとつのセレクタ内で完結する記述方法が下記です。

CSS ソース01

こうして並べて記述することで、IE6, 7 とモダンブラウザ双方とも背景色が表示されるようになります。

注意点

しかし、元記事でも触れていますが、この方法、ショートハンド（backgroundのみのもの）で指定しないと IE6, 7 では反映しないようです。なので、下記のように書いてしまうと IE6, 7 では背景色が表示されません。

CSS ソース02

プログレッシブ・エンハンスメントという考え方

最近では、モダンブラウザで使える機能は積極的に使い、IE6（場合によっては IE7）などの対応していないブラウザに対しては同じような表示になるよ代替を用意する、という "プログレッシブ・エンハンスメント" という考え方が徐々に広まってきています。
RGBa はとても使いやすい機能なので、積極的に使っていきたいですね。

ちなみに、IE6, 7 では RGBa に対応していない、と書きましたが、filter をうまく使うと RGBa のようなことを実現することは可能です。以前、IE6, IE7でもRGBaを使うという記事を書いたので、よかったら参考にしてみてください。

CSSのみでグローバルメニューのhover以外をぼかしてhover中ボタンを強調する

2010-01-19T14:51:00Z

今回のテクニックは、以前書いたピュアCSSで実装する DKIR を応用した画像ボタンのロールオーバー効果の応用版です。
なので HTML はいじらずに、CSS の変更だけで実現しています。

また、今回のテクニックは ul, li 要素に対して:hover擬似クラスを使って実現しているためIE6 は未対応です。が、IE6 でもマウスオーバーの効果は正常に動作するので、IE6 以外のモダンブラウザ向けに仕込んでおくといい感じです。いわゆる "プログレッシブ・エンハンスメント" ってやつですねｗ

デモ

http://css-eblog.com/eblog_sample/1001/ul-rollover/

ダウンロード

http://css-eblog.com/eblog_sample/1001/ul-rollover/ul-rollover.zip

今回のテクニックの肝はやはり前回同様、z-index のマイナス値による画像置換になります。
ただ、今回は "ul 要素に対して :hover 擬似クラスを使い、マウスオーバーしていないボタンを画像置換"しています。

HTML ソース

CSS ソース

#menu {
            /* ぼかし画像を指定 */
            background: url(bg_blur.png) left top no-repeat;
            zoom: 1;
        }
        #menu:after {
            content: ".";
            clear: both;
            display: block;
            line-height: 0;
            height: 0;
            visibility: hidden;
        }
        #menu:hover li a {
            background-image: none;
        }
        #menu:hover li img {
            position: relative;
            z-index: -1;
        }
        #menu:hover li:hover a {
            background-image: url(menu.png);
        }
        #menu li {
            float: left;
        }
        #menu li a {
            background: url(menu.png) left top no-repeat;
            display: block; /* Firefox2用の指定 */
            display: inline-block;
            vertical-align: top;
        }
        #menu li.product a { background-position: -135px 0; }
        #menu li.about a { background-position: -255px 0; }
        #menu li.blog a { background-position: -375px 0; }
        #menu li.contact a { background-position: -495px 0; }
        #menu li a:hover {
            position: static; /* IE6用の指定 */
        }
        #menu li a:hover img ,
        #menu li#current a img {
            position: relative;
            z-index: -1;
        }

解説

このテクニックの要は#menu:hover li aと#menu:hover li imgの部分で、hover 時に a 要素の背景を非表示にし、かつ img 要素を ul 要素の背面に移動させることです。

こうすることで、#menu 内のボタンすべてが ul 要素の背景に隠れることになります。そしてこの ul 要素にぼかしをかけた画像を配置しておくことで ul 要素にマウスオーバーした段階でメニューがぼける、というわけです。

ただ、これだけだとどれをポイントしているか分からないので、#menu:hover li:hover aとすることで、ul:hover の中にある li:hover、つまり現在ポイントしている部分の a 要素の背景だけを復活させ、マウスオーバー処理を実現する、というわけです。そしてこれら ul:hover, li:hover は IE6 では対応していないためぼかしの部分は動作せず、マウスオーバー処理だけが実行されるため IE6 でも問題なくマウスオーバーの効果が得られる、というわけです。

ただ本当は、:not(:hover) が使えればもう少しスマートにできたんですが、あいにくとこれは IE ではいまだに対応してないのでややめんどくさい方法で実装しています。そのおかげで、IE7で動作するので、そこそこ使えるかなーなんて思ってます。

それから前回のものと同じ仕組で実現しているので、画像オフの場合でもアクセシビリティを保ったまま実装できる点もポイントです。最近は、IE6 でも問題がなく、でもモダンブラウザで見てる人だけにちょっとしたお楽しみ♪ 的な感じでこういったことを実装するのが結構好きだったりしますｗ

web creators vol.98で1記事執筆しました

2010-01-13T04:52:00Z

明けましておめでとうございます。
新春一発目のネタが、去年の 12 月に発売された雑誌の内容ですみませんｗ

今年は転職を予定していたりと、色々新しいことがありそうな感じです。

さて、12 月に発売された web creators では、「WEB制作テクニックの新標準2010」という特集で 1 記事担当しました。
今回は読み物系の記事だったので結構大変でした；

が、とてもいい経験になりました。特集の中で、レイアウトについて書いているので読んでいただければ幸いです。

こうして執筆をしていますが、逆に執筆することによってとてもたくさんのことを学ばせていただいています。逆に書けば書くほど、もっとがんばらねば、という気持ちにさせられます。
今年は、勉強会をしてみたりと新しいことをやっていきたいな、なんて思っていたりもします。

このブログでも、なにか新しい動きが出せればなーと思っているので、これからも CSS-EBLOG をよろしくお願いします。

合わせて読むと役に立つかもなエントリー

ピュアCSSで実装するDKIRを応用した画像ボタンのロールオーバー効果

2009-12-22T13:00:00Z

最近、「XHTML&CSS超高速コーディング術」という牧野工房さんが出している本を読みました。その中で、画像のロールオーバー効果を CSS で実現しているくだりがありました。n

そこではvisibility: hiddenを利用したテクニックが載っていました。
概要としては、メニューなどの部分を普通に img 要素でマークアップしておき、マウスオーバー時や閲覧中のカテゴリの画像を背景にして該当の場合に img 要素を文字通り非表示にする、という方法で実装していました。n

が、その場合だともし画像オフの場合や、オフにしていなくても回線の問題などで画像が表示されていないような場合に、マウスオーバーしたとき（あるいはカテゴリ閲覧中）に情報がまったく見れない、ということが（少ないですが）可能性としてありえるのでは、と思いました。n

そこで、以前書いたこれで決まり？な画像置換 - DKIR を応用した、上記のような場合でも情報が見れなくならないようなロールオーバー効果を実現する方法を書いてみたいと思います。n

デモ

http://css-eblog.com/eblog_sample/0912/dkir-rollover/

ダウンロード

http://css-eblog.com/eblog_sample/0912/dkir-rollover/dkir-rollover.zip

今回のテクニックは、前回のものと同様、z-indexのマイナス値を利用したものになります。
なぜそうなるのか、という理由については前回のエントリーを参考にしてください。そちらには詳しく図説もあります。n

さて、まずはマークアップから見ていきます。といっても、今回はまったく普通のマークアップになります。（不要な span 要素などは一切ありません）n

HTML ソース

見ての通り、基本的な画像を使ったメニューのマークアップですね。
なので、逆に考えればこのようにマークアップしている場合は、ほぼ CSS のみで対応可能、ということになります。n

CSS ソース

前回と同様、隠したい部分の要素（img 要素）に z-index: -1 を指定します。
こうすることで a 要素の下に img 要素が潜り込みます。そしてこれが今回のテクニックの主題ですが、もし仮に画像がオフだったり、読み込みがされていなくても、メニューに指定した画像は alt 属性でテキストが表示され、下に潜り込んだとしてもそもそも画像が読み込まれていなければテキストは画像で隠れないので、結果テキストは表示されたままになる、というわけです。n

使う上でのポイント

このテクニックを使う上でのちょっとしたポイントです。n

IE 対策の注意点

注意点としては#menu li a:hoverに指定しているposition: static です。n

これは IE6 対策です。なので、モダンブラウザでは必要のない指定になります。n IE6 の場合、a 要素自身もなにか変更がないと、hover 時に子要素に変化をさせたい場合でも変化がおきません。hasLayout あたりの問題だと思っているのですが、それを回避するためです。n

理由については画像のマウスオーバーで、離れた位置に拡大画像を表示するの「新発見したこと」で詳しく書いているので参考にしてみてください。n

a 要素に display: inline-block を指定する

もう 1 点は、a 要素にdisplay: inline-blockを指定していることです。
これは、a 要素をブロック要素にしないとしっかりとエリアが確保されないためです。（指定しないと、img 要素が a 要素の後ろに潜り込んだときにおかしな表示になってしまいます）n

ただ、display: blockを指定してしまうと、幅を明示しないといけなくなってしまいます。
そこでdisplay: inline-blockを使うわけです。（これならインライン要素としての性質もあるので、子要素（img 要素）の幅までしか広がりません）n

さらにこのdisplay: inline-block、IE にもちゃんと対応しています。（ただし、対応しているのはインライン要素のみ、という限定的な対応の上、仕様通りの実装ではなく、display: inline + hasLayout が true、というちょっと特殊な状態になります）n

ただ、IE には対応していますが、逆に Firefox2 では対応していません。その代わりに指定しているのがdisplay: -moz-inline-boxです。
これは、Firefox が独自に実装している値で、display: inline-blockとほぼ同様の動きをします。厳密に言うと違いがあるのですが、今回のサンプルでは問題がないので説明は割愛します。n

上記の部分を指定しておくことで、画像サイズと同じに a 要素のサイズが拡張されるので CSS 側の指定が少なくて済む、というわけです。（ちょっと分かりづらいですが、HOME 部分だけちょっと横幅が大きいものを指定しています。それでも、CSS 側の指定に一切手を加えることなくロールオーバーの効果が実現できているのが分かると思います）n

このテクニックを使う上でのメリット

最後に、今回は CSS Sprite を利用していますが、ロールオーバー用の画像を個別に書き出してそれぞれに指定しても問題ありません。しかも、普通に背景に指定しているのでロールオーバーでありがちな画像がチラつく、という問題がないのもメリットのひとつです。n

「XHTML&CSS超高速コーディング術」を読んだ感想

最後にちょっとだけこの本を読んだ感想を書いてみたいと思います。
内容は、「コーディングの徹底的な効率化の実現方法」です。n

読んでいて感じたのは、大体の場合においてここまで徹底はできないのではないかな、ということと、ルールを厳格化する上で、ブラウザの表示時のパフォーマンスをややないがしろにしているのでは、という印象を受けました。n

ただ、非常に効率的なことが書いてあるので、ポイントポイントで拾っていくことで管理がしやすくなるんじゃないかな、というのも同時に感じました。n

こういった本を読むのは久々だったんですが、「なるほどーこんなやり方があったんだ！」っていう気付きもあったりしました。やっぱり本を読むのは大事ですね。また、こういった管理方法などを読むことで自社にはない方法に気付けたり、それを取り入れたりできると思うので一度読んで見るといいかもしれません。n

合わせて読むと役に立つかもなエントリー

Photoshopライクな操作で手軽に作れるCSS3ジェネレーター

2009-12-17T05:49:00Z

[09/12/22]: Opera でもいよいよ border-radius に対応するようです。また、W3C の「CSS Backgrounds and Borders Module Level 3」が勧告案（Candidate Recommendation）になったためか、Opera ではプレフィクスがないようです。
なので、プレフィクスのない border-radius プロパティも出力するように修正しました。n
[09/12/18]: 若干機能追加を行いました。
作成したものを、IE の独自拡張である filter を用いて、同じような表示になるソースも出力できるようになりました。
ただ、そもそもの実装が違うので完全には再現されません。（グラデーションが最初と最後の色しか指定できない、など）n

今まで、CSS3 のグラデーションを利用したサンプルの作成を作成するとき、Photoshop っぽい感じでグラデーションが作れたらなーと前から思っていたので、最近 JavaScript から遠ざかっていたのもあって思い切って自分で作ってみました。

メインはグラデーションの作成ですが、Photoshop ライクなものを目指したので、Photoshop では当たり前のように出来るドロップシャドウなんかも設定できたら便利かな、と思って付け加えてあります。n

ちなみに、CSS3 のグラデーションがメインなので、"CSS3 のグラデーションに対応している Firefox3.6β以上か、WebKit 系のブラウザでしか動作しません"。n

色々チェックはしていますが、もし不具合なんかあったら連絡もらえるとうれしいです。
連絡いただける際は、この記事へのコメントか、問い合わせからお願いします。n

Photoshop ライクな CSS3 ジェネレーター

http://css-eblog.com/eblog_sample/0912/css3-generator/

作ってみた感想など

今回は、CSS3 のプロパティを出力するのが目的だったので、そもそも CSS3 に対応していないブラウザはすっぱり切り捨てましたｗ　なので、全体的に CSS3 をめっさ使ってます。n

加えて、IE6 などのブラウザを切り捨てたので、気兼ねなく色々なセレクタを使ったりしてとてもコーディングが楽でした。
CSS3 が当たり前になったらこんなに楽になるんだなー・・としみじみ思いました。早く、CSS3 をメインで使ってコーディングがしたい・・・。n

ボタンに光のエフェクトを加えるCSS3 - CSS3で遊んでみる2

2009-12-15T05:27:00Z

考えてみたら -webkit-animation についての記事を書いていなかったので、ちょうどいいかなーと思いつつエントリー。n

今回の記事は、これで決まり？な画像置換 - DKIR で紹介したz-indexのマイナス値と、-webkit-animationを使ったボタンに光るエフェクトを加える方法の紹介です。n

前回に引き続き、CSS3 で遊んでみるの第 2 段ですｗ
ちなみに今回のサンプルは、WebKit 系が先行実装している-webkit-animationを使ったものなので、Google Chrome や Safari で見ないとまったくなにも起こりませんのであしからず。（ただ、逆を返せばその他のブラウザ（もちろん IE6 も）では変化がないので、WebKit 系ブラウザで見た人向けに仕込んでおく、なんていう使い方もできちゃったりします）n

デモ

http://css-eblog.com/eblog_sample/0912/flash-button/

ダウンロード

http://css-eblog.com/eblog_sample/0912/flash-button/flash_button.zip

HTML ソース

CSS ソース

解説

ざっくりとやっていることを解説すると、img 要素には普通にボタンの画像を指定します。
次に、その親要素である span 要素に今回の主題である光を表現する画像（透明→白→透明のグラデーションをした PNG 画像）を指定します。n

これです↓

ただこれだとただの背景になってしまうので、これで決まり？な画像置換 - DKIR で紹介した z-index にマイナス値を与えて、親要素の背景を表示させるテクニックを使います。n

そうするとことで、背景に指定した PNG 画像がボタンの前面に来ます。
さらに、WebKit 系が先行実装している-webkit-animationを使って背景画像を左から右に移動するように CSS を設定します。n

この部分が左から右に移動するように設定している部分です。@-webkit-keyframes ***でアニメーションの名前を定義します。
各 % はあとで設定するアニメーションする時間に対する割合になります。なのでもしアニメーション時間を 10 秒と設定したとすると、02 秒かけて background-position が 195px 0 へ移動します。そのあとは指定した % 通りに色々と変化していくわけです。n

ただ今回のサンプルの場合、エフェクトが発生する間隔を調整したかったので、20% から 100% は変化がありません。（つまり光のエフェクト用の画像をとめている、ということです）n

そして、設定した時間が経過すると、さらに別に指定した回数分繰り返し処理されます。
ただ今回のサンプルでは infinite を指定しているので無限ループとなります。n

この部分が、アニメーションの時間や繰り返し回数などを指定している部分です。
最後の行が、上で定義したアニメーションの種類を設定している部分です。（-webkit-animation-name: flashの部分）
もちろん、複数のアニメーションを定義している場合は、名前をカンマで区切って列挙することで複数指定することも可能です。n

こうすると、背景の光のエフェクト部分が一定時間置きに左から右へ流れ、かつ z-index のマイナス値のテクニックでその背景画像がボタン画像の上を通過するようになる、というものです。n

-webkit-animation とは

さて、-webkit-animationとはなんでしょう。
知っている人もいると思いますが、現在 CSS3 で策定中のアニメーションを定義する CSS です。n

個人的に、アニメーションってスタイルなのか？　という疑問はあったりしますが（ｗ）、とにかく現在策定中のもので、WebKit 系が先行実装しています。（なので -webkit- のプレフィクスがついています）n

似たようなものに、CSS3はアニメーションも指定できる！で紹介した-webkit-transitionがありますが、こちらは :hover 擬似クラスなど、特定の条件下でのアニメーションを想定したものです。
いちおう今回紹介したアニメーションも :hover 擬似クラスなどのユーザーの操作をキーにアニメーションを開始することもできます。n

その場合は、マウスオーバー中に限ってボタンが発光を繰り返す、みたいな使い方ができます。Flash などでよくありそうな効果ですね。そういった使い方も面白いかもしれません。n

いやーこういう遊び記事を書くのは楽しいですねｗ
なので今回も特に使いどころとかは考えていませんｗn

またまた勉強会で発表してきました

2009-12-13T11:15:00Z

前回に引き続き、またまた勉強会で発表してきました。n

今回の趣旨は、以前参加した CSS Nite で得た知識（HTML5）を自分なりにまとめて情報シェアする、というものでした。
それに加えて CSS3 も織りまぜてみました。n

そのときに作成した資料もアップしてあるので、下の動画と連動して見てもらえると内容が分かりやすいと思います。
興味ある方はぜひぜひ見てみてください。そして勉強会に興味がある方は、mixi のコミュに参加してもらえれば気軽に参加できる勉強会なのでよかったら参加してみてくださいね。n