今回は、画面幅によってCSSを変更する方法をご紹介したいと思います。

目次

1. HTMLに必要な記述
2. 画面幅によるCSSの切り替え方
3. まとめ

今回、画面幅によるCSSの切り替えを行うにあたって、まず初めにやるべき記述がありますので、そちらから始めていきましょう。

まず初めに、HTMLのhead内に以下のものを記述します。

<meta name="viewport" content="width=device-width, initial-scale=1">

このコードが無いと後に行う作業をしても効果が出てこないので、まずはしっかりと記述します。

「viewport」とは「表示領域」のことです。「デバイスによってどんなふうに表示されるか」をこの記述で指示しています。

「width=device-width」でデバイスの幅に合わせてCSSが適用される形になります。「initial-scale」は「初期倍率」を示す値なので原則「1」を指定します。

それでは、早速下記のコードをCSSにコピペしていきます。

この@media　screen　and (max-width: 767px)とは、横幅が767px以下の時にこの中に記述してあるスタイルを適用しますという意味があります。

ですので、スマホやタブレットサイズ時にパソコン時の表示と変更したい場合などに、活用することができます。

反対に、この@media　screen　and (min-width: 767px)のような記述をしますと、「横幅が767pxより大きいとき、この中に記述してあるスタイルを適用します」という指示になります。

スマホやタブレットサイズよりも大きい、デスクトップパソコン等に対応して別の表示をしたいときに活用できます。

画面幅に合わせて、適用するCSSを変える方法をご紹介しました。

@mediaなどで、画面幅に応じてスタイルを変更することをレスポンシブ化と呼びます。レスポンシブデザインが必須なこの時代、できるようになるだけで仕事の幅がグッと広がります！ぜひ覚えてたくさん活用してください！

担当：O

愛知県内から名古屋市を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県 名古屋市中村区名駅5-16-17　花車ビル南館5F

TEL： 052-890-7007（2021-12/16～変更）
※ ホームページ制作や活用サポートのお問い合わせはコチラから