短期集中型 アドビ認定トレーニングセンター
m-School (エムスクール)は、駿河台学園グループが運営するITスクールです。

2010年10月12日

効率的なCSSトラブルシューティング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

効率的なCSSトラブルシューティング


今回は、CSSのコーディングミスをいかにさくっと見つけるか、という方法をご紹介します。
「正しく書いたつもりがなぜかスタイルが反映されない」
CSSを書いたことがある方であれば、きっとご経験があると思います。

そんなとき、ただひたすらに目を皿のようにして間違い探しをするのは、あまりスマートな方法ではありません。ロジカルに考え、便利なツール等を使うことにより、間違いは素早く見つけることができます。

考えられる原因


まずは、CSSを書いたのに見た目に反映されない原因を考えてみます。原因がわかれば、自ずと対処方法も見えてきます。

スペルミス、誤記、typo


要するに打ち間違いという一番ベタなパターン。このパターンは地道にコードとにらめっこしてしまいがちですが、まずはいったん引いて原因の切り分けをしましょう。単純な打ち間違いであっても、それがセレクターなのか、プロパティや値なのか、または記号等なのかによって起きる問題は変わってきます。

継承の問題


これはもしかするとドはまりしかねない、「打ち間違いも全くなし、完璧!なのにどうして反映されないの!?」という危険なパターンです。特に、長いコードになっていたり、CSSを複数ファイルに分割管理していたり、あるいは複数の人で1つのファイルを編集していたりする場合に起きやすいトラブルです。

Webブラウザー固有の問題


一番やっかいなパターンです。あなたは決して悪くない!
ですが、その問題が発生するブラウザーをサポートするのであれば、対応せざるを得ないので、こればっかりは調べる&ノウハウを蓄積するしかない…ですが、まず問題が起きたときに「どのブラウザーでも確実に起きているのか」を調べれば、CSSのせいなのかブラウザーのせいなのかは切り分けることができます。

CSS仕様上の問題


初心者にはアリガチですが、たとえばインライン要素にwidthやheightを定義しても反映されません。こればっかりは仕様上の問題なので、勉強して覚えるしかない…かも。

HTMLの問題


どうにもこうにもダメだったらHTMLを疑うケースもあります。終了タグ忘れや、属性の指定方法など、間違いがないかどうかチェックしたほうがいいかもしれません。

対処方法


対処方法をいくつか解説します。まずはCSSコーダー必携ツール、Firebug(またはWeb InspectorやDragonfly)を使う方法です。ちょっとした打ち間違いや継承の問題は速攻で解決できます。

セレクターやプロパティの打ち間違い


例えば下記のようなソースコードがあったとします。
<h1>New job:<span class="sub">fix Mr. Gluck's hazy TV, PDQ!</span></h1>


h1, span {
margin: 0;
padding: 0;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
"メイリオ", Meiryo;
}

h1 {
padding: 3px 10px;
border-left: solid 10px #127899;
color: #1a8bb2;
font-size: 24px;
}

.sub {
display: block;
border-top: dotted 1px #127899;
font-size: 14px;
}


正しく書かれていれば、次の画像のように表示されます。

CSSが正しい場合のブラウザーでの表示

Web Inspectorで見た場合

CSSをわざと間違えてみます。
クラスセレクターのsubをsabに変えてみました。当然、ルールは効かなくなります。Firebug等で該当箇所を見てみます。今回はWeb Inspectorを使っています。

subのルールが表示されていない

すると、ルールごと全く表示されていないのがわかります。この場合、ルールが全く適用できていないので、セレクターが間違っている可能性が大です。

今度は一部のプロパティ名だけ間違えます。
displayをdisprayにしました。

displayのみが表示されていない

この場合、ルール全体は適用できていますが、間違ったプロパティだけが適用されていません。間違った場所はとても簡単に見つかります。ここでは省きますが、値に間違いがあった場合も同様です。

継承の問題


次に、やっかいな継承の問題です。これはコード自体には間違いがないので気づきにくいのですが、ツールを使えば簡単に見つかります。

