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

BLOG
ブログ

公開日:2022.12.20

良かったらハートを押してね！

HTML

ホームページ制作

CSS

WEBデザイン

コーディング

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

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

1.HTMLに必要な記述

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

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

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

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

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

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

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

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

<br />

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

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

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

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

3.まとめ

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

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

担当：O

hover時のCSS確認方法

【WordPress】アイキャッチに一番目の画像・No Imageを表示する方法

【jquery.cookie.js】初回だけポップアップ（モーダル）を簡単に作る方法

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

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

良かったらハートを押してね！

CONTACT

お問い合わせ

ご不明な点やご質問等、
まずはお気軽にお問い合わせください。

CONTACT

オンラインでのお打ち合わせも可能

ホームページを作りたい	ホームページを作った後	こんなことも
新しく作りたい	更新代行してほしい	写真撮影をしてほしい	多言語対応したい
スマホ対応したい	保守管理してほしい	動画をつくりたい	ライティングをしてほしい
リニューアルしたい	SEO対策をしたい	印刷物をつくりたい	イラストを描いてほしい
プチリニューアルしたい	WEB広告を出したい	ロゴをつくりたい	自社で簡単に更新したい
採用に特化したい			HP制作・運営サポートサービス
全部任せたい			採用特設HP「ウェブサイ」