メディアクエリーでTransitionを実行する

ホーム
Web
メディアクエリーでTransitionを実行する

内容

いわゆる「レスポンシブデザイン」

最近では、犬も杓子も、いわゆる「レスポンシブデザイン」もしくは「マルチデバイスデザイン」なるものに憑りつかれているようです。ようは、スマートフォンやタブレットといった機器の普及により、同一ソースのHTMLをパソコン以外の機器でも表示できるようになったので、それらに如何に対応するべきかというところから、話が始まったわけです。そして、CSSでの解答のひとつが、「メディアクエリー」という技術・技法です。

当サイトのデザインも、このメディアクエリーを使って、現在では以下のとおりに表示内容の幅を設定しています。

表示画面が幅1024ピクセル以下: 770ピクセル; XGA以下のディスプレイを想定
表示画面が幅1025～1664ピクセル: 970ピクセル; SXGA～WXGA+程度のディスプレイを想定
表示画面が幅1665ピクセル以上: 1600ピクセル; WSXGA+以上のディスプレイを想定

一般的には、スマートフォンを前提に、最小の表示画面を320～480ピクセルあたりに想定することが多いようですが、私はスマートフォンや携帯電話は持たない主義なので、500ピクセル以下の画面は想像にも上りません。また、実際のところ2014年現在では、スマートフォン等の5インチ程度のディスプレイですら、フルHDの解像度（1920×1080ピクセル）を持つに至っているので、小型携帯機器用に小さい画面解像度を想定するという前提が、最早崩れています。そうしたことも理解せず、やれレスポンシブだ、マルチデバイスだとはしゃいでる姿は滑稽としか言いようがありません。

故に私は、いわゆる「レスポンシブ」という恥ずかしい言葉を使いたくはありません。CSSの技術としては、メディアクエリーという呼び名が、元からあるのですから。その使用方法を試す目的と、近年ワイド型として横へ広がっていくディスプレイと表示内容との隙間を埋めるため、以前から当サイトにもメディアクエリーを使用していたのですが、私はそれを「（メディアクエリーを利用した表示機器に対する）動的可変レイアウト」と呼んでいます。略称はDVLbMQfVDです。

Transitionプロパティとは？

実のところ、ここまではどうでもよい前置きで、本題はCSSのTransitionを使った簡易アニメーションについてです。このスタイルに関しては、「トップページのCSS3効果②」で紹介していますが、その機能を簡単にまとめておきます。

「CSS Transitions」は、現在、作業草案段階のCSSモジュールで、Transition＝移行もしくは遷移という言葉が表すとおり、或るスタイル値の移り変わりを定義します。たとえば、div要素に200×100ピクセルの幅と高さをwidthおよびheightプロパティで、背景色として赤をbackground-colorプロパティで指定したとします。さらにこのdiv要素に対し、hover疑似クラスを使って、マウスカーソルが乗った際に、幅と高さが400×200ピクセル、背景色は青になるようにも指定します。


div {
	width:200px;
	height:100px;
	background-color:rgb(255,0,0);
}
div:hover {
	width:400px;
	height:200px;
	background-color:rgb(0,0,255);
}

結果としてこのdiv要素は、3つのプロパティに対してそれぞれ2つの値を持つことになり、マウスカーソルが乗るか否かによって、値が瞬時に切り替わります。

widthプロパティについて言えば、値が600ピクセルか1200ピクセルのいずれかに切り替わるわけですが、この変化の間に時間、すなわち移行期間を持たせようというのが、CSS Transitionsの役割です。

最も単純な指定としては、この例ではdiv要素に、transition-propertyとtransition-durationプロパティを記述します。transition-propertyプロパティでは、移行期間を与えたいスタイルのプロパティ名を列挙します。そして、transition-durationプロパティでその移行にかかる時間を秒（s）もしくはミリ秒（ms）で指定します。


div {
	width:200px;
	height:100px;
	background-color:rgb(255,0,0);
	transition-property:width, height, background-color;
	transition-duration:1s;
}

すると、マウスカーソルが乗ったとき、そして外れたときの変化に1秒の時間がかかるようになり、widthプロパティでは200ピクセルと400ピクセルの間で連続的に数値が変化します。その過程は、閲覧者が視覚的に捉えることが可能なので、div要素が伸び縮みするアニメーションとなるわけです。また、色の場合は、当該2色間の色変化が、（rgb関数を用いた場合は）RGB各値に基づいて連続的に表示されます。このようにして、スタイルの移り変わりをアニメーションとして表示する効果が生み出されます。

CSS Transitionsが、スタイルの移行を表示させるものである以上、対象となる要素には、或るプロパティに2つの異なる値が必要になります。しかし、競合する値を併記することはできないので、当該要素は状態Aと状態Bに分けてスタイルを指定しなければなりません。CSSで状態を区分する一般的な方法は、上記の例にも使用したhover疑似クラスです。hoverによって、状態A＝マウスカーソルが乗っていないとき、状態B＝マウスカーソルが乗っているとき、の2つに区分した、スタイル指定が可能になります。実際、CSS Transitionsの使用例には、このhoverを使ったものがほとんどです。

メディアクエリーに対するTransition効果

メディアクエリーによる状態の分割

ところで、動的可変レイアウト（DVLbMQfVD）は、或る要素に対して、異なるプロパティ値を持たせることによって成立しています。たとえば、特定のdiv要素に対し、widthプロパティ値を770、970、1600ピクセルといったように3つ指定し、それをメディアクエリーによって

