RWDってこういうものですよ、についてのスライド

前回、社内の勉強会用につくったCSS3でどんなことができるの？についてのスライドを書いたのですが、恐縮にも下記のサイトで取り上げていただきました。ありがとうございます。

• HTML5/CSS3のニュースやTIPSなどのまとめ (2012年5月14日)
• HTML5/CSS3のニュースやTIPSなどのまとめ (2012年5月21日)

しかし、私がプレゼン用のスライドに、私の名前ではなくスライドテンプレートの作者の名前を入れたまま公開してしまったため、『Operaの方のセミナーか何かの資料？』とコメントいただいていますが、私が作成したもので、Vadim Makeevさんや Opera Softwareには一切何の関係もないことをこちらでお詫び申し上げます･･･。
紛らわしいことをして申し訳ありませんでした。

---

今回は社内勉強会用のスライド第2弾、RWD（レスポンシブ・ウェブ・デザイン）についての雑記をまとめました。
RWDについて

RWDがよく分かっていない人（HTML5とCSS3の境があいまいな人）用に書いた資料なので、技術者視点からすると当たり前のことなのですが、つらつらと書いてみました。

なお、大変恐縮ながら、正直に申し上げますと、作者自身は実案件でRWDの構築をしたことがありません。
あくまでも『情報』『知識』ベースで記載したもので、実践が伴っていない点は個人的にも説得力に欠けるとは思っています。

ただ、あくまでも基本的な考え方はこうなんだよ、ということだけは伝えたくて、資料をまとめました。
どうも、『スマホサイトを作る＝レスポンシブ！』『レスポンシブ＝とにかくすごい！』という短絡的な流れが私の周辺で見えてきていて、その考えが蔓延するのが恐ろしくて、急いで筆を取りました。

レスポンシブは万能ではないこと、どのアプローチもそれぞれメリット・デメリットがあり、要はクライアントとコンシューマーによって、アプローチを使い分けるのが大切なんだよということが言いたかったです。

社内の勉強会用につくったCSS3でどんなことができるの？についてのスライド

社内で毎週持ち回りで技術的なことを話す会があるのですが、
そこで使用したスライドをこちらでも共有しようと思います。

社内の『CSS3って何なの？具体的にどーいうことができるの？』という人に向けて書いたスライドなので、残念ながら目新しいことはほとんど書いていません。

SafariもしくはChromeで動作確認しています。推奨はiPad（MediaQuery部分）
CSS3について

数ヶ月くらい前に書いた資料なので、情報が一部古いかもしれませんがご了承ください。
前述しましたが『CSS3って何なの？具体的にどーいうことができるの？』という人向けなので、技術的な部分を端折ったり簡易化している部分があります。

ツッコミなどございましたらお願いいたします。

見直されるCleafix

私がはじめてClearfixを知ったのは大学3年生のときでした。
Web系の雑誌（CreatorかDesigningか忘れましたが）を読んだのがきっかけだったのですが、
そのときの驚きは本当に大きかったように思います。
（ちなみにそれまではずっと空divを使っていました。汗）

それからこの仕事に就いて、他の人のソースを見てoverflow:hiddenを使ってフロートを解除する方法を知りました。

一時期、overflow:hiddenを案件で使ったこともありますし、
clearfixクラスを使わず、フロートを解除したいセレクタを複数指定し、それぞれにclearfixをかける方法もしました。

ですが今は結局、floatをクリアしたい要素に個別にclearfixクラスをつけるように、自分の中ではしています。

前置きが長くなりましたが、なぜそこに行き着いたのか、記事を元にご説明します。

---

Saying Goodbye to the overflow: hidden Clearing Hack
http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/

簡単に記事の内容を書きますと、（原文の訳ではなく、私の解釈です）
---
まず、「Clearfix」にもうちょっと意味的な名前をつけたらどうか、という提案です。
「Handcrafted CSS」という本でそのような内容が書かれていたことを紹介しています。
（この本、あまりに面白そうだったので注文してしまいました。
円高の魅力に負けAmazon.comで注文したのでShippingにめちゃめちゃ時間かかりそうですが・・・）

そして、一番の理由になるのは、CSS3の新プロパティ、「box-shadow」でしょう。
box-shadowは、ボックスにドロップシャドウのような効果をつけるものなのですが、
それが、overflow:hiddenを使用していると切れてしまうのだそうです。
---

将来的には、display:box;でレイアウトをするようになると思いますので、
floatの解除にoverflow:hiddenは使わなくなるかもしれません。

ただ、CSS3はIE9からしか本格対応されないわけですし、
『プログレッシブ・エンハンスメント』とはいえ、
ボックスが角丸にならないことや、シャドウがないくらいなら許されますが、
さすがにレイアウト崩れは見逃しがたいなぁとは感じています。

だからしばらく、floatを使ったレイアウトはなくならないでしょうし、
それゆえにoverflow:hiddenもまだまだ使いどころがあると感じています。
ですから、box-shadowを使う際は注意したいですね。

---

