1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

画面幅に応じてレイアウトを変化させたい

Last updated at Posted at 2020-09-01

####レスポンシブWebデザイン
画面幅によって見た目が変わるようにWEBサイトやアプリケーションのデザインを設計すること

####1.表示領域を設定

レスポンシブ対応を指定をしないと、スマートフォンで表示した時に、PCサイトのレイアウトをそのままスマートフォンの画面内に収まるように縮小して表示されるので、文字が小さくなり見づらくなってしまいます。

htmlファイルのheadタグ内に<meta name="viewport" content="width=device-width, initial-scale=1.0" />と記述します。これで表示領域の設定を完了しました。

表示領域をviewportと呼びます。width="device-width"を指定することで、ブラウザの大きさをPCやスマートフォンなどの機器の大きさに合わせることができます。initial-scale=1.0は、画面の拡大率を「1.0」に設定しているため、拡大は行われません。

####2.画面サイズによってCSSを切り替える
表示された画面幅に応じて適用するスタイルを切り替える機能の分岐点をブレークポイントといいます。
responsive.jpeg
2018年版ブレイクポイント(あくまでも目安です)

以下はPC表示時はpタグのフォントサイズを30px、タブレット時は25px、スマホ縦時は20pxにするという記述です。

/* PC表示時 */ p {  font-size: 30px } /* タブレット表示時 */ @media (max-width: 960px) {  p {   font-size: 25px  } } /* スマホ縦表示時 */ @media (max-width: 480px) {  p {   font-size: 20px  } }

@media (max-width/min-width: 〇〇〇px) { }という記述をメディアクエリと呼びます。

他にもPC表示時は横並びのレイアウトをスマホ時には縦並びにしたり、marginの値を小さくしたりすることがあります。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?