取り消し線で打ち消されたプロパティ

取り消し線が引かれているプロパティに注目してください。これは、別のコードによって上書きされ、無効になっていることを意味しています。ここでは意図的に上書きしていますが、セレクターの書き方によっては意図しない上書きでルールが無効にされてしまう場合があります。

これは、セレクターの詳細度の問題です。セレクターの指定は細かければ細かいほど、高い優先度を持ちます。IDセレクターは100点、クラスセレクターは10点、要素セレクターは1点という点数をもっており、点数が高いセレクターが優先されます。

正しくスタイルをかいても、別のところで詳細度の高い指定がされている場合、ルールが反映されません。新しく書いたルールの詳細度を上げてやる、または別のルールの詳細度を下げてやれば解決できます。

記号等の間違い


波括弧の閉じ忘れや、間違って角括弧にしてしまった場合などは少し見つけづらいかもしれません。ルール全体が効かなくなるので、セレクターの問題かと思いきやそうではないためです。こういった文法上の間違いを見つけてくれるエディターを使っていれば問題ないかもしれませんが、そうでないときはW3Cの提供するValidation Serviceを使うのも良いでしょう。これについては、第21回 CSSコーディングでハマったら…で紹介しています。

たとえば角括弧を使ってしまうと、こんな風にエラーを出してくれます。

角括弧がエラーになっている

これを見れば「3行目のh1のルールのとこで角括弧が使われてるんだな」というのがすぐにわかりますね。

なるべく、気合いによるにらめっこ解決ではなく、便利なツールで素早く解決し、さくさくコーディングしましょう!

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 17:20
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2010年09月29日

マメにアップデートしよう!Dreamweaver CS5がCSS3対応

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

Dreamweaver CS5がCSS3対応


もう2週間ほどたってしまいましたが、先日のアップデートでDreamweaver CS5がCSS3に対応しました!今までは自分で追加しないと入らなかったExtensionのHTML5パックが正式に自動インストールされます。

Extension Manager CS5

是非アップデートをあてておきましょう。アップデートが成功すると、こんな感じになります。

Dreamweaver CS5のCSS3コードヒント

コレでうろ覚えなCSS3のプロパティもさくさく書けますね。しかもベンダープリフィクスにも対応しているので、実用でばりばり使えるのではないでしょうか!

関連記事

posted by こう at 15:34
連載:CSS 3分コーディング | コメント(1) | トラックバック(0)
2010年08月26日

Firefox 4.0のSync機能を試した

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

番外編です。現在Beta版が出ているFirefox 4.0の新機能、Syncを試してみました。

ちなみに、最近起動速度等でSafariやChromeに遅れをとっているFirefoxですが、4.0 Beta 4の起動はチョッパヤでした。(環境によると思います)

ではSyncの紹介です。
Synchronize your settings, passwords, bookmarks, history, open tabs and other customizations across multiple devices so you can take Firefox with you wherever you go.

Syncは異なる端末間でFirefoxの設定、パスワード、ブックマーク、履歴、開いているタブ、その他諸々をさくっと同期できる機能です。様々なデバイスで同じ環境を再現できます。

いやいや、地上最速のOpera師匠はンなもんとっくに実装してっから。というOperaマニアの声はさておき。

まずインターフェイスはこんなかんじ。WebブラウザーはシンプルスッキリUIが当たり前になってきましたね。
Firefox4 betaのUI

では早速Syncしてみましょう。ウィンドウ右下にSyncボタンがあるのでクリック。すると、初Syncか既に他の端末で登録済みか聞かれます。初なので上を選択。
初SyncかSync済みか選択

アカウント登録をちゃかちゃかと済ませます。秘密の言葉は絶対わすれないように。
Syncのアカウント登録

秘密の言葉を入力

端末名を指定

人間の証明もします。
人間の証明

これでこの端末のFirefoxのデータがSyncサーバーに行きます。
Sync完了

では、別端末で見てみましょう。

Windows上にFirefox 4.0をインストールしておきました。まだブックマークはスッカラカンです。
ブックマークはからっぽ

