Webサイトのレスポンシブ化が当たり前になってきました。 今回は、ブレークポイントでCSSの切り替えをアニメーションする方法の解説です。 レスポンシブデザインとは?レスポンシブデザインとは、画面サイズの異なる端末(PC、タブレット、スマートフォンなど)でサイトを閲覧した際、それぞれの画面サイズに最適なデザインで表示するためコーディングを行ったデザインのことです。 レスポンシブデザインはGoogleも推奨しているため、現状SEO的にも優位になります。 ブレークポイントとは?ブレークポイントとはレスポンシブデザインをする上で、デザインが切り替わる画面サイズを決めておくことです。 スマートフォンでのデザインは〜576pxまでタブレットは577px〜992pxまでといった設定を行います。 CSSのフレームワークであるBootStrapでの現状の設定は下記のようになっています。 ブレークポイントサイ