WWGスペース 名古屋のホームページ制作会社が発信するオウンドメディア 無限の情報が集う星

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

HTMLに必要な記述

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

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

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

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

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

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

画面幅によるCSSの切り替え方

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

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

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

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

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

まとめ

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

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