突然大きくなるメインコンテンツ

レスポンシブサイトを閲覧しているとありがちなこと。それは「突然コンテンツが大きくなる」ということです。

これはmediaqueryでwidthがデフォルトサイズよりも大きくなるように設定されている際におこる現象です。

参考：Skeltonで2カラム→1カラムに設定した場合のcss（抜粋）

/*メインコンテンツ*/
.container .two-thirds.column               { width: 620px; }
/*サイドバー*/
.container .one-third.column                { width: 300px; }

/*タブレットでは1カラムに*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
/*メインコンテンツ*/
.container .sixteen.columns                 { width: 748px; }
/*サイドバー*/
.container .sixteen.columns                 { width: 748px; }
}

ここではディスプレイのサイズが768px以下になった時、メインコンテンツが1.2倍（620px→748px）に拡大されているのがわかります。

このようなスタイリングは、ほとんどのレスポンシブサイトで実装されている「コンテンツ最適化法」です。

不自然な拡大・膨張＝威嚇

ただ、「目の前のものが突然大きくなる」というのはあまり自然な動きではありません。

アイキャッチとして利用している画像のようなサイズが大きいものが突然膨張すると、少し気圧されるような印象を受けることが（個人的に）あります。

「なぜ気圧されるのだろうか」と思い、少し調べてみたところ、どうやら「威嚇」の要素が含まれている様でした。

wikipediaより「威嚇」

　威嚇の手段
　　・自らの体またはその一部を大きくして自らの力を誇示する。（主に鳥類に多くみられる）

有名ドコロではハリセンボンや孔雀などでしょうか。

サイトを制作・運用している側としては、コンテンツが大きくなる現象は見慣れたものかもしれません。

ですがサイトを訪れる人が皆レスポンシブデザインの「仕様」に慣れているとは限りませんので、できれば「自然な動き」で拡大させたいものです。

そこで利用したいのが「CSSのアニメーションプロパティ」です。

cssアニメーションで、「自然な拡大」に

利用するCSSプロパティは「transitionプロパティ」です。

transitionプロパティで指定できるもの

transition: [property] [duration] [timing-function] [delay];

property:　アニメーションを適用するプロパティを指定する
duration:　アニメーション時間を指定する
timing-function:　アニメーションの加速・減速を指定する
delay:　アニメーションの開始タイミングを指定する

このサイトではトップページの記事一覧にスタイルを適用させていますが、以下の様な指定を行なっています。

transition: width 1s ease-in-out 0.01s;

＜意訳＞widthが変更された0.01秒後に、1秒間でゆっくり始まりゆっくり終わるアニメーションを開始する。

開始を少しだけ遅らせているのは、コンテンツの位置が少し変更されるために「位置変更→サイズ拡大」という動きを見せるようにしたためです。

これで多少強引かもしれませんが、コンテンツが自然に拡大するようになりました。

Compassで楽をする

CSS3で面倒なのがベンダーフィックス、ここではcompassを使って楽をします。

scssファイルに以下の2行を記述すれば、ベンダーフィックスは完璧です。

@include transition(width 1s ease-in-out 0.01s);

これをコマンドプロンプトなどでコンパイルすると、以下のように変換されます。

/*コンパイル後*/
  -webkit-transition: width 1s ease-in-out;
  -webkit-transition-delay: 0.01s;
  -moz-transition: width 1s ease-in-out 0.01s;
  -o-transition: width 1s ease-in-out 0.01s;
  transition: width 1s ease-in-out 0.01s;

compassについてはLIGに素晴らしい記事がありますので、そちらを御覧ください。

→CSSの常識が変わる！「Compass」、基礎から応用まで！

まとめ

「威嚇・不自然」などと仰々しく書いた割りにはtransitionで片付けてしまいましたが、いかがでしたでしょうか。

ちょっとしたことですが、不自然さを解消することでUIの改善につながります。

本当に自然な動作を目指すならば、それぞれに個別のブレークポイントを設けるのが一番かもしれません。

そのためにはデフォルトのコンテンツサイズと%で指定したサイズが一致する点を探し出す必要がありますが・・・

FlexBoxなど、今後のアップデートで使用できるようになる（と言われている）プロパティもありますので、レスポンシブデザインはまだまだこれから発展していきそうです。