ウィンドウ右下のSyncボタンをクリック。次は既にSync済みなので下を選びます。
Sync済み

どのようにSyncするか選びます。とりあえず推奨されてるのにしてみました。
統合Sync

すると、一瞬の間にブックマークがどーんと同期!
別端末のブックマークがでてきた

もっかい別端末に戻って、ページを開いてみます。
別端末でページを開く

で、また戻ってくると、この通り。開いているタブがSyncしています。
開いているタブがSyncしている

便利かもー。Opera Link今まで使ったことなくてごめんなさいー。

iPhoneアプリも既に出ています!
Firefox Home

便利かもしれないー。
posted by こう at 16:18
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2010年08月25日

CSSでtableのデザイン

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

CSSでtableのデザイン


今回は、Table要素、つまり表の見た目をCSSで設定していくときのコツを解説します。実は意外とクセモノです。

Tableの仕組み


まず何より大切なのが、table要素の仕組み、マークアップを理解しておくことです。これはtableに限ったことではないですが、普通の要素とくらべると構造がチョイややこしいので、整理しておきます。

シンプルな例を挙げてみます。
<table>
<tr>
<th scope="col">ヘッダー</th>
<th scope="col">ヘッダー</th>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>

table要素の構造

この他にもtheadやtbody、tfoot要素などを使う場合もありますが、まずはシンプルケースということで、1行目のみをthで見出しにしています。

では、tableをデザインするときに重要なCSSの関連プロパティを見てみます。
border-collapse
セル同士の間にスペースを入れるか密接させるかを指定します。値はcollapseで間隔なし、separateで間隔が空きます。
border-spacing
border-collapseがseparateの場合に、間隔を数値で指定します。IE6,7未対応。
empty-cells
border-collapseがseparateの場合に、空白セルの表示または非表示を指定します。値はshowで表示、hideで非表示になります。IE6,7未対応。


次に実際にスタイルを書いていくときのポイントです。

まず覚えておくとよいのは、trにborderは設定できないということです。正確には、border-collapseがcollapseであればtrにborderが設定できるのですが、IEはこの通りに動いてくれません。たとえcollapseでもtrのborderは表示されません。6〜8まで全滅です。

縦線のないtable

そこで、上図のようなborderを描きたいときはどこに設定すればいいかというと、各thやtdのborder-bottomで設定します。
table {
border-collapse: collapse;
border: 1px solid #000;
border-bottom: none;
}
th, td {
border-bottom: 1px solid #000;
}

まずtable全体にぐるっとborderをひき、各セルの下側だけborder-bottomをひきます。するとtableの下側のborderと一番したのセルのborder-bottomが重複するので、tableのborder-bottomのみnoneとして線を表示しないようにしています。(これはやらなくてもいいかもしれません)

もう少し手を加えていくとこんな感じに。

thとtdに背景色をつける

body {
color: #24282b;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
"メイリオ", Meiryo, Osaka,
"MS Pゴシック", "MS PGothic", sans-serif;
}
table {
width: 400px;
border-collapse: collapse;
border: 1px solid #548582;
background-color: #fcf9ca;
}
th {
padding: 5px;
border-bottom: 3px double #548582;
background-color: #9fc7b2;
text-align: left;
}
td {
border-bottom: 1px dotted #548582;
}

tableを表として正しく使う分には用途は非常に多いと思います。
参考までに様々なデザインのサンプル集を紹介しておきます!

Pricing Tables: Examples And Best Practices

Top 10 CSS Table Designs

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 15:05
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2010年08月18日

clearfixの使い方

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

clearfixの使い方


以前、floatで崩れた?コレでなおせ!という記事でfloatによるレイアウト崩れの対処方法をご紹介しました。そこでは、overflowプロパティを使った方法を取り上げましたが、clearfixはさらっとスルーしたので、改めて見てみたいと思います。

clearfixとは


まずclearfixとはテクニックにつけられたただの通称であって、そのようなセレクターやプロパティがあるわけではありません。

clearfixはfloatによって親要素の高さが足りなくなる、またはなくなってしまったときに、高さを元に戻すために使います。