状態A: 表示画面幅1024ピクセル以下
状態B: 表示画面幅1025～1664ピクセル
状態C: 表示画面幅1665ピクセル以上

に切り分け、表示を切り替えるわけです。このように、或るプロパティ値が3つの状態によって区分されているなら、hoverと同様に、その状態の間をCSS Transitionでアニメーションさせることができるのではないでしょうか？

それを試してみるために、まずは上記の例で、メディアクエリーによる3つの状態を定義してみます。


@media (min-width:1665px) {

}
@media (min-width:1025px) and (max-width:1664px) {

}
@media (max-width:1024px) {

}

このソースコードでは、@media (min-width:1665px)のブロックが状態C、@media (min-width:1025px) and (max-width:1664px)のブロックが状態B、@media (max-width:1024px)のブロックが状態Aということになります。

ではそれぞれのブロック内に、div要素に対する幅の指定を記述します。なお、ソースコードと結果を簡略化するため、div要素はHTMLドキュメント内にひとつのみ、高さは200ピクセルに、背景色は赤に固定するものとします。故に、高さと背景色の指定は、メディアクエリーの外に記述します。


div {
	height:200px;
	background-color:rgb(255,0,0);
}
@media (min-width:1665px) {
	div {
		width:1600px;
	}
}
@media (min-width:1025px) and (max-width:1664px) {
	div {
		width:970px;
	}
}
@media (max-width:1024px) {
	div {
		width:770px;
	}
}

以上のスタイル指定により、ブラウザーのウインドウサイズを変更して各状態を再現すれば、div要素の幅はそれぞれの状態に応じて瞬時に切り替わるようになります。

Transitionの適用

では、このスタイルに、CSS Transitionを加えてみましょう。


div {
	height:200px;
	background-color:rgb(255,0,0);
	transition-property:width;
	transition-duration:0.8s;
}
@media (min-width:1665px) {
	div {
		width:1600px;
	}
}
@media (min-width:1025px) and (max-width:1664px) {
	div {
		width:970px;
	}
}
@media (max-width:1024px) {
	div {
		width:770px;
	}
}

そう、これだけの指定で、3つの状態が切り替わるタイミングにおいて、移行アニメーションが表示されるようになります。つまり、CSS Transitionはメディアクエリーに対しても有効なのです。ちなみに当サイトにおいて、メディアクエリーの対象となっている主な要素はbody、div、ul要素です。そして切り替えているプロパティは、サイズ（幅と高さ）、配置位置、外側余白、内側余白、そして文字サイズです。そこで、以下の指定を追加することで、ページ全般にTransitionの効果を与えています。上記の例にも使った、transition-durationプロパティの0.8秒という値は、ブラウザーウインドウのサイズ変更に応じて対象要素のアニメーションが追随する際の、私の感覚的な最適移行時間です。


body, div, ul {
	transition-property:width, height, left, top, bottom, right, margin, padding, font-size;
	transition-duration:0.8s;
}

当サイトの各ページが、サイズ切り替え時にゆっくり伸縮しているように見えているのは、この指定によるものです。サイトのデザイン設計に当たって、初めからTransition効果の適用を私は意図していたわけではありませんが、メディアクエリーを使用していたことで、結果的にアニメーションの条件が出来上がっていたわけです。ですから、そこに上記のコードを付け加えただけで、Transitionのアニメーション効果がいとも簡単に適用されてしまいました。

ただし、当サイトの表示を各ブラウザーやPC環境で比べてみたところ、最もスムーズにアニメーションを表示できるのは、Internet Explorer 11でした。div要素の横幅だけに適用した例では、Firefoxも問題なく表示できましたが、Chromeはこの程度のシンプルな構造でも、表示ウインドウ内にちらつきが生じます。また、Firefoxは、当サイトのように複雑な構造かつ多数のアニメーション適用箇所が存在する場合では、スムーズな表示はできませんでした。

以上の動作確認は、Windows 8.1Pro 64bit、Core i7-3770K、メモリ32GBで、ビデオカードがGeForce GTX690もしくはGTX 660という環境で行いました。GPUが高性能であるほど、IE 11は表示が高速になるという結果をここでも確認できたわけですが、他のブラウザーは、CSS TransitionsやCSS Animationsにおいて、ビデオハードウェアの機能を活かせていないようです。やはり、CSSの表示においていもIE 11は素晴らしいですね。

もちろん、IE 11も、ビデオハードウェアの性能が低いと、スムーズさが失われていきます。たとえば、Microsoft Surface Proのような、CPU内蔵GPU（Core i5-3317U、Intel HD Graphics 4000、メモリ4GB）による表示となると、アニメーションはカクついてしまいました。メディアクエリーの設計さえきちんと行っていれば、そこにTransition効果を付け加えること自体はとても簡単なのですが、その適用範囲をどこまで広げるかは、Webページの表示環境も考慮したほうがよいでしょう。

なお、記事の末尾には、div要素の幅にTransition効果を適用した、単純な例のHTMLソースコードを掲示しておきます。

サンプルソースコード

サンプルコード1


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>メディアクエリーとTransition</title>
<style>
div {
	height:200px;
	background-color:rgb(255,0,0);
	transition-property:width;
	transition-duration:0.8s;
}
@media (min-width:1665px) {
	div {
		width:1600px;
	}
}
@media (min-width:1025px) and (max-width:1664px) {
	div {
		width:970px;
	}
}
@media (max-width:1024px) {
	div {
		width:770px;
	}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

内容