• css

CSSを使って画面サイズに対応しよう

はじめに

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

関連記事

  1. cssでフェードをかけてみよう

  2. 画像をhoverして時にズームさせるcssを書こう

  3. CSSで画像を背景に貼ってみよう

  4. CSSで見出しを飾りつけよう

  5. CSSで文字の間隔を変更してみた

  6. アコーディオンを作ってみよう

2021年6月
 123456
78910111213
14151617181920
21222324252627
282930  
Translate »