clearfixの意味


clearfixのコード自体は検索すればいくらでもでてきます。バリエーションも様々ですが、今回はスタンダードと思われるものを取り上げて、そのコードの意味を解説します。

/* afterに対応したブラウザ向け */
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
/* IE6 */
* htm .clearfix {
height: 1%;
}
/* IE7 */
*:first-child+html .clearfix {
height: 1%;
}

ポイントはafterに対応したブラウザ向けの部分です。

after疑似要素はIE8以上、firefoxやsafari、chrome等の標準仕様に準拠したブラウザーで使えます。
afterとcontentプロパティを使って「高さが足りない/なくなっている要素の直後に文字(ピリオド)を追加」します。その文字をdisplayプロパティでブロックレベル要素の様に表示します。そこでclearをするという寸法です。つまりclearできる要素がないなら追加してしまうという考えなのですが、HTMLのソースコードを汚さずに解決できます。

この例では汎用性をもたせるために.clearfixというクラスセレクターで適用していますが、たとえば#contents:afterというようなピンポイントな書き方もできます。

ですが、これだけではafterが使えないIE6や7では解決できません。そこで、IE6と7向けにはハックが必要になります。ハックの内容は正直おまじない的なものですが…IEのバグを使った裏技です。

その他のバリエーションとしてはMac版 IEを考慮したものもありますが、シェアとしてはもう無視してもよいのではないかと思います。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 01:37
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2010年07月14日

contentプロパティの使い所あれこれ

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

contentプロパティの使い所あれこれ


今回は、contentプロパティにフォーカスして、その使い所を色々とご紹介します。やや小難しいプロパティかつ、対象外のブラウザもありますが、色々と面白いことができます。

contentプロパティとは


contentプロパティは、HTML文書内に存在していない内容(文字や画像等)をCSSだけで追加することができるプロパティです。また、このプロパティはbefore疑似要素または、after疑似要素とセットで使います。つまり、内容が追加される場所は要素の直前、または直後、ということになります。

シンプルな例を挙げてみます。
<ul> 
<li><a href="#">ホーム</a></li>
<li><a href="#" class="new" >お知らせ</a></li>
<li><a href="#">ギャラリー</a></li>
<li><a href="#">コンタクト</a></li>
</ul>

.new:after { 
content: "new!";
margin-left: 5px;
font-size: 10px;
color: #f00;
vertical-align: text-top;
}

かなり単純な例ですが、この場合、class属性がnewの要素の直後に、"new!"という内容(文字)を追加し、margin-leftで少し左側に隙間を空けて、font-sizeでテキストを小さくし、colorで赤くして、vertical-alignで上に寄せる、ということをしています。するとこうなります。

contentプロパティの使い方

追加する内容を画像にしたければこんな風に書きます。
.new:after { 
content: url("./img/icon_new.gif");
}


contentプロパティで色々やってみる


では、このcontentプロパティの使い方を色々と工夫してみた例を紹介します。
ちょっとした追加説明にしてみる

<p> 
<a href="../index.html" class="top">ホーム</a>
</p>

.top:hover:after { 
content: "トップページに戻ります。";
}


マウスカーソルが重なると「トップページに戻ります。」と文字がでてきます。これだけならtitle属性でいいという話もありますが、今まで見えていなかったものが、マウスカーソルを重ねるとでてくるというよくあるインタラクティブな動きを簡単に実現できますね。

リンク先のURLを表示する or 印刷する

<p> 
<a href="http://m-school.biz" class="top">m-School</a>
</p>

a:after { 
content: attr(href);
}


a要素のhref属性を、a要素の後に表示します。attr()というのはattributeの略、つまり属性のことですね。括弧内には属性名を指定すればいいので、title属性等なんでもOKです。印刷用のCSSに書いておいて、紙にしたらURLが記載される、ってのもいいかもしれません。

リンク先の種類によってアイコンを変える(CSS3)

a[href^="http://www.twitter"]:before { 
content: url("./img/icon_twitter.png");
margin-right: 5px;
}

