略してまけべん

メディアクエリの書き方【レスポンシブWEBデザインの基本】

2022.04.09 CSS

デバイスの横幅によって異なるCSSを指定できる「メディアクエリ」の書き方です。
レスポンシブのWEBサイト制作の際は必ず使用するはず。

※px数は自由に変更可能です。最近発売中のパソコン、タブレット、スマホ等の大きさを参考に考えると良いかも。
※スマホ表示の「767.98px」は何故こんなに刻んでいるかと言うと、767pxにするとどこかのポイントでCSSが上手く適用されない等の不具合が起きる可能性があるとネットで見たからです。

/* スマホ表示（767.98px以下の横幅のデバイスに適用される） */
@media screen and (max-width: 767.98px) {
  .sp-look {
    ここにスマホ向けのCSSを記入する
	}}

/* パソコン表示（768px以上の横幅のデバイスに適用される） */
@media screen and (min-width: 768px) {
  .pc-look {
    ここにパソコン向けのCSSを記入する
	}}

コメントを残すコメントをキャンセル