CSS3指定時のエラーチェック

すっかり更新も滞り、2ヶ月に1回くらいのペースに
なってしまっていますね。。
忙しい…とは言わなくても、私、継続性に欠けるんです。苦笑

さて。
先日からスマホサイト制作を行っており
新しいHTML5やCSS3に驚きと楽しさの連続です♪

ただ、サイト制作を1からやる機会が少ない為
エラーが出た時にどう対処して良いやら。。。
今回も凡ミスで3日ほど悩みました(*_*)

CSS3で便利になった点が、いくつもあります。
・画像を用意しなくても、丸角が作成できる
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
 …角を8pxに丸めた場合。実装の問題があるので、下2つの記述も
  合わせて行えば安心です。
  ≪+α≫
  border-top-left-radius:18px;
border-bottom-left-radius:18px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
-webkit-border-top-left-radius:18px;
-webkit-border-bottom-left-radius:18px;
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-top-left-radius:18px;
-moz-border-bottom-left-radius:18px;
-moz-border-top-right-radius:4px;
-moz-border-bottom-right-radius:4px;
 …こんな風にすると、左上下の角は18pxで、右上下角は4pxになります。

・画像がなくても、グラデーションが作れる
background-color:#FCF;
background:-webkit-gradient(linear,left top,left bottom,from(#FFF),color-stop(50%,#FCF),to(#FFF));
background:-moz-linear-gradient(center top,rgb(255,255,255)0%,rgb(255,204,255)50%,rgb(255,255,255)0%);
 …「center」と「top」の間は半角ですm(_ _)m
  一応backgroundをしいておきます。
  グラデーションの種類はlinerで線形、circleで円形です。
  上の記述だと、左上から左下に向かって線形のグラデーション。
  中間の50%の位置で#FCFとなり、両端は白(#FFF)です。
  パーセンテージの間は自動で調節してくれ、位置は適宜
  増やすことが出来ます。

  →お気に入りのデモンストレーターです。感覚的に使いやすいです。
  http://gradients.glrzad.com/
  ただ、最新のモダンブラウザ系でないと表示されません。

・テキスト・BOXに影をつけられる
text-shadow:0 1px 0 #FFF;
box-shadow:0 1px 2px #6FC;
 …上がテキスト、下がboxです。(見ての通りですが。)
  値は順に、x軸方向、y軸方向、ぼかし、色  です。
  テキストの影は白ですが、背景をグレー系にして白のテキストシャドウをかけると
  一気にiphoneっぽくなります。
  boxの影は記事をくくった背景や、フォームボタンを目立たせるために使われることが
  多いですね。

この辺りが、画像をフォローするものとして、かなり便利です。
あとはイチイチクラス振り分けをしなくて良くなったのが
:last-child  等の擬似クラス。
これもかなり便利です!

「○○の中で一番最後の○に、このクラスを適用」ってのが
これ一発で出来ます。
その後HTMLを更新しても、常に一番最後の○に適用されます。

ちなみに今回の凡ミスは、-webkit-グラデーションの最後に半角カッコをつけ忘れたこと。。。
下の要素まで巻き込んで、ほぼ全てのスタイルが適用されなくなって
かなり焦りました。。。

よく、「初心者が陥りやすいCSSミス」的なサイトを見つけますが
このミスは初だったので紹介しました。(なかなかいないかしらん。)

WEBマーケティング・PR支援のアイ・カンパニー