hrefがhttp://www.twitterで始まっていたら、リンクの前にicon_twitter.pngを表示する。
a[href^="mailto:"]:before {
content: url("./img/icon_email.png");
margin-right: 5px;
}

hrefがmail:toで始まっていたら、リンクの前にicon_twitter.pngを表示する。
a[href$=".pdf"]:before {
content: url("./img/icon_pdf.png");
margin-left: 5px;
}

hrefが.pdfで終わっていたら、リンクの前にicon_pdf.pngを表示する。

CSS3の属性セレクターと組み合わせると、こんなことができます。
CSS3の属性セレクター解説はこちらの記事をご覧ください。
参考:第11回 CSS3はここがすごい【セレクタ編1】

いかがでしたでしょうか。

やっぱり引っかかるのはブラウザーのサポート状況ですね。今回の内容はIE7以下では使えません!なぜならbeforeとafterに未対応だからです!無念!

…ですが、「IE7以下ではcontentの内容が表示されないだけ」なので、contentに意味的に重要な情報を含まなければ、「新しいブラウザーは見た目がちょっとイイ」けど「古いブラウザーでもちゃんと意味は伝わる。(見た目はちょっとちがうけど!)」って考えることができれば、もうがんがん使えるテクニックなんです。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 13:49
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2010年06月29日

CSS3のアニメーションの設定方法【Animationsモジュール】

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

CSS3のアニメーションの設定方法


前回の記事では、CSS3のTransitionsモジュールによるアニメーションについて紹介しました。今回は、同じくCSS3のAnimationsモジュールについて紹介します。

Animationsモジュールとは


Animationsモジュールも、前回のTransitionsモジュールと同様に、いわゆるアニメーションを設定できます。Transitionsモジュールと違うのは、「キーフレーム」の設定が可能な点です。Transitionsモジュールは、アニメーションの始点と終点のみしか設定できませんが、Animationsモジュールであれば、間にキーフレームを設定して、より複雑な動きにすることができます。

キーフレームの設定
キーフレームは次のように設定します。現状では、ベンダープリフィクスが必要です。
@-webkit-keyframes animeTest {
0% {
color: #f333;
}
10% {
color: #fc3;
}
20% {
color: #ff3;
}
30% {
color: #cf3;
}
40% {
color: #3f3;
}
50% {
color: #3fc;
}
60% {
color: #3ff;
}
70% {
color: #3cf;
}
80% {
color: #33f;
}
90% {
color: #c3f;
}
100% {
color: #f3f;
}
}

ぱっと見でなんとなくわかるかもしれませんが、「animeTest」というのが自分でキーフレームにつけた名前です。そして、全体の時間のどれぐらいの経過位置でどのような状態になっているのかを、細かく決めます。今回は0〜100%を、10ずつ細かく割りましたが、いくつにわけるかなどは自由です。もちろん等分でなくてもいいです。

これを実際に適用させるには、Animationsモジュールのプロパティで指定します。

Animationsモジュールのプロパティ
animation-name
どのkeyframeを適用するかを指定します。
none(初期値)
keyframe適用なし
keyframe名
適用するkeyframe名。(例えばbackground,marginなど)
animation-duration
アニメーション1回分の再生時間を指定します。値は秒単位(s)で指定できます。
0(初期値)
ゼロ秒で変化します。
秒単位で指定
例えば2sと指定すると、2秒間かけて変化します。
animation-timing-function
時間内でのプロパティの変化度合いを指定します。チョイわかりづらいですが、FlashやShilverlightでは「イージング」とよばれるものですね。加速とか減速とも言えます。
ease(初期値)
滑らかに開始し、滑らかに終了します。
linear
一定に変化します。
ease-in
ゆっくり変化し始め、加速します。
ease-out
急速に変化し始め、減速します。
ease-in-out
ゆっくり変化し始めて加速し、減速しながら終了します。
animation-iteration-count
アニメーションを何回繰り返し再生するかを指定します。
1(初期値)
1回再生して終了します。
回数で指定
例えば2と指定すると、2回繰り返します。
infinite
回数無制限でループ再生します。
animation-direction
アニメーションの再生方向を指定します。
normal(初期値)
0%→100%方向で再生します。
alternate
偶数回目の再生時に100%→0%方向で逆再生します。animation-iteration-countが1の時には設定の意味がありません。逆再生時はanimation-timing-functionも逆になります。(例:ease-inは逆再生時にease-outとなる)
animation-delay
アニメーションが始まるまでのディレイ(遅延)を指定します。
0(初期値)
遅延なしですぐにアニメーションが始まります。
秒単位で指定
例えば2sと指定すると、2秒間後にアニメーションが始まります。

