レスポンシブWebデザインのためのCSS役立ちテクニック5選！【CSS×レスポンシブ・デザイン】

レスポンシブ・デザインと見た目の美しさ・バランスを両立させることは、どうしてなかなか難しいもので、それ自体一個の技術です。
本記事では、調和のとれたレスポンシブ・デザインのためのCSSトリックを5つ、コードのサンプルといっしょにご紹介します。

１．レスポンシブ動画（デモ）

tjk.design.com が発見した方法です。動画が画面サイズに応じた幅になります。

２．最小幅・最大幅（デモ）

最大幅プロパティでは、エレメントの最大幅を設定することで画面サイズを上回らないようにします。

・最大幅
下の例では、画面サイズの90%を超えなければ、コンテナを800ピクセルで表示するよう設定しています。
また、最大幅を100%・高さをautoに設定することで、画面サイズに合わせて自動で画像の大きさが変わるようにできます。
上の画像ではCSS画像はIE7とIE9に対応しているものの、IE8には対応していません。幅をautoに設定して、下の画像のようにIE8にも対応するようにすると良いでしょう。

・最小幅
最大幅とは対照的に、エレメントの最小幅を設定することで、画面を縮小した時に小さくなりすぎないようにすることができます。

３．相対値（デ

リンク元