どうも！リアンレーヴの緒方です。
今回は、スマホ時の表示とPC時の表示をCSSで可変できるメディアクエリによるレスポンシブスタイルの記述の仕方を紹介したいと思います。
また最後には、コピペOKな汎用的に使えるスマホファーストなCSSとPCファーストなCSSも用意しています。
レスポンシブとは？
レスポンシブスタイル（デザイン）とは、PC、スマートフォン（以後SPと記載）、タブレットなどの画面幅に応じたデザインを分けて作成し、それぞれのデバイスに最適化した表示をするデザインの仕方です。
WEB制作では「@media」の規則を使用し、それぞれのレイアウトに対してstyleを付けていくことでレスポンシブ化しいきます。そのためPCとSPのレイアウトを作成することになるので単純に工数は2倍になります。
また端末毎にも画面幅は違うので完璧なレスポンシブを実現するには以下のページの端末毎の大きさを網羅する必要があるので単純に2倍とはいかない場合もあります。
SP表示の場合は横に広がるデザインは最適とは言えないので、WORKS部分のコンテンツを縦に並べています。
さらに完全なレスポンシブ化を行うにはmeta viewportの記述が必須です。なので以下も合わせて理解するように！！