Transitionsモジュールとよく似ていますね。

くだらないデモですが、2つほど。ChromeかSafariで見て下さい。

CSS3ばびゅーん

ぶるぶるアイコン

くだらなすぎた。

CSSはstyle要素で書いてるので覗いてみてください。とても簡単です。

ちょいちょいと作るだけでも楽しいですねー。ボタンとかにほんの少し心地よい感じのアニメーションを仕込んでおく、とかステキではないでしょうか。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 13:58
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2010年06月16日

CSS3のアニメーションの設定方法【Transitionsモジュール】

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

CSS3のアニメーションの設定方法


だいぶ前の記事で簡単なCSS3アニメーションのデモをご紹介しましたが、今日はその具体的な作り方についてご説明します。

参考:第23回 HTML5とCSS3はプラグインを超える!?

今回は、Transitionsモジュールで定義されているプロパティの扱い方を解説します。CSS3のアニメーションには、Transitionsモジュール以外にも、Animationsモジュールというのがありますが、それはまた別の機会に。

Transitionsモジュールとは


Transitionとは、和訳すると「変化」や「変遷」です。つまり、「ある状態から別の状態への変化」を設定することができるわけです。

次のようなプロパティがあります。
transition-property
どのCSSプロパティを変化させるかを指定します。複数のプロパティを対象とする場合は、カンマで区切ります。値は次の通り。
all(初期値)
全てのプロパティを対象とする
none
全てのプロパティを対象としない
プロパティ名
対象とするプロパティ。(例えばbackground,marginなど)
transition-duration
プロパティの変化にかける時間を指定します。値は秒単位(s)で指定できます。
0(初期値)
ゼロ秒で変化します。
秒単位で指定
例えば2sと指定すると、2秒間かけて変化します。
transition-timing-function
時間内でのプロパティの変化度合いを指定します。チョイわかりづらいですが、FlashやShilverlightでは「イージング」とよばれるものですね。加速とか減速とも言えます。
ease(初期値)
滑らかに開始し、滑らかに終了します。
linear
一定に変化します。
ease-in
ゆっくり変化し始め、加速します。
ease-out
急速に変化し始め、減速します。
ease-in-out
ゆっくり変化し始めて加速し、減速しながら終了します。
transition-delay
変化が始まるまでのディレイ(遅延)を指定します。
0(初期値)
遅延なしですぐに変化が始まります。
秒単位で指定
例えば2sと指定すると、2秒間後に変化が始まります。

簡単なデモをつくってみました。
Safari 4以上かOpera 10.50で見ていただくのが一番スムーズに動くと思います。なぜか最新のChromeさんはvisitedがちょっとイマイチ。WebKitのバージョン的には問題なさそうなんですが…。

デモを見る
※文字化けする場合はブラウザーのエンコードをUTF-8に変更して下さい。

コードはこんな感じです。
<a href="http://www.example.com/">example.com</a><br /> 
<a href="http://www.example.net/">example.net</a><br />
<a href="http://www.example.org/">example.org</a><br />
<a href="http://blog.m-school.biz/">back</a>

