• 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. 見出しの前に三角形をつけてみよう

  2. テキスト文字を中央、左右にcssで寄せよう

  3. 特定の番号の要素のcssだけ変更してみよう

  4. cssでマウスをおいた時に動かそう

  5. borderが横幅からはみ出てしまう

  6. CSSでテキスト文にインデントをつけてみよう

2020年9月
 123456
78910111213
14151617181920
21222324252627
282930