私は以前、『無駄なIDやクラスをつけない派』だったのですが、
やはり実案件をやってみて、
『ソースを再利用する、マークアップの例外に備える』ことも大切だということに気づき、
もっぱらクラス付与派です。
（ただ、デフォルトのpタグにまでクラスをつけるのはやりたくないですが・・・）

案件によっては、CSSを調整することが難しく、HTMLだけで何とかしてくれといわれることもあり、
Clearfixに限ったことではないですが、その際やっぱりクラス付与型にしておくとメンテナンスが楽なんです。


・・・自分もだいぶ変わったなぁ・・・・・・（遠い目）


新しい技術が出ることによって、今までのマークアップもコーディングもだいぶ変わっていくでしょうね。
というより、自分のやり方、古いやり方を再考するきっかけにしなければと思いました。

---

記事を書くきっかけをいただいたサイト

clearfixハックは本当に必要なのか：
http://blog.till-daylight.org/archives/167-clearfix.html

Saying Goodbye to the overflow: hidden Clearing Hack：
http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/

【おまけ】短いClearfixはじめました。
A new micro clearfix hack：
http://nicolasgallagher.com/micro-clearfix-hack/

CSS3を試してみる gradient border-radius transform box-shadow

気づいたらまた広告が出ていました・・・。（3ヶ月無更新）

仕事が忙しいというのもひとつの理由ですが、
休日にWeb関係の勉強をしなくなったのが大きいです。
この仕事や、HTMLやCSSに情熱がなくなったわけではないのですが、
今、それ以上に情熱を傾けたいものがあるためなかなか難しいです・・・。

昼休みに効率的に情報を仕入れるようにしなければ・・・。と思ってます。

で、
今回は、CSS3を試してみるその２をお送りします。

デモのURLは下記です。
http://www.granshe.com/css3/110103/

今回は
・translate
・gradient
・border-radius
・box-shadow
を利用してみました。

青の矢印リンクアイコンは画像ですが、それ以外は画像は使用せず、CSSのみで実装しています。

---

解説

グローバルナビゲーション：

gradientで今風？のボタンを実装してみました。

メインビジュアル部分：

transformプロパティを実装してみました。
firefoxだと不完全ですが、webkit系だと動くと思います。

個人的にはrotateが楽しくて気に入っています。
translateはロールオーバーの挙動でうまく使えそうだなと思いました。
floatやpositionと併用したときに、どのような挙動をするのか要確認ですね。

メインコンテンツ部分：

2カラムレイアウトはfloatを使わずに実装しています。
display: box;　プロパティです。
ブラウザによって若干挙動が異なるので、
個人的にはしばらくはfloatのお世話になるかなぁという感想です。

フッター付近のボタン：

border-radiusとbox-shadowを使ってちょっとリアルボタンを作ってみました。
「角丸にならない」「影がつかない」くらいの挙動なら、
サイトを使用する際の問題にはならないと思うのですぐ使えそうですね！

---

所感

CSS3に関して、IEは9から対応予定とのことですから、完全実装はまだまだ先になりそうですし、
サイトのレイアウトにかかわるプロパティはなかなか利用するのが難しいかもしれませんが、
「なくても支障をきたさない」、ワンポイントの使用であればそろそろこっそり始めてしまっても良いのでは？
と思いました。

---

特にtransformプロパティのデモを作成するにあたり、
どなたかのサイトを参考にさせていただいたのですが、
ブックマークを忘れた挙句履歴が残っておらず掲載できませんでした・・・。

この場を借りてお詫び・御礼申し上げます。

スクロールで背景画像が消えるバグ

背景画像が入り組んでいるサイトでよく出くわすのが、

• 縦スクロールすると背景画像が消える（主にIE）
• ウィンドウサイズをWebサイトの最小幅より狭くし、横スクロールバーが出た状態でて横スクロールすると、背景画像が消える

こと。
そしてそれを、「ブラウザの仕様だから仕方ないんだよね」と聞いた。

そんなに難しいことじゃないのでは？と思っていたのでメモしておく。

１．縦スクロールで背景が消える

たいてい、フッターに背景画像を指定し、かつposition系のプロパティを指定しているときに起こる。

２．横スクロールで背景が消える

メインコンテンツに固定幅、その外のコンテナボックスに背景画像を指定し、
メインコンテンツよりもブラウザウィンドウの幅を狭くし、横スクロールバーを動かすと発生することが多いです。

両者とも、背景画像を指定しているボックスに幅や高さを指定することで直ります。
場合によっては、min-width系やheight:1%レベルでも直るかもしれません。

わたしはいまだに、zoomよりもheight1%でIE対策をすることが多く、、、
他のバグを併発することもあって、使いにくいとは分かっているのですが、
個人的にあんまりzoomが好きではないのですよ･･･。ハックと同じくらいのレベルですが。

今さらの話題ですが、jQueryでCSS3セレクタ系の指定ができるようになったんですね。
ほんと、CSSをいじる人間には便利なライブラリです、jQuery。