a {
font-family:Verdana, Geneva, sans-serif;
font-size: 10em;
color: #FFF;
background-color: #CCC;

/* -for webkit- */
-webkit-transition-property: color, background-color;
-webkit-transition-duration: .8s;
-webkit-transition-timing-function: ease-in;

/* -for mozilla- */
-moz-transition-property: color, background-color;
-moz-transition-duration: .8s;
-moz-transition-timing-function: ease-in;

/* for prest- */
-o-transition-property: color, background-color;
-o-transition-duration: .8s;
-o-transition-timing-function: ease-in;
}
a:visited {
color: #FC9;
background-color:#66F;
}
a:hover {
color: #FFF;
background-color: #0CF;
}
a:active, a:focus {
color: #CCC;
background-color:#FFC;
}

コードをご覧いただくとわかるとおり、まだ各ブラウザーでは先行実装されているだけなので、ベンダープリフィクスが必要です。で、-moz-は一応書いてますが、まだ現行のFirefoxではサポートされていない模様。Operaも10.10だとまだ動かないかも。

「まだまだ使えないじゃん!」

と思うなかれ、WebKitでイケる、ということはすなわちiPhoneやiPadではイケるわけです。タッチインターフェイスなので、hoverはちょいと相性わるいですが、それでもリンクをタップした直後にふわっと動いてくれました。(iPhone3GSで見てみました)

また、IEなどの非対応ブラウザーで見た場合も、transitionは再現されませんが、それ以外のルールは通常通り解釈されるので、PC向けのページに実装するのも大いにアリかもしれません。

次回はAnimationsモジュールについて触れる予定です。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 14:44
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2010年05月26日

floatで崩れた?コレでなおせ!

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

floatでレイアウトが崩れたときの対処


前回の続きを書くつもりでしたが、

「あんまりニーズなくない!?」

と思ってしまったので、もーちょいと基本にもどって、アリガチなトラブルへの対処方法をまとめておきます。

floatをキワめましょう。

CSS講座でもややこしい部分ですね。一度受けていただいた方も是非もう一度整理しておきましょう。

まず、floatのおさらいです。

floatとは


floatプロパティは、対象の要素を左または右に寄せることができます。そして、floatが設定された要素の後続の要素は、その反対側に回り込みます。これをつかって、段組レイアウトをすることが多いですね。まずこれが超基本です。

で、非っ常に重要なのが、次の特徴。

要素がブロックレベルの子供をもつ場合は,高さは,最上部ブロックレベルの子ボックスの境界上辺から,最下部ブロックレベルの子ボックスの境界下辺までとする。考慮するのは通常のフローにおける子供に限る。すなわち,浮動ボックス及び絶対位置決めボックスは無視され,相対位置決めされたボックスは,位置指定がないものとして考慮される。

なんてややこしい日本語。でも仕様を訳すとこうなんですね。

とても平たく言い換えると、
「floatした要素は、親ボックスのheightの算出対象にならない。」
ということです。

イメージは、親要素が「家」で子要素が「柱」です。で、float=柱を引っこ抜く、と考えてみて下さい。

もし柱を抜かれると、家はつぶれてしまいます。全部の柱が抜かれれば、ぺしゃんこになります。

親要素の高さが減ったり、ゼロになったりすれば、その後から続いてくる要素もレイアウトがおかしくなるので、何とかする必要があります。

clearとは


clearプロパティは、float(回り込み)を解除することができます。clearプロパティを使えば、floatによって高さが減った、またはゼロになった要素を元に戻すことができます。つまり、レイアウトが元に戻ります。

しかし、clearプロパティも万能ではありません。高さを戻せない場合があります。

clearを指定できる要素がある
戻せるパターン

clearを指定できる要素がない
戻せないパターン

戻せないパターンは、floatしている要素と同じ階層にclearが指定できる要素がありません。

コレを戻すために、たとえば改行タグを連続で入れる、空のdivを入れる、改行タグを入れてそこにclearの指定をする、など様々なバッドノウハウがありますが、やめましょう。HTMLソースに無駄が増えたり、方法によっては微妙にくずれたりなど、いいことがありません。後半で対策をご紹介します。

次は、様々な問題の対処方法をみていきます。

段落ちするときはちゃんと計算して対処


divのブロックを左右に並べた2段組を作っていて、右のブロックが崩れて下に落ちた!なんてことがあります。所謂段落ちです。

