はじめに

画面サイズに応じてcssでデザインを変更したいのですが、どうしたらいいですか？

cssで画面サイズに応じてデザインを変更する場合は、@mediaを使います。

そういう記述方法があるんですね。

cssの@mediaを使って画面サイズに応じたcssを書くことができます。

cssを使って画面サイズに対応したデザインをしよう

CSSで画面サイズに応じたデザインをする際には、@mediaを使用します。
具体的な書き方の一例は次の通りです。

HTMLとCSS

<div class="bgcolor_switch">背景の色が変わるよ</div>

.bgcolor_switch{
 background:#ccc;
}
@media(max-width:767px){//画面サイズが767px以下になったら背景がこの中に書いてあるcssが適用されます。
 .bgcolor_switch{
    background:red;
  }
}
@media(max-width:400px){//画面サイズが400px以下になったら背景がこの中に書いてあるcssが適用されます。
 .bgcolor_switch{
    background:blue;
  }
}

サンプル実行例

この様に画面サイズに応じてcssを当てることができます。
スマートフォンやipadの普及により様々なデバイスでホームページを閲覧する時代になっています。
画面サイズに応じたデザインは見に来ていただいたお客様の接客を丁寧に行うことと同義かと思います。
せっかく閲覧していただいたユーザーが、拡大しないといけない様なホームページだった場合、また違うページへ離脱してしまうかもしれません。画面サイズに応じたレイアウト編成は今の時代とても重要なものになっています。
まだスマートフォン対応されていない方のちょっとでもお力になれれば幸いです。