ちょい足しCSS。transitionでhover時ふわーっと背景色を付ける。
まえがき（長いから飛ばしていいですよ）
CSS大好きなのにCSSな話を何も書いていない事に気付きました。WPのカテゴリの中に最初に「CSS」ってカテゴリだけ作ったのにとんだ見切り発車野郎でした(>ω<)
先ほど1行だけCSS追加したので、CSS話を書きたい(｡･ω･｡)ﾉ
その前に、とりあえず謝罪です。実のところ、このブログは実験的な意味も含めておりまして…古いブラウザへの配慮はほとんどしておりません。ごめんなさいごめんなさい。最新版じゃないブラウザで見ると、このサイトのブロックは大変な事になっちゃうです。知ってるです。ごめんなさいごめんなさいすみません。でもまぁ内容はなんとか読める…はずなのであります。
心の中で100万回謝ったところで、今日はCSS3のプロパティのお話です(ｷﾘｯ
仕事ではまだまだ古いバージョンのブラウザも考慮しなくてはいけないケースもあるので、CSS3をバシバシ使う事は避けているのですが、そのプロパティの効果がなくてもサイト閲覧に支障がない部分ではちょこちょこ入れてます。今日のもそんな感じです。
transitionプロパティを1行追加したよ
追加した箇所はこのページの画面で言うと左のメニュー達のところです。マウスを乗せると背景色がふわっと色付く感じにしました。追加したのはtransitionプロパティです。
transitionプロパティの各ブラウザの対応状況はこちらで確認。
>> Can I use CSS3 Transitions
上記サイトによると最新版のブラウザならtransitionプロパティにはベンダープレフィックスいらんらしいので遠慮なく1行で済ませて頂きました。そもそもこのブログのCSSソースはどのCSS3のプロパティでも遠慮どころか情け容赦なくベンダープレフィックスなしでいってやるぜという勢いで書いてるんですが。私あかんやつですね。
該当部分のソース書いておきます。
#mainNavi a{
display:block;
color:#09668e;
background:url(images/icon_01.png) no-repeat 5px 7px;
transition:background-color 0.2s linear 0s; //追加
text-decoration:none;
padding:3px 10px 3px 23px;
margin:0 0 1px;
}
#mainNavi a:hover{
background:#CFE4E9 url(images/icon_01.png) no-repeat 5px 7px;
border-radius:5px;
box-shadow:1px 1px rgba(0, 0, 0, 0.1);
}
transitionさんが「ふわーん」っとさせてくれてます。
元々のa要素のbackground要素では背景色は指定してないんですが、transitionプロパティのとこで background-color としているのが本日のポイントです（多分）。
transitionプロパティとは
正直今更感が否めないtransitionプロパティですが、最近web始めました的な人へ向けてと自分のおさらいの意味も込めて書いておきます。
transitionプロパティとは任意のプロパティが変化する際の動きについての指定ができるプロパティです。上記の例で言うと、「変化」とはhover状態になった時という変化です。transitionプロパティで指定できる内容は4つ。
- 変化させるプロパティ(transition-property)
- 変化にかける所要時間(transition-duration)
- イージング(transition-timing-function)
- 変化が始まるまでの待ち時間(transition-delay)
私はショートハンドで書いたけど、バラバラに書いてもオッケー。必要な部分だけ書いてもオッケー。margin:10px 0;をmargin-top:10px;margin-right:10px;・・・ってバラバラに書くのと同じです。
//ショートハンドで書く transition:background-color 0.2s linear 0s; //バラバラに書いてもオケ transition-property:background-color; transition-duration:0.2s; transition-timing-function:linear; transition-delay:0s;
イージングのところは ease/linear/ease-in/ease-out/ease-in-out というキーワードによる指定と、cubic-bezier(数値, 数値, 数値, 数値)という形の数値指定もできる。最後のやつだけよくわからないのだけれども、3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定…らしいです。わからん。（こちらのページに詳しく書いてありましたので参考にどぞ。>>transition-timing-function－CSS3リファレンス）
ということで、transitionプロパティさんは、「何のプロパティを？どのくらいの時間をかけて？どんな変化の進行で？待ち時間はどうする？」を指定しているわけですね(｡･ω･｡)
ちなみにですが、transformプロパティさんと綴りが似ていますが別物なので気をつけましょう。transformプロパティは「変形」を扱うものです。「変化」とか「変形」とかなんとなく日本語でも似てるけど別物ですので気をつけましょう。＞過去の私へ。