この原因は単純です。親のブロックの幅に、左右にわけたブロックの合計幅が収まらないと、段落ちします。

幅が足りずに段落ちする

きちんと合計幅を計算して、左+右の合計が、親ブロックを超えないようにします。このとき、padding,border,marginなどの値もしっかり計算に含めましょう。

このとき、IE6のダブルマージンバグなどにハマらないように気をつけましょう。

参考:IE6でfloatしたボックスのmarginの値が2倍になるバグの対処方法

clearが指定できない場合はoverflowで対処


clearプロパティのところで出てきた問題の対処です。clearが設定できればこの対処は不要ですが、HTMLの構造次第ではclearができない場合があります。定番の手法でclearfixというのがありますが、もっと手っ取り早い方法をご紹介します。

次のような文書構造だったとき、
<div id="parentBox">
<div id="childBox1">
</div>
<div id="childBox2">
</div>
</div>

#parentBox {
width: 600px;
overflow: hidden; /* heightを戻す */
}
#childBox1 {
width: 200px;
float: left;
}
#childBox2 {
width: 400px;
float: right;
}

実はoverflow: hiddenだけで高さは戻ります。この方法では、Mac版IEやNetcapeで崩れるようですが、ユーザーは皆無に等しいということで無視できれば、便利な方法です。

CSS2.1の仕様で、「overflow: visibleの要素以外は、height: autoの場合、高さは中身の要素の高さによる」とあります。ややこしいですが、つまり、overflowがvisible以外であれば、中身の高さで計算されるよ、ということです。これはfloatされていても同様なので、overflowをhiddenとすることで、結果floatした子要素も高さに含んでくれる=レイアウトがくずれないわけです。

いかがでしょうか。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 15:52
連載:CSS 3分コーディング | コメント(2) | トラックバック(0)
2010年05月19日

CSS3をIEの独自拡張で再現する【その2】

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

CSS3をIEの独自拡張で再現する【その2】


前回に引き続き、IEの独自拡張でCSS3を再現する方法をご紹介します。

box-shadowプロパティ


box-shadowプロパティはCSSだけでドロップシャドウを再現できるプロパティです。

これも前回のopacityをIEのfilterで解決したのと同様に、filterを使います。
box-shadowは、最新のOpera(Opera10.50以降)ではそのまま使えますが、FirefoxやSafari、Chromeではまだベンダープリフィックスが必要です。また、現在box-shadowはCSS3の草案から一度削除されています。(多分また復活します。)

<div id="box">
かげをつけたい。かげをつけたい。かげをつけたい。
</div>

#box {
-moz-box-shadow: 2px 2px 3px #ccc; /* for Firefox(Mozilla) */
-webkit-box-shadow: 2px 2px 3px #ccc; /* for Safari,Chrome(WebKit) */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#ccc', Direction=140, Strength=2); /* for IE */
}

コードをみるとわかりますが、box-shadowとfilterでは設定項目がちがいます。ですので、全く同じ見た目にするための微調整のはメンドクサイです。(上のコードは影はちゃんとでますが、大きさや角度はズレていると思います。)

text-shadowプロパティ


その名前の通り、文字に影を付けられるプロパティです。

参考:第10回 CSS3はここがすごい【プロパティ編2】

これは、jQueryのプラグインで解決できます。

Text-shadow in IE with jQuery

jQueryの使い方はこの辺をご参考に。
参考:第41回 jQueryの基本のキ【その1】
参考:第42回 jQueryの基本のキ【その2】

<script type="text/javascript" src="./scripts/jQuery.js"></script>
<script type="text/javascript" src="./scripts/jquery.textshadow.js"></script>
$(document).ready(function(){
$(".addTextShadow").textShadow();
});

<p class="addTextShadow">
もじにかげをつけたい。もじにかげをつけたい。
</p>

.addTextShadow{
text-shadow: 1px 1px 1px #ccc; /* CSS3 */
}


$(".addTextShadow").textShadow();の、.addTextShadowの部分が、影を付けたい要素のセレクタです。

さらに次回も様々な手法をご紹介します。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 16:19
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)