レスポンシブデザインとは
レスポンシブデザインとは、PC（パソコン）用、スマートフォン用のウェブページをひとつのHTMLソースを使って最適化させるウェブデザインです。
以前はスマートフォン用に独自のデザインを表示させるには、携帯端末の持つ端末情報（ユーザーエージェント）をもとに、サーバープログラム側でスマートフォン専用のHTMLソースを出力させる方法が主流でした。
URLも同じでなく、https://tadworks.jp/m/～などディレクトリを分けたりしていましたね。
しかし、今はこういった方法ではなく、HTMLファイルは同じで、画面幅を検知してCSS側でデザインを変えるという方法がとられるようになりました。
これをレスポンシブデザインといいます。
これはコンテンツ重複を嫌う検索エンジン向けにも好まれる仕様といえるかと思います。
今回は、このレスポンシブデザインを実現するために必要な最低限の形のCSSサンプルをご紹介します。
実際には、もっと細かなブレイクポイントを設定することが多いかと思いますが、ここでは「PC（パソコン） or スマートフォン」という前提でできる限りシンプルなものにしました。
これをベースに肉付けすることで必要なデザインを作成していって頂ければ幸いです。
HTML部
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />レスポンシブデザインを導入するには、上記ビューポイントのタグを設定する必要があります。
このタグはHTMLの<head></head>内に記述してください。
このタグは画面幅を検知するためのタグとなりますので、これがないとCSS側で設定しているブレイクポイント自体を認識できないということになります。
CSS部
@media screen and (min-width:768px) {
/* PC用CSS記述 */
}
@media screen and (max-width:768px) {
/* スマートフォン用CSS記述 */
}
上記の場合は、画面幅が「768px以上」の場合は、PC用CSS記述を、画面幅が「768px以下」の場合は、スマートフォン用CSS記述を適用するという内容となります。
タブレット専用のデザインも作りたい場合には、ブレイクポイントをもっと細かく設定することで実現が可能です。