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ミス」的なサイトを見つけますが
このミスは初だったので紹介しました。（なかなかいないかしらん。）