クリエイターラボ

【初心者向け】画面幅によってCSSを切り替える方法

良かったら”♥”を押してね！

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

▼その他のWeb制作「技術」に関するお役立ち情報（記事一覧）は下記の記事からご確認いただけます。

関連記事

【Web制作ガイド-技術編】サイト構築時に役立つ記事まとめ
良かったら”♥”を押してね！
shoppingmode関連タグ

おすすめ記事のご紹介

目次へ戻る