HTML・CSSiPhoneやAndroidなどスマートフォンなどの様々なデバイス向けに最適化されたサイトを作成することをいいます。レスポンシブデザインとは、PC向けのサイトから要らないコンテンツを隠したりして(JavaScriptを使用したりします)、様々なサイズのデバイスにあったようにCSS・JavaScriptを使ってサイズを調整します。レスポンシブデザインを簡単に作成するためのポイントを紹介します。CSSの振り分けCSSの振り分けは3つの方法があります。CSS自体を振り分けるCSSの中で各デバイスごとに記述していくCSSの各ブロック毎(header等)に記述していくCSS自体を振り分ける方法は今回は省略します。今回はCSS内での振り分け方です。@media(max-width:320px){/*CSSを記述*/}と記述すると、デバイスのサイズごとに振り分けくれます。オススメの記述の方法は3番です。先ほどの様にCSSを記述しても、ブラウザのサイズを小さくしたら変わると思いますが、iPhone等のデバイスでみると最適化されていないと思います。これはiPhoneがPC用のサイズでみてしまっているためです。これにはviewportというものを指定します。viewportで、サイトを『デバイスと同じ大きさで開く・拡大を禁止する』等、どのようにみてもらうかを設定します。/>とhtmlに記述します。画像のサイズがデバイスの横幅より大きい場合、飛び出してしまったりします。横幅はいっぱいに表示したいので、下記のように記述します。auto;}とすることで、画像が横幅いっぱいで表示されます。簡単なレスポンシブデザインへの対応は以上です。